Segmented control
옵션들을 수평으로 나열한 버튼 그룹으로 한 번에 하나의 옵션만 선택합니다. 선택된 항목은 시각적으로 강조 되는 형태의 구조로 같은 콘텐츠 영역 내에서 보기 방식이나 필터를 변경할 때 사용됩니다.
SegmentedControl 은 2가지 variant 를 사용할 수 있습니다.
- solid (default)
- outlined
import {
SegmentedControl,
SegmentedControlItem,
} from '@wanteddev/wds';
const Demo = () => {
return (
<SegmentedControl variant="solid" defaultValue="0">
<SegmentedControlItem value="0">
Board
</SegmentedControlItem>
<SegmentedControlItem value="1">
List
</SegmentedControlItem>
</SegmentedControl>
)
}
export default Demo;import {
SegmentedControl,
SegmentedControlItem,
} from '@wanteddev/wds';
const Demo = () => {
return (
<SegmentedControl variant="outlined" defaultValue="0">
<SegmentedControlItem value="0">
Board
</SegmentedControlItem>
<SegmentedControlItem value="1">
List
</SegmentedControlItem>
</SegmentedControl>
)
}
export default Demo;3가지 크기를 사용할 수 있습니다.
- small
- medium (default)
- large
import {
SegmentedControl,
SegmentedControlItem,
FlexBox,
} from '@wanteddev/wds';
const Demo = () => {
return (
<FlexBox flexDirection="Column" gap="12px" sx={{ width: '100%' }}>
<SegmentedControl variant="solid" size="small" defaultValue="0">
<SegmentedControlItem value="0">
Board
</SegmentedControlItem>
<SegmentedControlItem value="1">
List
</SegmentedControlItem>
</SegmentedControl>
<SegmentedControl variant="solid" size="medium" defaultValue="0">
<SegmentedControlItem value="0">
Board
</SegmentedControlItem>
<SegmentedControlItem value="1">
List
</SegmentedControlItem>
</SegmentedControl>
<SegmentedControl variant="solid" size="large" defaultValue="0">
<SegmentedControlItem value="0">
Board
</SegmentedControlItem>
<SegmentedControlItem value="1">
List
</SegmentedControlItem>
</SegmentedControl>
<SegmentedControl variant="outlined" size="small" defaultValue="0">
<SegmentedControlItem value="0">
Board
</SegmentedControlItem>
<SegmentedControlItem value="1">
List
</SegmentedControlItem>
</SegmentedControl>
<SegmentedControl variant="outlined" size="medium" defaultValue="0">
<SegmentedControlItem value="0">
Board
</SegmentedControlItem>
<SegmentedControlItem value="1">
List
</SegmentedControlItem>
</SegmentedControl>
<SegmentedControl variant="outlined" size="large" defaultValue="0">
<SegmentedControlItem value="0">
Board
</SegmentedControlItem>
<SegmentedControlItem value="1">
List
</SegmentedControlItem>
</SegmentedControl>
</FlexBox>
)
}
export default Demo;leadingContent prop 을 사용하면 앞쪽에 아이콘을 추가할 수 있습니다.
import {
SegmentedControl,
SegmentedControlItem,
} from '@wanteddev/wds';
import { IconColumn, IconList } from '@wanteddev/wds-icon';
const Demo = () => {
return (
<SegmentedControl defaultValue="0">
<SegmentedControlItem value="0" leadingContent={<IconColumn />}>
Board
</SegmentedControlItem>
<SegmentedControlItem value="1" leadingContent={<IconList />}>
List
</SegmentedControlItem>
</SegmentedControl>
)
}
export default Demo;