Tabsタブ

複数のビューを切り替えるためのコンポーネントです。TopAppBarやBottomNavigationはグローバルなナビゲーションとして使用しますが、Tabsはローカルなナビゲーションであることに注意してください。

更新 2024/11/1

サンプル

Tabs内で、TabItemを連ねて使用します。

import { TabItem } from "@serendie/ui";
import { Tabs } from "@serendie/ui";

export function TabsSample() {
  return (
    <Tabs defaultValue="2">
      <TabItem title="連絡先" value="1" />
      <TabItem title="トーク" value="2" />
      <TabItem title="売上履歴" value="3" dot />
      <TabItem title="入出金" value="4" badge={3} disabled />
    </Tabs>
  );
}

バリエーション

TabItemには通知バッジ付きのバリエーションがあります。

Default
With Badge
With Badge (Number)

import { Dd, Dl, Dt } from "@/components/LayoutUtils";
import { TabItem, Tabs } from "@serendie/ui";

export function TabsNotificationSample() {
  return (
    <Dl>
      <Dt>Default</Dt>
      <Dd>
        <Tabs defaultValue="1">
          <TabItem title="連絡先" value="1" />
          <TabItem title="トーク" value="2" />
          <TabItem title="売上履歴" value="3" />
          <TabItem title="入出金" value="4" />
        </Tabs>
      </Dd>

      <Dt>With Badge</Dt>
      <Dd>
        <Tabs defaultValue="1">
          <TabItem title="連絡先" value="1" dot />
          <TabItem title="トーク" value="2" />
          <TabItem title="売上履歴" value="3" />
          <TabItem title="入出金" value="4" />
        </Tabs>
      </Dd>

      <Dt>With Badge (Number)</Dt>
      <Dd>
        <Tabs defaultValue="1">
          <TabItem title="連絡先" value="1" badge={3} />
          <TabItem title="トーク" value="2" />
          <TabItem title="売上履歴" value="3" />
          <TabItem title="入出金" value="4" />
        </Tabs>
      </Dd>
    </Dl>
  );
}

状態

TabItemは計6種類の状態があります。非活性とする際はdisabled propsを使用してください。


Default
Selected
Default
Focused
Disabled