棒リストカード
分析の故障リスト - デバイス、ブラウザ、OS、国、またはソースによるトラフィックは、背景バーが各項目の共有をエンコードし、バーにラベルを付け、右側のメトリックを刻印します。 私たちのアンダーラインタブは、リスト間で切り替えます、メトリックキャプションは同じベースラインに座り、長いリストは、残りの部分を拡張する小さなカプセルの後ろにフェードします。
訪問者
訪問者
デスクトップ61%
モバイル31%
タブレット8%
インストール
棒リストカードはBoardUI Proに含まれています。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
タブベッドリスト
tabs です。 { id, label, items }[]; 各項目は運ぶかもしれません アイコン - フラグ、ファビコン、16px。 シェアは、タブの合計、バーの幅を最大の項目に相対的にします。
import * as Flags from "country-flag-icons/react/3x2";
<BarListCard metricLabel="Visitors" tabs={[ { id: "countries", label: "Countries", items: [ { label: "United States of America", value: 3120, icon: <Flags.US className="h-3 w-[18px] rounded-[2px]" /> }, { label: "India", value: 2160, icon: <Flags.IN className="h-3 w-[18px] rounded-[2px]" /> }, // … ], }, { id: "sources", label: "Sources", items: [{ label: "Direct", value: 5240 }, /* … */] }, ]} defaultTab="countries" onTabChange={(id) => track("breakdown_tab", { id })}/>シングルリストとモノ
パス 件 + タイトル タブなしで1つのリストのために、 metric="value" 株式の代わりに生数を印刷し、 mono 単一の灰色インクのため。
{/* One list, no tabs - a heading takes the tab strip's place */}<BarListCard title="Pages" metricLabel="Views" metric="value" items={pages} limit={4} />
{/* Single ink, mono grey bars */}<BarListCard mono />