TabBar

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { action } from '@storybook/addon-actions'
import { Story } from '@storybook/react'
import { userEvent } from '@storybook/testing-library'
import * as React from 'react'
import styled from 'styled-components'
import { TabBar } from './TabBar'
import { TabItem } from './TabItem'
export default {
title: 'Navigation(ナビゲーション)/TabBar',
component: TabBar,
subcomponents: { TabItem },
}
const Template: Story = () => (
<Ul>
<li>
<p>Border</p>
<TabBar>
<TabItem id="1" onClick={action('clicked')}>
Tab
</TabItem>
<TabItem id="2" onClick={action('clicked')} selected>
Selected
</TabItem>
<TabItem id="3" onClick={action('clicked')} disabled>
Disabled
</TabItem>
</TabBar>
</li>
<li>
<p>No border</p>
<TabBar bordered={false}>
<TabItem id="1" onClick={action('clicked')}>
Tab
</TabItem>
<TabItem id="2" onClick={action('clicked')} selected>
Selected
</TabItem>
<TabItem id="3" onClick={action('clicked')} disabled>
Disabled
</TabItem>
</TabBar>
</li>
</Ul>
)
export const All = Template.bind({})
export const RegFocusBorder = Template.bind({})
RegFocusBorder.play = () => userEvent.tab()
export const RegFocusNoBorder = Template.bind({})
RegFocusNoBorder.play = () => [...Array(3)].forEach((_) => userEvent.tab())
const Ul = styled.ul`
padding: 0 1rem;
li {
margin-bottom: 1rem;
list-style: none;
}
`
処理中

Props

NameRequiredTypeDescription
childrentruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalタブバーの内容。通常は TabItem を並べる。
bordered-false, true`true` のとき、TabBar に下線を表示する
className-stringコンポーネントに適用するクラス名