SegmentedControl

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { action } from '@storybook/addon-actions'
import { Story } from '@storybook/react'
import * as React from 'react'
import styled from 'styled-components'
import {
FaChartAreaIcon,
FaChartBarIcon,
FaChartLineIcon,
FaChartPieIcon,
FaTableIcon,
} from '../Icon'
import { Option, SegmentedControl } from './SegmentedControl'
export default {
title: 'Buttons(ボタン)/SegmentedControl',
component: SegmentedControl,
}
const departmentAndCrewOptions: Option[] = [
{ value: 'departments', content: '部署' },
{ value: 'crews', content: '従業員' },
{ value: 'both', content: '部署と従業員' },
]
const graphOptions: Option[] = [
{ value: 'table', ariaLabel: 'テーブル', content: <FaTableIcon /> },
{ value: 'chartBar', ariaLabel: 'バーチャート', content: <FaChartBarIcon /> },
{ value: 'chartArea', ariaLabel: 'エリアチャート', content: <FaChartAreaIcon /> },
{ value: 'chartLine', ariaLabel: 'ラインチャート', content: <FaChartLineIcon /> },
{ value: 'chartPie', ariaLabel: 'パイチャート', content: <FaChartPieIcon /> },
]
export const All: Story = () => {
const [value1, setValue1] = React.useState<string | null>('departments')
const [value2, setValue2] = React.useState<string | null>('both')
const [value3, setValue3] = React.useState<string | null>('chartArea')
const [value4, setValue4] = React.useState<string | null>(null)
const [value5, setValue5] = React.useState<string | null>(null)
return (
<List>
<dt id="dt-default">Default</dt>
<dd>
<SegmentedControl
options={departmentAndCrewOptions}
value={value1}
onClickOption={(value) => {
action('clicked')(value)
setValue1(value)
}}
aria-labelledby="dt-default"
/>
</dd>
<dt id="dt-small">Small</dt>
<dd>
<SegmentedControl
options={departmentAndCrewOptions}
value={value2}
onClickOption={(value) => {
action('clicked')(value)
setValue2(value)
}}
size="s"
aria-labelledby="dt-small"
/>
</dd>
<dt id="dt-icon">Icon</dt>
<dd>
<SegmentedControl
options={graphOptions}
value={value3}
onClickOption={(value) => {
action('clicked')(value)
setValue3(value)
}}
isSquare
aria-labelledby="dt-icon"
/>
</dd>
<dt id="dt-small-icon">Small icon</dt>
<dd>
<SegmentedControl
options={graphOptions}
value={value4}
onClickOption={(value) => {
action('clicked')(value)
setValue4(value)
}}
size="s"
isSquare
aria-labelledby="dt-small-icon"
/>
</dd>
<dt id="dt-disabled">Disabled</dt>
<dd>
<SegmentedControl
options={graphOptions.map((option, i) => ({
...option,
disabled: i === 2 || i === 4,
}))}
value={value5}
onClickOption={(value) => {
action('clicked')(value)
setValue5(value)
}}
aria-labelledby="dt-disabled"
/>
</dd>
</List>
)
}
All.storyName = 'all'
const List = styled.dl`
padding: 1rem;
margin: 0;
dt {
margin-bottom: 0.5rem;
}
dd {
margin-left: 0;
margin-bottom: 1rem;
}
`
処理中

Props

NameRequiredTypeDescription
optionstrueOption[]選択肢の配列
value-string選択中の値
onClickOption-(value: string) => void選択肢を押下したときに発火するコールバック関数
size-"default", "s"各ボタンの大きさ
isSquare-false, true各ボタンを正方形にするかどうか。アイコンボタンを使用する場合に指定します。
className-stringコンポーネントに適用するクラス名