Segmented Control

탭 컴포넌트는 여러 콘텐츠를 탭으로 구분하여 표시합니다.

기본 사용법

'use client';

import {
  SegmentedControl,
  SegmentedControlList,
  SegmentedControlTrigger,
  SegmentedControlContent,
} from '@aift/ui/SegmentedControl';

export default function Preview() {
  return (
    <div className="max-w-md">
      <SegmentedControl defaultValue="tab1">
        <SegmentedControlList>
          <SegmentedControlTrigger value="tab1">tab1</SegmentedControlTrigger>
          <SegmentedControlTrigger value="tab2">tab2</SegmentedControlTrigger>
          <SegmentedControlTrigger value="tab3">tab3</SegmentedControlTrigger>
        </SegmentedControlList>
      </SegmentedControl>
    </div>
  );
}

'use client';import {  SegmentedControl,  SegmentedControlList,  SegmentedControlTrigger,  SegmentedControlContent,} from '@aift/ui/SegmentedControl';export default function Preview() {  return (    <div className="max-w-md">      <SegmentedControl defaultValue="tab1">        <SegmentedControlList>          <SegmentedControlTrigger value="tab1">tab1</SegmentedControlTrigger>          <SegmentedControlTrigger value="tab2">tab2</SegmentedControlTrigger>          <SegmentedControlTrigger value="tab3">tab3</SegmentedControlTrigger>        </SegmentedControlList>      </SegmentedControl>    </div>  );}

Icon Segmented Control

'use client';
import { Icon, COMMON_ICON_NAMES, iconsMap } from '@aift/ui/ragllm-icons';

import {
  SegmentedControl,
  SegmentedControlList,
  SegmentedControlTrigger,
} from '@aift/ui/SegmentedControl';

export default function IconSegmentedControl() {
  return (
    <div>
      <SegmentedControl defaultValue="like">
        <SegmentedControlList>
          <SegmentedControlTrigger value="like">
            <Icon
              name={COMMON_ICON_NAMES.THUMB_UP}
              iconsMap={iconsMap}
              size={24}
              className="size-6 text-black-normal"
            />
          </SegmentedControlTrigger>
          <SegmentedControlTrigger value="dislike">
            <Icon
              name={COMMON_ICON_NAMES.THUMB_DOWN}
              iconsMap={iconsMap}
              size={24}
              className="size-6 text-black-normal"
            />
          </SegmentedControlTrigger>
        </SegmentedControlList>
      </SegmentedControl>
    </div>
  );
}

'use client';import { Icon, COMMON_ICON_NAMES, iconsMap } from '@aift/ui/ragllm-icons';import {  SegmentedControl,  SegmentedControlList,  SegmentedControlTrigger,} from '@aift/ui/SegmentedControl';export default function IconSegmentedControl() {  return (    <div>      <SegmentedControl defaultValue="like">        <SegmentedControlList>          <SegmentedControlTrigger value="like">            <Icon              name={COMMON_ICON_NAMES.THUMB_UP}              iconsMap={iconsMap}              size={24}              className="size-6 text-black-normal"            />          </SegmentedControlTrigger>          <SegmentedControlTrigger value="dislike">            <Icon              name={COMMON_ICON_NAMES.THUMB_DOWN}              iconsMap={iconsMap}              size={24}              className="size-6 text-black-normal"            />          </SegmentedControlTrigger>        </SegmentedControlList>      </SegmentedControl>    </div>  );}

Props

SegmentedControl 컴포넌트는 Radix UI의 Tabs를 기반으로 하며, 여러 하위 컴포넌트로 구성됩니다.

SegmentedControl: 루트 컴포넌트
SegmentedControlList: 탭 리스트
SegmentedControlTrigger: 탭 트리거
SegmentedControlContent: 탭 콘텐츠

Segmented Control

Segmented Control

기본 사용법

Icon Segmented Control

Props

On this page