Tabs

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

CSS

Import

import { Tabs } from 'lism-css';

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 adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

<Tabs.Root g='20'>
  <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を使う例

Tab 01: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

<Tabs.Root g='20' 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から始まります。)

↓

例

Tab 02: Amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

<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:'list panel' auto / auto 1fr; を指定すると、タブリストとコンテンツが横並びになります。

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

↓

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

Tab 01: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

リサイズ可能

<Tabs.Root
  g='20'
  gd={[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='20' pis='10' py='10' pbs='5'>Tab 1</Tabs.Tab>
    <Tabs.Panel p='5'>
      <Dummy pre='Tab 01: '/>
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab px='20' pis='10' py='10' pbs='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では--_isActive, --_notActiveが使えるようになっています。
（-hov:setの--_isHov,--_notHovの解説を参考にしてください。）

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

↓

variant='line'

Tab 01: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

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

  .d--tabs__list {
    box-shadow: var(--sh-size) 0 var(--c--divider);
  }
  .d--tabs__tab {
    font-size: var(--fz--s);
    padding: 0.5em 0.875em;
    box-shadow: var(--_isActive, var(--sh-size) 0 0 currentColor);
  }
}

<Tabs.Root variant='line' g='20'>
  <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'

Tab 01: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

:where(.d--tabs--emboss) {
  .d--tabs__list {
    padding: 4px;
    font-size: var(--fz--s);
    background-color: var(--c--base-2);
    border-radius: var(--bdrs--2);
  }
  .d--tabs__tab {
    padding: 0.25em 0.75em;
    border-radius: calc(var(--bdrs--2) - 2px); /* 親の bdrs - 親のpadding / 2 */
    background-color: var(--_isActive, var(--c--base));
    box-shadow: var(--_isActive, var(--bxsh--1));
  }
}

<Tabs.Root variant='emboss' g='20' ji='c'>
  <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 01: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

Tab 02: Consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.

<Tabs.Root ata-tabs-keep-height g='20'>
  <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>