Tabs

タブ要素を作成できるコンポーネントです。
スタイリングはほぼなく、動きに関わる部分だけを提供しています。表示スタイルは適宜カスタマイズしてご利用ください。

基本構造

d--tabs
  div.d--tabs_list[role="tablist"]
    button.d--tabs_tab.set-plain[role="tab"][aria-controls="{tabID}"][aria-selected="true"]
    ...button

  div.d--tabs_panel[id="{tabID}"][role="tabpanel"][aria-hidden="false"]
    ...Contents...
  ...div.d--tabs_panel

CSS

JavaScript

Import

@lism-css/ui パッケージで提供しています。

import { Tabs } from '@lism-css/ui/react';

Props

プロパティ	説明
`<Tabs.Root>` `variant`	`d--tabs--{variant}`クラスが出力されます。
`<Tabs.Root>` `tabId`	`aria-controls`の値として使用されるタブを特定するためのIDを文字列で指定できます。
`<Tabs.Root>` `defaultIndex`	最初に開いておくタブ番号を指定できます。
`<Tabs.Root>` `listProps`	タブボタンを囲むリスト要素(`d--tabs_list`)へ渡すpropsを指定できます。

Usage

<Tabs.Item>の子要素は<Tabs.Tab>と<Tabs.Panel>のみしか認識しません。また、この2つは必ず両方使用してください。

↓

例

Tab 01: Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

<Tabs.Root g='15'>
  <Tabs.Item>
    <Tabs.Tab px='10'>Tab 1</Tabs.Tab>
    <Tabs.Panel>
      <Dummy pre='Tab 01: '/>
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab px='10'>Tab 2</Tabs.Tab>
    <Tabs.Panel>
      <Dummy length='l' offset={1} pre='Tab 02: ' />
    </Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>

listPropsで.d--tabs_listにプロパティを渡せます。

↓

listPropsを使う例

<Tabs.Root g='15' ji='center' listProps={{bd: '-', bdrs: '99', p: '10', lh:'xs'}}>
  <Tabs.Item>
    <Tabs.Tab px='10'>Tab 1</Tabs.Tab>
    <Tabs.Panel>
      <Dummy pre='Tab 01: '/>
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab px='10'>Tab 2</Tabs.Tab>
    <Tabs.Panel>
      <Dummy length='l' offset={1} pre='Tab 02: ' />
    </Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>

最初に開いておくタブ番号を指定する

<Tabs.Root>の defaultIndex で、最初に開いておくタブ番号を指定できます。
(インデックス番号は1から始まります。)

↓

例

<Tabs.Root defaultIndex={2} listProps={{'bd-b': '-'}}>
  <Tabs.Item>
    <Tabs.Tab p='10'>Tab 1</Tabs.Tab>
    <Tabs.Panel p='10'>
      <Dummy pre='Tab 01: '/>
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab p='10'>Tab 2</Tabs.Tab>
    <Tabs.Panel p='10'>
      <Dummy length='l' offset={1} pre='Tab 02: ' />
    </Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>

タブコンテンツを横並び配置にする

<Tabs.Root>(.d--tabs)にgrid-template:'list panel' auto / auto 1fr; を指定すると、タブリストとコンテンツが横並びになります。

それと同時に、タブリスト(.d--tabs_list)のボタンを縦並び（flex-direction:column;）に変更すると、以下のようなレイアウトが実現できます。

↓

@smサイズより大きい場合、コンテンツを横並びにする例

リサイズ可能

<Tabs.Root
  g='15'
  gt={[null, '"list panel" auto / auto 1fr']}
  listProps={{fxd: [null, 'column'], bd: '-', bdw:['0 0 1px 0','0 1px 0 0']}}
>
  <Tabs.Item>
    <Tabs.Tab px='15' px-s='10' py='10' py-s='5'>Tab 1</Tabs.Tab>
    <Tabs.Panel p='5'>
      <Dummy pre='Tab 01: '/>
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab px='15' px-s='10' py='10' py-s='5'>Tab 2</Tabs.Tab>
    <Tabs.Panel p='5'>
      <Dummy length='l' offset={1} pre='Tab 02: ' />
    </Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>

スタイルバリエーションの作成例

コアではスタイルを特に持ちませんので、サイトごとにスタイルを用意してご利用ください。

d--tabs_tabでは--_isSelected, --_notSelectedが使えるようになっています。
（set-hovの--_isHov,--_notHovの解説を参考にしてください。）

ここではいくつかのスタイリング例を紹介します。

↓

variant='line'

/* Memo: ov-x='auto' の時に margin がネガティブだとアウトなので、borderではなくbox-shadowで表現する。 */
:where(.d--tabs--line) {
  --sh-size: inset 0 -2px;

  .d--tabs_list {
    box-shadow: var(--sh-size) 0 var(--divider);
  }
  .d--tabs_tab {
    font-size: var(--fz--s);
    padding: 0.5em 0.875em;
    box-shadow: var(--_isSelected, var(--sh-size) 0 0 currentColor);
  }
}

<Tabs.Root variant='line' g='15'>
  <Tabs.Item>
    <Tabs.Tab>Tab 1</Tabs.Tab>
    <Tabs.Panel>
      <Dummy pre='Tab 01: '/>
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab>Tab 2</Tabs.Tab>
    <Tabs.Panel>
      <Dummy length='l' offset={1} pre='Tab 02: ' />
    </Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>

↓

variant='emboss'

:where(.d--tabs--emboss) {
  .d--tabs_list {
    padding: 4px;
    font-size: var(--fz--s);
    background-color: var(--base-2);
    border-radius: var(--bdrs--20);
  }
  .d--tabs_tab {
    padding: 0.25em 0.75em;
    border-radius: calc(var(--bdrs--20) - 2px); /* 親の bdrs - 親のpadding / 2 */
    background-color: var(--_isSelected, var(--base));
    box-shadow: var(--_isSelected, var(--bxsh--10));
  }
}

<Tabs.Root variant='emboss' g='15' ji='center'>
  <Tabs.Item>
    <Tabs.Tab>Tab 1</Tabs.Tab>
    <Tabs.Panel>
      <Dummy pre='Tab 01: '/>
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab>Tab 2</Tabs.Tab>
    <Tabs.Panel>
      <Dummy length='l' offset={1} pre='Tab 02: ' />
    </Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>

Opt-in

高さを固定する方法

タブ全体の高さを一番長いコンテンツパネルに合わせて固定する方法を紹介します。

↓

必要な追加CSS

[data-tabs-keep-height] > [aria-hidden='true'] {
  display: block;
  visibility: hidden;
  opacity: 0;
}

↓

例（Tab 2の高さに固定されます）

Tab 02: Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

<Tabs.Root data-tabs-keep-height g='15'>
  <Tabs.Item>
    <Tabs.Tab px='10'>Tab 1</Tabs.Tab>
    <Tabs.Panel>
      <Dummy pre='Tab 01: '/>
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab px='10'>Tab 2</Tabs.Tab>
    <Tabs.Panel>
      <Dummy length='xl' offset={1} pre='Tab 02: ' />
    </Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>