Segmented Control

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

HotNew

import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

export default function SegmentedControlPreview() {
  return (
    <SegmentedControl defaultValue="Hot" aria-label="Sort by">
      <SegmentedControlItem value="Hot">Hot</SegmentedControlItem>
      <SegmentedControlItem value="New">New</SegmentedControlItem>
    </SegmentedControl>
  );
}

Installation

npx @seed-design/cli@latest add segmented-control

pnpm dlx @seed-design/cli@latest add segmented-control

yarn dlx @seed-design/cli@latest add segmented-control

bun x @seed-design/cli@latest add segmented-control

Props

`SegmentedControl`

value와 defaultValue 중 적어도 하나를 제공해야 해요.

Prop	Type	Default
`asChild?`	`boolean`	`false`
`onValueChange?`	`((value: string) => void)`	-
`defaultValue?`	`string`	-
`value?`	`string`	-
`form?`	`string`	-
`name?`	`string`	-
`disabled?`	`boolean`	-

`SegmentedControlItem`

Prop	Type	Default
`asChild?`	`boolean`	`false`
`invalid?`	`boolean`	-
`disabled?`	`boolean`	-
`value?`	`string`	-
`children?`	`string`	-
`rootRef?`	`Ref<HTMLLabelElement>`	-
`inputProps?`	`InputHTMLAttributes<HTMLInputElement>`	-

Examples

Disabled

HotNew

import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

export default function SegmentedControlPreview() {
  return (
    <SegmentedControl defaultValue="Hot" disabled aria-label="Sort by">
      <SegmentedControlItem value="Hot">Hot</SegmentedControlItem>
      <SegmentedControlItem value="New">New</SegmentedControlItem>
    </SegmentedControl>
  );
}

Long Label

Pill 형태의 SegmentedControlItem 한 개는 86px의 최소 너비를 가져요. 제공한 옵션 중 이 너비를 초과하는 옵션이 있다면, 가장 긴 옵션의 너비에 모든 옵션의 너비가 맞춰져요.

가격 높은 순할인율 높은 순인기 많은 순

import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

export default function SegmentedControlLongLabel() {
  return (
    <SegmentedControl defaultValue="price" aria-label="정렬 기준">
      <SegmentedControlItem value="price">가격 높은 순</SegmentedControlItem>
      <SegmentedControlItem value="discount">할인율 높은 순</SegmentedControlItem>
      <SegmentedControlItem value="popularity">인기 많은 순</SegmentedControlItem>
    </SegmentedControl>
  );
}

Fixed Width

SegmentedControl의 style prop에 width를 제공해서 직접 너비를 설정할 수 있어요.

지정한 너비가 무시되는 경우

직접 설정한 너비 안에서 모든 레이블을 overflow 없이 표시할 수 없는 경우, 직접 지정한 너비 대신 overflow 없이 표시할 수 있는 최소 너비로 자동 조정돼요.

NewHot

import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

export default function SegmentedControlFixedWidth() {
  return (
    <SegmentedControl defaultValue="new" style={{ width: "600px" }} aria-label="Sort by">
      <SegmentedControlItem value="new">New</SegmentedControlItem>
      <SegmentedControlItem value="hot">Hot</SegmentedControlItem>
    </SegmentedControl>
  );
}

Long Label & Fixed Width

가격 높은 순할인율 높은 순인기 많은 순

import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

export default function SegmentedControlLongLabelFixedWidth() {
  return (
    <SegmentedControl defaultValue="price" style={{ width: "600px" }} aria-label="정렬 기준">
      <SegmentedControlItem value="price">가격 높은 순</SegmentedControlItem>
      <SegmentedControlItem value="discount">할인율 높은 순</SegmentedControlItem>
      <SegmentedControlItem value="popularity">인기 많은 순</SegmentedControlItem>
    </SegmentedControl>
  );
}

Last updated on

Reaction Button

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

Skeleton

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

Segmented Control

Manual Installation

On this page