タブ

React Aria 上に構築されたアンダーラインタブ。アクティブなタブは、ベースライン上に 2 px の青いアンダーラインをペイントし、各タブは、次の例のように、主要なアイコンと追跡カウントバッジをオプションに取ります。

バナー152

投稿ナビゲーション32

QRコード14

メンバー紹介

設定

インストール

このタブコンポーネントを CLI または手動で追加できます。

ダークモード対応：このコンポーネントはBoardUIのセマンティックトークンに合わせて自動で切り替わります。テーマスイッチの設定.

CLI

手動

CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。

npx boardui@latest add tabs

共有UIパッケージや独自のインポートエイリアスを使う場合は、インストールパスの設定をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。

コンテンツの表

タブは上に構築されます React Aria アクセス可能、roving-tabindex のキーボードの運行および自動のため TabList / TabPanel 協会。次のトピックをカバーします。

基本タブ
カウントバッジ & 主要なアイコン
ピルタブ
キーボードナビゲーション
コントロールされた選択

ピルタブ

PillTab ルートされたパネルではなく、ローカルビューを切り替えるための完全に丸みのある兄弟です。 2つのスタイルで出荷されます。 blue (デフォルト - AI チャットパネルの変更/ブラウザのスイッチャー) と静寂 gray、設定ツールページのようなスコープとフィルタ行に使用されます。どちらも同じアイドルとホバートリートメントを共有します。選択したカプセルのみが異なります。

import { RiGlobalLine, RiInfinityLine } from "@remixicon/react";import { PillTab, PillTabList } from "@/components/base/tabs/pill-tab";
// Blue (default) - panel view switchers<PillTabList>  <PillTab icon={RiInfinityLine} isSelected={view === "changes"} onSelect={() => setView("changes")}>    Changes  </PillTab>  <PillTab icon={RiGlobalLine} isSelected={view === "browser"} onSelect={() => setView("browser")}>    Browser  </PillTab></PillTabList>
// Gray - quieter scope / filter rows<PillTabList>  <PillTab variant="gray" isSelected={scope === "Home"} onSelect={() => setScope("Home")}>    Home  </PillTab></PillTabList>