Tabs

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

クリリンのことか……クリリンのことかーーーっ！！！！！

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab index={0}>孫悟空</Tabs.Tab>
    <Tabs.Tab index={1}>ベジータ</Tabs.Tab>
    <Tabs.Tab index={2}>フリーザ</Tabs.Tab>
  </Tabs.List>

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

使い方

import { Tabs } from "@yamada-ui/react"

import { Tabs } from "@/components/ui"

import { Tabs } from "@workspaces/ui"

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab />
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel />
  </Tabs.Panels>
</Tabs.Root>

itemsを使う

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <Tabs.Root items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

バリアントを変更する

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["line", "outline", "subtle", "plain"]}>
      {(variant) => (
        <Tabs.Root key={variant} variant={variant} items={items}>
          <Tabs.List />
          <Tabs.Panels />
        </Tabs.Root>
      )}
    </For>
  </VStack>
)

サイズを変更する

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size) => (
        <Tabs.Root key={size} size={size} items={items}>
          <Tabs.List />
          <Tabs.Panels />
        </Tabs.Root>
      )}
    </For>
  </VStack>
)

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

へっ！きたねぇ花火だ

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <Tabs.Root defaultIndex={1} items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

方向を変更する

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["horizontal", "vertical"]}>
      {(orientation) => (
        <Tabs.Root key={orientation} orientation={orientation} items={items}>
          <Tabs.List />
          <Tabs.Panels />
        </Tabs.Root>
      )}
    </For>
  </VStack>
)

配置を変更する

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["start", "center", "end"]}>
      {(align) => (
        <Tabs.Root key={align} align={align} items={items}>
          <Tabs.List />
          <Tabs.Panels />
        </Tabs.Root>
      )}
    </For>
  </VStack>
)

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

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <Tabs.Root fitted items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

無効にする

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      disabled: true,
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <Tabs.Root items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

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

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

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <Tabs.Root manual items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

リンクにする

孫悟空ベジータフリーザ

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      asChild: true,
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: (
        <Text as="a" href="#孫悟空">
          孫悟空
        </Text>
      ),
    },
    {
      asChild: true,
      panel: "へっ！きたねぇ花火だ",
      tab: (
        <Text as="a" href="#ベジータ">
          ベジータ
        </Text>
      ),
    },
    {
      asChild: true,
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: (
        <Text as="a" href="#フリーザ">
          フリーザ
        </Text>
      ),
    },
  ],
  [],
)

return (
  <Tabs.Root items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

遅延レンダリング

クリリンのことか……クリリンのことかーーーっ！！！！！

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["unmount", "keepMounted"]}>
      {(lazyBehavior) => (
        <Tabs.Root
          key={lazyBehavior}
          lazy
          lazyBehavior={lazyBehavior}
          items={items}
        >
          <Tabs.List />
          <Tabs.Panels />
        </Tabs.Root>
      )}
    </For>
  </VStack>
)

動的にタブを操作する

Tab Content 64efd69a-752f-4b9b-300c-02efb54463b3

index: 0

id: 64efd69a-752f-4b9b-300c-02efb54463b3

const [index, setIndex] = useState(0)
const [items, setItems] = useState<Tabs.Item[]>([
  { id: uuid(), panel: "Tab Content", tab: "Tab" },
  { id: uuid(), panel: "Tab Content", tab: "Tab" },
  { id: uuid(), panel: "Tab Content", tab: "Tab" },
])

const onAddTab = () => {
  const nextItems = [...items, { id: uuid(), panel: "Tab Content", tab: "Tab" }]
  setItems(nextItems)
  setIndex(nextItems.length - 1)
}

const onRemoveTab = (id: string) => {
  const removeIndex = items.findIndex((item) => item.id === id)
  const nextItems = items.filter((item) => item.id !== id)

  setItems(nextItems)

  if (removeIndex < index) {
    setIndex(index - 1)
  } else if (removeIndex === index) {
    setIndex(Math.min(index, nextItems.length - 1))
  }
}

