ステージバーカード
リストとしてのファネル - チャートトラック上のステージごとの丸みのある丸みを1つ、左の名前、右側のトップステージの値と共有。 マウント上の幅のアニメーション、ステージを暗くし、残りの部分をフェードアウトし、見出しは次のとおりです。 ファネルチャートカードと同じステージを取ります。
Pipeline
1,180
+2.4%インストール
ステージバーカードはBoardUI Proに含まれています。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
モノクロ
mono シングルインク - ミッドグレーのライト、ダークの近くの白 - リファレンスの単段ファネルのためのパーステージハブをドロップします。
{/* Single ink: every pill in one grey (mid grey on light, near-white on dark) */}<StageBarsCard mono />データデータ
stages フラット { label, value, color? } リスト、ファネルのトップ。ステージを追加し、行とタイルを取得します(行ごとの3つのタイル、カードは収まるように成長します)。ラベルの列のサイズは、最長の名前に、株式は最初の段階から派生しています。各ステージは14pxを運ぶことができます アイコン 左端にバーの内側に描画 - showIcons={false} それらをすべて隠します。 期間のカプセルは、あなたが通過したときにドロップダウンです ranges - 各範囲は、独自のデータ(オプションで)を運ぶ delta / headline)および選択のチャートの再アニメーション; onRangeChange 代わりにフェッチします。データなしで、カードは3つのデモ範囲を出荷します。これは、上記のプレビューが使用しているものです。
import { RiEyeLine, RiUserAddLine } from "@remixicon/react";
// One entry per stage, top of the funnel first - the same shape FunnelChartCard// takes, plus an optional 14px icon drawn at the left end inside the bar.const stages = [ { label: "Visits", value: 4820, icon: <RiEyeLine className="size-3.5 text-neutral-950" /> }, { label: "Sign-up", value: 3260, icon: <RiUserAddLine className="size-3.5 text-neutral-950" /> }, { label: "Active", value: 2010 }, { label: "Pro", value: 1160 }, { label: "Team", value: 540 }, { label: "Enterprise", value: 180, color: "var(--color-chart-1)" }, // override any colour];
<StageBarsCard title="Pipeline" stages={stages} headline={4820} // optional resting headline (defaults to the first stage) delta={0.024} // "+2.4%" chip range="Last 30 days" // static pill… showIcons // default; false hides the icons without removing them from the data/>
// …or a working period dropdown: each range overrides stages / delta / headline.<StageBarsCard title="Pipeline" ranges={[ { id: "7d", label: "Last 7 days", stages: week, delta: 0.024 }, { id: "30d", label: "Last 30 days", stages: month, delta: 0.061 }, { id: "90d", label: "Last 90 days", stages: quarter, delta: -0.012 }, ]}/>