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 6387a620-1a1f-43cb-3f4a-7b07512ff785

index: 0

id: 6387a620-1a1f-43cb-3f4a-7b07512ff785

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.
`align`	`"start"`	`"center" \| "end" \| "start"` The alignment of the tabs.
`defaultIndex`	-	`number` The index of the selected tab.
`fitted`	`false`	`boolean` If `true`, tabs will stretch to width of the tablist.
`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.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the tab list.

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.

アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。

Tabs

使い方

itemsを使う

バリアントを変更する

サイズを変更する

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

方向を変更する

配置を変更する

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

無効にする

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

リンクにする

遅延レンダリング

動的にタブを操作する

Tab Content 6387a620-1a1f-43cb-3f4a-7b07512ff785

Tab Content 6783f945-1eac-4631-276e-85697cea3490

Tab Content 6f0966c3-5132-4543-0120-ea17bf4c39ac

タブをカスタマイズする

制御する

Props

Tabs.Root

Tabs.List

Tabs.Panel

Tabs.Tab

アクセシビリティ

Tabs.Root

Tabs.List

Tabs.Panel

Tabs.Tab