Tabs

内容が対等な場合に使う。手順のように順序があるものには使わない。

プロフィール

設定

プロフィールの中身

import { TabContent, TabItem, TabItems, Tabs } from '@novi-ui/raster'

<Tabs>
  <TabItems>
    <TabItem id="profile">プロフィール</TabItem>
    <TabItem id="settings">設定</TabItem>
  </TabItems>
  <TabContent id="profile">プロフィールの中身</TabContent>
  <TabContent id="settings">設定の中身</TabContent>
</Tabs>

Props

Tabs の props 一覧
名前	型	説明
variant	'solid' \| 'outline' \| 'soft' \| 'ghost' \| 'plain'
size	'sm' \| 'md' \| 'lg'
orientation	'horizontal' \| 'vertical'
selectedKey	string
defaultSelectedKey	string
onSelectionChange	(key: string) => void
isDisabled	boolean
disabledKeys	string[]
children	ReactNode
classNames	ClassNames<typeof tabsSlots>

Slot

構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。

root必須
list必須
tab必須
indicator
panel必須

アクセシビリティ

矢印キーでタブ間を移動し、Tab キーはパネルへ移る。選択中のタブは `aria-selected`
キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motion が有効なときはアニメーションを行いません。

デモ

Props

Slot

アクセシビリティ