+12.5%$3.252バックエンドエンジニア
インストール
CLI または手動でこのチップコンポーネントを追加できます。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLI
手動
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add chip共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
バリエーションと色
3つの重点レベルを経由 variant - それぞれ7色の組で利用できる 色: 色.
<Chip variant="bold" color="lime">Active</Chip> {/* statuses, deltas */}<Chip variant="subtle" color="cyan">$3.252</Chip> {/* values */}<Chip variant="caption" color="rose">Designer</Chip> {/* tags */}ステータスドット
ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ ステータスドット インジケータは、選択とテーブル内のチップとペアリングします。 これは、別のレジストリ項目です。 npx boardui add status-dot.
import { StatusDot } from "@/components/base/badges/status-dot";
<StatusDot color="green" /><StatusDot color="yellow" /><StatusDot color="indigo" />