Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.8

Tabs

Tabsは、異なる表示領域を切り替えるコンポーネントです。

ソース@yamada-ui/tabs

インポート

import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@yamada-ui/react"
Copied!
  • Tabs: 子要素(TabList, TabPanels)を制御するラッパーコンポーネントです。
  • TabList: 子要素(Tab)を制御するラッパーコンポーネントです。
  • Tab: パネルのラベルとして機能し、そのパネルを表示するボタンのコンポーネントです。
  • TabPanels: 子要素(TabPanel)を制御するラッパーコンポーネントです。
  • TabPanel: ラベルに関連付けられたコンテンツを表示するコンポーネントです。

使い方

TabとTabPanelは、必ずペアになる必要があります。内部的に、同じインデックスのものが紐づけられます。

編集可能な例

<Tabs>
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>

  <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
  <TabPanel>へっ！きたねぇ花火だ</TabPanel>
  <TabPanel>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </TabPanel>
</Tabs>
Copied!

バリアントを変更する

編集可能な例

<VStack>
  <Tabs variant="line">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>

  <Tabs variant="sticky">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>

  <Tabs variant="sticky-subtle">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>

  <Tabs variant="sticky-solid">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>

  <Tabs variant="rounded">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>

  <Tabs variant="rounded-subtle">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>

  <Tabs variant="rounded-solid">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>

  <Tabs variant="unstyled">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>
</VStack>
Copied!

サイズを変更する

編集可能な例

<VStack>
  <Tabs size="sm">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>

  <Tabs size="md">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>

  <Tabs size="lg">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>
</VStack>
Copied!

カラースキーマを変更する

編集可能な例

<VStack>
  <Tabs variant="rounded-solid" colorScheme="red">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>
      <Text>クリリンのことか……クリリンのことかーーーっ！！！！！</Text>
    </TabPanel>
    <TabPanel>
      <Text>へっ！きたねぇ花火だ</Text>
    </TabPanel>
    <TabPanel>
      <Text>
        私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
      </Text>
    </TabPanel>
  </Tabs>

  <Tabs variant="sticky-solid" colorScheme="purple">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>
</VStack>
Copied!

デフォルトの項目を選択する

デフォルトの項目を選択する場合は、defaultIndexに項目のindexを設定します。

編集可能な例

<Tabs defaultIndex={1}>
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>

  <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
  <TabPanel>へっ！きたねぇ花火だ</TabPanel>
  <TabPanel>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </TabPanel>
</Tabs>
Copied!

配置を変更する

alignにstart, center, endを設定することで、タブの配置を変更できます。

編集可能な例

<VStack>
  <Tabs align="start">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>

  <Tabs align="center">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>

  <Tabs align="end">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>
</VStack>
Copied!

方向を変更する

orientationにhorizontalまたはverticalを設定することで、タブの方向を変更できます。

編集可能な例

<VStack>
  <Tabs orientation="horizontal">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>

  <Tabs orientation="vertical">
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>
</VStack>
Copied!

コンテナ幅まで引き伸ばす

fittedをtrueにすることで、タブをコンテナ幅まで均等に引き伸ばします。

編集可能な例

<Tabs variant="sticky" fitted>
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>

  <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
  <TabPanel>へっ！きたねぇ花火だ</TabPanel>
  <TabPanel>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </TabPanel>
</Tabs>
Copied!

無効にする

特定のタブを無効にしたい場合は、disabledを設定します。

編集可能な例

<Tabs>
  <Tab>孫悟空</Tab>
  <Tab disabled>ベジータ</Tab>
  <Tab>フリーザ</Tab>

  <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
  <TabPanel>へっ！きたねぇ花火だ</TabPanel>
  <TabPanel>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </TabPanel>
</Tabs>
Copied!

アクティブをマニュアル化する

デフォルトでは、フォーカスされたタブは自動的にアクティブ化されます。任意のタイミング(EnterやSpaceが押されたとき)でタブをアクティブ化したい場合は、manualをtrueに設定します。

編集可能な例

<Tabs manual>
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>

  <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
  <TabPanel>へっ！きたねぇ花火だ</TabPanel>
  <TabPanel>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </TabPanel>
</Tabs>
Copied!

遅延レンダリング

デフォルトでは、すべてのパネルはアクティブに関わらずDOMにレンダリングされます。つまり、非表示のパネルもレンダリングされているが、スタイルによって非表示になっていることになります。

タブがアクティブになるまで、各パネルのレンダリングを遅延させたい場合は、lazyをtrueに設定します。

編集可能な例

<Tabs lazy lazyBehavior="unmount">
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>

  <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
  <TabPanel>へっ！きたねぇ花火だ</TabPanel>
  <TabPanel>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </TabPanel>
</Tabs>
Copied!

TabListを使う

Tabは、childrenにTabListが存在しない場合、自動的にchildren内のTabをTabListでラッピングします。TabListをカスタマイズしたい場合は、childrenにTabListを設定します。

編集可能な例

<Tabs>
  <TabList borderWidth={1}>
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>
  </TabList>

  <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
  <TabPanel>へっ！きたねぇ花火だ</TabPanel>
  <TabPanel>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </TabPanel>
</Tabs>
Copied!

TabPanelsを使う

Tabは、childrenにTabPanelsが存在しない場合、自動的にchildren内のTabPanelをTabPanelsでラッピングします。TabPanelsをカスタマイズしたい場合は、childrenにTabPanelsを設定します。

編集可能な例

<Tabs variant="sticky">
  <Tab>孫悟空</Tab>
  <Tab>ベジータ</Tab>
  <Tab>フリーザ</Tab>

  <TabPanels borderBottomWidth={1} borderLeftWidth={1} borderRightWidth={1}>
    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </TabPanels>
</Tabs>
Copied!

制御する

編集可能な例

const [index, onChange] = useState<number>(0)

return (
  <Tabs index={index} onChange={onChange}>
    <Tab>孫悟空</Tab>
    <Tab>ベジータ</Tab>
    <Tab>フリーザ</Tab>

    <TabPanel>クリリンのことか……クリリンのことかーーーっ！！！！！</TabPanel>
    <TabPanel>へっ！きたねぇ花火だ</TabPanel>
    <TabPanel>
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </TabPanel>
  </Tabs>
)
Copied!

GitHubでこのページを編集する

前Accordion次Tree