Component

Segment

같은 맥락 안에서 하나의 선택지만 고르는 토글 그룹입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { Segment } from '@amineslab/ui'

function SegmentExample({ value = 'all', size = 'md', disabled = false, equalWidth = false, }: {
    value?: string;
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    disabled?: boolean;
    equalWidth?: boolean;
} = {}) {
    return (<Segment defaultValue={value} size={size} disabled={disabled}>
      <Segment.List>
        <Segment.Item equalWidth={equalWidth} value="all">
          전체
        </Segment.Item>
        <Segment.Item equalWidth={equalWidth} value="mine">
          내 작업
        </Segment.Item>
        <Segment.Item equalWidth={equalWidth} value="done">
          완료
        </Segment.Item>
      </Segment.List>
    </Segment>);
}

export default function ExamplePreview() {
  return ((<SegmentExample key={"all"} {...({"value":"all","size":"md","disabled":false,"equalWidth":false} as const)} size={"md"}/>))
}

Props

import {
  Segment,
  SegmentList,
  SegmentItem,
  segmentItemVariants,
  segmentListVariants,
} from '@amineslab/ui'

`Segment`

선택값과 공통 크기를 관리하는 root입니다.

Name	Type	Default	Description
`value`	`string`	-	controlled 활성값입니다.
`defaultValue`	`string`	-	uncontrolled 초기 활성값입니다.
`onValueChange`	`(value: string) => void`	-	선택값이 바뀔 때 호출합니다.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	트랙과 항목의 크기를 정합니다.
`disabled`	`boolean`	`false`	모든 항목을 비활성화합니다.

`Segment.Item`

선택 가능한 radio 역할의 버튼입니다.

Name	Type	Default	Description
`value*`	`string`	-	항목의 고유 선택값입니다.
`equalWidth`	`boolean`	`false`	목록 안에서 동일한 너비를 사용합니다.
`startIcon`	`ReactNode`	-	라벨 앞에 표시할 아이콘입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

사용 기준

권장하는 사용

콘텐츠 패널을 전환하는 Tabs와 달리 Segment는 선택값만 관리합니다.
Segment.List가 radiogroup과 roving tabindex를 소유하고, 비활성 항목은 방향키 이동에서 건너뜁니다.
여러 옵션이 짧은 화면을 넘으면 사용처에서 가로 스크롤을 격리하세요.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Arrow Left / Right, Arrow Up / Down: 비활성 항목을 건너뛰며 이전·다음 항목으로 이동하고 선택합니다.
Home / End: 첫 항목·마지막 항목으로 이동합니다.