return (
  <Tabs.Root index={index} items={items} manual onChange={setIndex}>
    <Tabs.List>
      {items.map(({ id, tab }, index) => {
        const hasRemove = items.length > 1

        return (
          <Tabs.Tab key={id} index={index} transition="none">
            {tab}
            {hasRemove ? (
              <IconButton
                as="span"
                size="2xs"
                variant="ghost"
                aria-label="Remove Tab"
                icon={<XIcon />}
                role="button"
                onClick={(ev) => {
                  ev.stopPropagation()
                  onRemoveTab(id!)
                }}
              />
            ) : null}
          </Tabs.Tab>
        )
      })}

      <Button
        size="xs"
        variant="ghost"
        role="tab"
        startIcon={<PlusIcon />}
        onClick={onAddTab}
      >
        Add Tab
      </Button>
    </Tabs.List>

    {items.map(({ id, panel }, index) => (
      <Tabs.Panel key={id} index={index}>
        <Heading>
          {panel} {id}
        </Heading>

        <Text>index: {index}</Text>
        <Text>id: {id}</Text>
      </Tabs.Panel>
    ))}
  </Tabs.Root>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

タブをカスタマイズする

クリリンのことか……クリリンのことかーーーっ！！！！！

<Tabs.Root>
  <Tabs.List borderWidth={1}>
    <Tabs.Tab index={0}>孫悟空</Tabs.Tab>
    <Tabs.Tab index={1}>ベジータ</Tabs.Tab>
    <Tabs.Tab index={2}>フリーザ</Tabs.Tab>
  </Tabs.List>

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

制御する

クリリンのことか……クリリンのことかーーーっ！！！！！

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

const items = useMemo<Tabs.Item[]>(
  () => [
    {
      panel: "クリリンのことか……クリリンのことかーーーっ！！！！！",
      tab: "孫悟空",
    },
    {
      panel: "へっ！きたねぇ花火だ",
      tab: "ベジータ",
    },
    {
      panel:
        "私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……",
      tab: "フリーザ",
    },
  ],
  [],
)

return (
  <Tabs.Root index={index} onChange={onChange} items={items}>
    <Tabs.List />
    <Tabs.Panels />
  </Tabs.Root>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Tabs.Root

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm"` The size of the component.
`variant`	`"line"`	`"line" \| "outline" \| "plain" \| "subtle"` The variant of the component.
`defaultIndex`	-	`number` The index of the selected tab.
`index`	-	`number` The index of the selected tab.
`items`	-	`TabsItem[]` If provided, generate tab and panel components based on tabs.
`lazy`	`false`	`boolean` If `true`, rendering of the content will be deferred until it is selected.
`lazyBehavior`	`"unmount"`	`LazyBehavior` The lazy behavior of content when not active. Only works when `lazy={true}`. - `unmount`: The content is always unmounted. - `keepMounted`: The content is initially unmounted, but stays mounted when selected.
`manual`	`false`	`boolean` If `true`, the tabs will be manually activated and display its panel by pressing Space or Enter. If `false`, the tabs will be automatically activated and their panel is displayed when they receive focus.
`onChange`	-	`(index: number) => void` The callback invoked when the index changes.

Tabs.List

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Tabs.Panel

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`index`	-	`number` The index of the tab panel.

Tabs.Tab

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`index`	-	`number` The index of the tab.

アクセシビリティ

Tabsは、アクセシビリティに関してWAI-ARIA - Tabs Patternに従います。

キー	説明	状態
`Tab`	フォーカスがタブリストに移動するとアクティブなタブをフォーカスします。タブリスト内である場合はタブパネルにフォーカスを移動します。	-
`ArrowLeft`	無効ではない前のタブをフォーカスします。最初のタブの場合は無効ではない最後のタブをフォーカスします。	`orientation="horizontal"`
`ArrowRight`	無効ではない次のタブをフォーカスします。最後のタブの場合は無効ではない最初のタブをフォーカスします。	`orientation="horizontal"`
`ArrowUp`	無効ではない前のタブをフォーカスします。最初のタブの場合は無効ではない最後のタブをフォーカスします。	`orientation="vertical"`
`ArrowDown`	無効ではない次のタブをフォーカスします。最後のタブの場合は無効ではない最初のタブをフォーカスします。	`orientation="vertical"`
`Space`, `Enter`	フォーカスされたタブをアクティブにします。	`manual={true}`
`Home`	無効ではない最初のタブをフォーカスします。	-
`End`	無効ではない最後のタブをフォーカスします。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Tabs.List`	`role="tablist"`	タブリストであることを示します。
	`aria-orientation`	`orientation`の値に基づいて`"horizontal"`または`"vertical"`を設定します。デフォルトは`"horizontal"`です。
`Tabs.Tab`	`role="tab"`	タブであることを示します。
	`aria-selected`	タブが選択されている場合は`"true"`を設定し、選択されていない場合は`"false"`を設定します。
	`aria-controls`	関連した`Tabs.Panel`の`id`を設定します。
`Tabs.Panel`	`role="tabpanel"`	タブパネルであることを示します。
	`aria-labelledby`	関連した`Tabs.Tab`の`id`を設定します。

類似のコンポーネント

Paginationは、コンテンツのページ分割とナビゲーションを管理するためのコンポーネントです。

NativeAccordionは、HTMLのdetails要素を使用して情報を展開または折りたたんで表示するリストのコンポーネントです。

Breadcrumbは、ユーザーがウェブサイトの階層を理解するのに役立つコンポーネントです。

Stepsは、複数のステップのプロセスの進行状況を表示するコンポーネントです。

Accordionは、情報を展開または折りたたんで表示するリストのコンポーネントです。

Selectは、ユーザーがオプションのリストから値を選択するために使用されるコンポーネントです。

Menuは、一般的なドロップダウンメニューを表示するコンポーネントです。

使用しているコンポーネント・フック

useValueは、useBreakpointValueとuseColorModeValueを組み合わせたカスタムフックです。

useDescendantsは、子要素を管理するためのカスタムフックです。

Tabs

Tab Content 64efd69a-752f-4b9b-300c-02efb54463b3

Tab Content b426b79a-d23c-49b5-1e04-e6a6fee48981

Tab Content 84b484a5-53c3-4dee-3ec0-ccc2465e3b88

Tabs.Root

Tabs.List

Tabs.Panel

Tabs.Tab

Tabs.Root

Tabs.List

Tabs.Panel

Tabs.Tab