Tabs

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

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

How to use

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

Import

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

Props

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

基本構造

<Tabs.Root>
  <Tabs.Item>
    <Tabs.Tab>Tab label</Tabs.Tab>
    <Tabs.Panel>...Contents...</Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>

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

ソースコード

ソースコードは GitHub で公開しています。

Examples

基本例

↓

例

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>
  <Tabs.Item>
    <Tabs.Tab>Tab 1</Tabs.Tab>
    <Tabs.Panel>
      <DummyText pre="Tab 01: "/>
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab>Tab 2</Tabs.Tab>
    <Tabs.Panel>
      <DummyText length="l" offset={1} pre="Tab 02: " />
    </Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>

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

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

↓

例

<Tabs.Root defaultIndex={2}>
  <Tabs.Item>
    <Tabs.Tab>Tab 1</Tabs.Tab>
    <Tabs.Panel>
      <DummyText pre="Tab 01: "/>
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab>Tab 2</Tabs.Tab>
    <Tabs.Panel>
      <DummyText length="l" offset={1} pre="Tab 02: " />
    </Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>

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

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

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

↓

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

リサイズ

<Tabs.Root gt={[null, '"list panel" auto / auto 1fr']} listProps={{ fxd: [null, 'column'] }}>
  <Tabs.Item>
    <Tabs.Tab>Tab 1</Tabs.Tab>
    <Tabs.Panel>
      <DummyText pre="Tab 01: "/>
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab>Tab 2</Tabs.Tab>
    <Tabs.Panel>
      <DummyText length="l" offset={1} pre="Tab 02: " />
    </Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>

Opt-in

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

c--tabs_tabでは--_isSelected と --_notSelected 変数が使えるようになっていますので、活用していただくと便利です。（set--var:hovの--_isHov,--_notHovと同じようにして使用できます。）

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

`c--tabs--line`

↓

必要な追加CSS

@layer lism-component {
  .c--tabs--line > .c--tabs_list {
    /* Memo: ov-x='auto' の時に margin がネガティブだと崩れるので、box-shadowで表現する。 */
    box-shadow: inset 0 -2px 0 var(--divider);
  }
  .c--tabs--line .c--tabs_tab {
    font-size: var(--fz--s);
    background-color: transparent;
    box-shadow: var(--_isSelected, inset 0 -2px 0 0 currentColor);
  }
}

↓

variant='line'

<Tabs.Root variant="line">
  <Tabs.Item>
    <Tabs.Tab>Tab 1</Tabs.Tab>
    <Tabs.Panel>
      <DummyText pre="Tab 01: " />
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab>Tab 2</Tabs.Tab>
    <Tabs.Panel>
      <DummyText length="l" offset={1} pre="Tab 02: " />
    </Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>

`c--tabs--emboss`

↓

必要な追加CSS

@layer lism-component {
  .c--tabs--emboss > .c--tabs_list {
    justify-self: center;
    padding: 4px;
    font-size: var(--fz--s);
    background-color: var(--base-2);
    border-radius: var(--bdrs--20);
  }
  .c--tabs--emboss .c--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));
  }
}

↓

variant='emboss'

<Tabs.Root variant="emboss">
  <Tabs.Item>
    <Tabs.Tab>Tab 1</Tabs.Tab>
    <Tabs.Panel>
      <DummyText pre="Tab 01: " />
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab>Tab 2</Tabs.Tab>
    <Tabs.Panel>
      <DummyText length="l" offset={1} pre="Tab 02: " />
    </Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>

高さを固定する方法

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

↓

必要な追加CSS

@layer lism-component {
  [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>
      <DummyText pre="Tab 01: " />
    </Tabs.Panel>
  </Tabs.Item>
  <Tabs.Item>
    <Tabs.Tab px="10">Tab 2</Tabs.Tab>
    <Tabs.Panel>
      <DummyText length="xl" offset={1} pre="Tab 02: " />
    </Tabs.Panel>
  </Tabs.Item>
</Tabs.Root>