Segmented control

옵션들을 수평으로 나열한 버튼 그룹으로 한 번에 하나의 옵션만 선택합니다. 선택된 항목은 시각적으로 강조 되는 형태의 구조로 같은 콘텐츠 영역 내에서 보기 방식이나 필터를 변경할 때 사용됩니다.

Design

Web

iOS

Android

Basic segmented control

여러 항목 중 하나를 선택하여 보기 방식이나 필터를 변경할 때 사용합니다.

BoardList

import {
  SegmentedControl,
  SegmentedControlItem,
} from '@montage-ui/core';

const Demo = () => {
  return (
    <SegmentedControl defaultValue="0" sx={{ width: '40%', minWidth: 260 }}>
      <SegmentedControlItem value="0">
        Board
      </SegmentedControlItem>
     <SegmentedControlItem value="1">
        List
      </SegmentedControlItem>
    </SegmentedControl>
  )
}

export default Demo;

Sizes

3가지 크기를 사용할 수 있습니다.

small
medium (default)
large

import {
  SegmentedControl,
  SegmentedControlItem,
  FlexBox,
} from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox flexDirection="column" gap="12px" sx={{ width: '40%', minWidth: 260 }}>
      <SegmentedControl size="small" defaultValue="0">
        <SegmentedControlItem value="0">
          Board
        </SegmentedControlItem>
        <SegmentedControlItem value="1">
          List
        </SegmentedControlItem>
      </SegmentedControl>

      <SegmentedControl size="medium" defaultValue="0">
        <SegmentedControlItem value="0">
          Board
        </SegmentedControlItem>
        <SegmentedControlItem value="1">
          List
        </SegmentedControlItem>
      </SegmentedControl>

      <SegmentedControl size="large" defaultValue="0">
        <SegmentedControlItem value="0">
          Board
        </SegmentedControlItem>
        <SegmentedControlItem value="1">
          List
        </SegmentedControlItem>
      </SegmentedControl>
    </FlexBox>
  )
}

export default Demo;

With icon

leadingIcon prop 을 사용하면 앞쪽에 아이콘을 추가할 수 있습니다.

import {
  SegmentedControl,
  SegmentedControlItem,
  FlexBox,
} from '@montage-ui/core';
import { IconColumn, IconList } from '@montage-ui/icon';

const Demo = () => {
  return (
    <FlexBox flexDirection="column" gap="12px" sx={{ width: '40%', minWidth: 260 }}>
      <SegmentedControl size="small" defaultValue="0">
        <SegmentedControlItem value="0" leadingIcon={<IconColumn />}>
          Board
        </SegmentedControlItem>
        <SegmentedControlItem value="1" leadingIcon={<IconList />}>
          List
        </SegmentedControlItem>
      </SegmentedControl>

      <SegmentedControl size="medium" defaultValue="0">
        <SegmentedControlItem value="0" leadingIcon={<IconColumn />}>
          Board
        </SegmentedControlItem>
        <SegmentedControlItem value="1">
          List
        </SegmentedControlItem>
      </SegmentedControl>

      <SegmentedControl size="large" defaultValue="0">
        <SegmentedControlItem value="0" leadingIcon={<IconColumn />}>
          Board
        </SegmentedControlItem>
        <SegmentedControlItem value="1" leadingIcon={<IconList />}>
          List
        </SegmentedControlItem>
      </SegmentedControl>
    </FlexBox>
  )
}

export default Demo;

Icon only

iconOnly prop 을 사용하면 텍스트 대신 아이콘만 표시할 수 있습니다.

aria-label을 통해 적절한 라벨을 주입해야 합니다.

import {
  SegmentedControl,
  SegmentedControlItem,
  FlexBox,
} from '@montage-ui/core';
import { IconColumn, IconList } from '@montage-ui/icon';

const Demo = () => {
  return (
    <FlexBox flexDirection="column" gap="12px" alignItems="center">
      <SegmentedControl size="small" iconOnly defaultValue="0">
        <SegmentedControlItem value="0" aria-label="Apply filter to board">
          <IconColumn />
        </SegmentedControlItem>
        <SegmentedControlItem value="1" aria-label="Apply filter to list">
            <IconList />
        </SegmentedControlItem>
      </SegmentedControl>

      <SegmentedControl size="medium" iconOnly defaultValue="0">
        <SegmentedControlItem value="0" aria-label="Apply filter to board">
          <IconColumn />
        </SegmentedControlItem>
        <SegmentedControlItem value="1" aria-label="Apply filter to list">
            <IconList />
        </SegmentedControlItem>
      </SegmentedControl>

      <SegmentedControl size="large" iconOnly defaultValue="0">
        <SegmentedControlItem value="0" aria-label="Apply filter to board">
          <IconColumn />
        </SegmentedControlItem>
        <SegmentedControlItem value="1" aria-label="Apply filter to list">
          <IconList />
        </SegmentedControlItem>
      </SegmentedControl>
    </FlexBox>
  )
}

export default Demo;

API

SegmentedControl

Name	Types	defaultValue
`defaultValue`	`string`	`-`
`value`	`string`	`-`
`onValueChange`	`(tab: string) => void`	`-`
`size`	`"small" \| "medium" \| "large"`	`-`
`children`	`ReactNode`	`-`
`iconOnly`	`boolean`	`-`
`name`	`string`	`-`
`sx`	`SxProp`	`-`
`xl`	`Merge<Pick<SegmentedControlDefaultProps, "size">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`lg`	`Merge<Pick<SegmentedControlDefaultProps, "size">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`md`	`Merge<Pick<SegmentedControlDefaultProps, "size">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`sm`	`Merge<Pick<SegmentedControlDefaultProps, "size">, { sx?: CSSInterpolation; }> \| undefined`	`-`
`xs`	`Merge<Pick<SegmentedControlDefaultProps, "size">, { sx?: CSSInterpolation; }> \| undefined`	`-`

SegmentedControlItem

Name	Types	defaultValue
`as`	`ElementType`	`-`
`leadingIcon`	`ReactNode`	`-`
`disabled`	`boolean`	`-`
`value *`	`string`	`-`
`children`	`ReactNode`	`-`
`sx`	`SxProp`	`-`