Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Segmented

여러 옵션을 표시하고 사용자가 단일 옵션을 선택할 수 있는 컴포넌트입니다.

import { Segmented } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

여러 옵션을 표시하고 사용자가 단일 옵션을 선택할 때.

옵션을 선택하여 조건을 충족하는 데이터를 필터링할 때.

사용예제

Basic Usage

기본적인 사용 방법입니다.

import React, { useState } from 'react';
import { Segmented } from 'sud-ui';

const BasicSegmented = () => {
  const [selected, setSelected] = useState('home');
  
  const options = [
    { value: 'home', label: 'Home' },
    { value: 'components', label: 'Components' },
    { value: 'css', label: 'CSS' },
    { value: 'icons', label: 'Icons' }
  ];

  return (
    <Segmented 
      options={options}
      value={selected}
      onChange={setSelected}
    />
  );
};

export default BasicSegmented;

rounded

square

capsule

Shape

세그먼트의 모양을 설정할 수 있습니다.

import React, { useState } from 'react';
import { Segmented, Radio, Card } from 'sud-ui';

const ShapeSegmented = () => {
  const [shape, setShape] = useState('rounded');
  const [selected, setSelected] = useState('home');
  
  const shapeOptions = [
    { value: 'rounded', label: 'rounded' },
    { value: 'square', label: 'square' },
    { value: 'capsule', label: 'capsule' }
  ];

  const options = [
    { value: 'home', label: 'Home' },
    { value: 'components', label: 'Components' },
    { value: 'css', label: 'CSS' },
    { value: 'icons', label: 'Icons' }
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center">
          <Radio.Group
            direction="horizontal"
            options={shapeOptions}
            value={shape}
            onChange={setShape}
          />
        </div>
      </Card>
      <Segmented
        options={options}
        value={selected}
        onChange={setSelected}
        shape={shape}
      />
    </div>
  );
};

export default ShapeSegmented;

Color Customization

세그먼트의 색상을 커스텀할 수 있습니다.

import React, { useState } from 'react';
import { Segmented } from 'sud-ui';

const ColorSegmented = () => {
  const [selected, setSelected] = useState('home');
  
  const options = [
    { value: 'home', label: 'Home' },
    { value: 'components', label: 'Components' },
    { value: 'css', label: 'CSS' },
    { value: 'icons', label: 'Icons' }
  ];

  return (
    <Segmented
      options={options}
      value={selected}
      onChange={setSelected}
      colorType="primary"
    />
  );
};

export default ColorSegmented;

Size

세그먼트의 크기를 설정할 수 있습니다.

import React, { useState } from 'react';
import { Segmented, Radio, Card } from 'sud-ui';

const SizeSegmented = () => {
  const [size, setSize] = useState('md');
  const [selected, setSelected] = useState('home');
  
  const sizeOptions = [
    { value: 'sm', label: 'sm' },
    { value: 'md', label: 'md' },
    { value: 'lg', label: 'lg' }
  ];

  const options = [
    { value: 'home', label: 'Home' },
    { value: 'components', label: 'Components' },
    { value: 'css', label: 'CSS' },
    { value: 'icons', label: 'Icons' }
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center">
          <Radio.Group
            direction="horizontal"
            options={sizeOptions}
            value={size}
            onChange={setSize}
          />
        </div>
      </Card>
      <Segmented
        options={options}
        value={selected}
        onChange={setSelected}
        size={size}
      />
    </div>
  );
};

export default SizeSegmented;

All disabled

Partially disabled

Disabled

세그먼트를 비활성화할 수 있습니다.

import React, { useState } from 'react';
import { Segmented, Typography } from 'sud-ui';

const DisabledSegmented = () => {
  const [selected, setSelected] = useState('home');
  
  const options = [
    { value: 'home', label: 'Home' },
    { value: 'components', label: 'Components' },
    { value: 'css', label: 'CSS' },
    { value: 'icons', label: 'Icons' }
  ];

  const disabledOptions = [
    { value: 'home', label: 'Home' },
    { value: 'components', label: 'Components', disabled: true },
    { value: 'css', label: 'CSS' },
    { value: 'icons', label: 'Icons' }
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <div className="flex flex-col gap-[10px]">
        <Typography pretendard="SB">All disabled</Typography>
        <Segmented
          options={options}
          value={selected}
          onChange={setSelected}
          disabled
        />
      </div>
      <div className="flex flex-col gap-[10px]">
        <Typography pretendard="SB">Partially disabled</Typography>
        <Segmented
          options={disabledOptions}
          value={selected}
          onChange={setSelected}
        />
      </div>
    </div>
  );
};

export default DisabledSegmented;

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

options *

선택 옵션 배열

Array<{ value: string | number, label: string, disabled?: boolean }>

[]

value

현재 선택된 값

string | number

onChange

값 변경 시 호출되는 콜백 함수

(value: string | number) => void

disabled

비활성화 여부

boolean

false

size

크기

block

전체 너비 사용 여부

boolean

false

colorType

색상 타입

default

primary

success

warning

danger

info

red

rose

coral

orange

volcano

apricot

yellow

gold

amber

green

lime

mint

blue

sky

cerulean

indigo

cobalt

navy

purple

plum

orchid

forest

sage

warm-gray

cool-gray

neutral

text

ghost

default

shape

모양

square

circle

rounded

capsule

rounded

background

배경색(palette값 또는 HEX code)

string

color

텍스트 색상(palette값 또는 HEX code)

string

border

테두리 표시 여부

boolean

false

borderColor

테두리 색상(palette값 또는 HEX code)

string

borderType

테두리 스타일

solid

dashed

dotted

double

groove

ridge

inset

outset

none

solid

borderWeight

테두리 두께

number

shadow

그림자 효과

none

style

추가 스타일

CSSProperties

{}

className

추가 클래스명

string

name

접근성 이름

string

segmented-control

개인정보 처리방침

서비스 약관