Folder Tabs
Card の上に貼り付けて使う専用のフォルダ型タブ。background の上に置かれた card のヘッダー部分として配置します。選択中のタブは neutral-grey-40 の塗り + 白文字で強調、非選択のタブは透明 bg で background に溶けます。コンテナ下端の 1px ラインがそのまま card の上端と連結します。
プレビュー
background の上に card を置き、その上端にタブが貼り付いている状態です。 TabsList の 1px 下線がそのまま card の上端ラインになります。
タブ 1 のコンテンツ領域です。
状態
Normal は非選択、Hover はマウスオーバー中、Selected は現在開いているタブです。 Normal/Hover の文字色は同じ text-tertiary で、bg だけが変化します。
Normal
Hover
タブテキスト
Selected
実装例
import {
FolderTabs,
FolderTabsContent,
FolderTabsList,
FolderTabsTrigger,
} from "@/components/ui/folder-tabs";
function HistoryTabs() {
return (
<FolderTabs defaultValue="memo">
<FolderTabsList>
<FolderTabsTrigger value="memo">メモ</FolderTabsTrigger>
<FolderTabsTrigger value="call">通話</FolderTabsTrigger>
<FolderTabsTrigger value="sms">SMS</FolderTabsTrigger>
</FolderTabsList>
<FolderTabsContent value="memo">{/* メモ履歴 */}</FolderTabsContent>
<FolderTabsContent value="call">{/* 通話履歴 */}</FolderTabsContent>
<FolderTabsContent value="sms">{/* SMS 履歴 */}</FolderTabsContent>
</FolderTabs>
);
}仕様
各タブ
- widthmin 100px / max 150px(コンテンツに合わせて伸縮、150px 超は ... で省略)
- height30px(全状態共通)
- padding (左右)8px (spacing-xxs)
- radius上端 4px(下端 0)
- font14px / Medium / line-height 1
- color (Normal / Hover)#9CA3AF (text-tertiary)
- color (Selected)#FFFFFF (text-white)
- bg (Normal)transparent
- bg (Hover)#EDEEEF(白 + 8% 暗化)
- bg (Selected)#9CA3AF (neutral-grey-40)
- focus (キーボード)secondary-blue の outline ring
タブリスト(コンテナ)
- border-bottom1px solid #9CA3AF (neutral-grey-40)
- 配置inline-flex / 下端を共有
タブ間の縦仕切り線
- 出現条件非選択タブ同士が隣接するときだけ表示
- サイズ1px × 15px
- color#D1D5DB (border)
利用基準
使うべき時
- background 上に置かれた card の上端ヘッダーとして使う(card に貼り付ける専用のタブ)
- TabsList の 1px ラインが card の上端と連結する形で配置する
- card と合体する選択タブ・background に溶ける非選択タブの対比で「現在開いているパネル」を示したい場面で使う
- タブ数が 2〜5 個程度に収まる場面で使う
使わない時
- card の中身としてタブを置く(コンテンツ切り替え) → 下線型 Tabs を使う
- card のヘッダーではなく単体で background 上に置く(連結する card がない)
- 全幅にラベルを引き伸ばす必要がある場面(各タブ幅は 100px 固定)
- 選択肢が多い (6+) → ナビゲーション項目や Select を検討する