Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Tabs

탭을 사용하여 여러 뷰를 전환할 수 있습니다. 방향키 탐색은 비활성 탭을 건너뜁니다.

import { Tabs } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

여러 뷰를 전환할 때.

사용예제

Home Content

Basic Usage

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

import React from 'react';
import { Tabs } from 'sud-ui';

const BasicTabs = () => {
  const options = [
    {
      key: "home",
      label: "Home",
      children: <div>Home Content</div>
    },
    {
      key: "components",
      label: "Components",
      children: <div>Components Content</div>
    },
    {
      key: "css",
      label: "CSS",
      children: <div>CSS Content</div>
    }
  ];
  return <Tabs options={options} />;
};

export default BasicTabs;

Home Content

Disabled

탭을 비활성화할 수 있습니다.

import React from 'react';
import { Tabs } from 'sud-ui';

const DisabledTabsExample = () => {
  const options = [
    {
      key: "home",
      label: "Home",
      children: <div>Home Content</div>
    },
    {
      key: "components",
      label: "Components",
      children: <div>Components Content</div>
    },
    {
      key: "css",
      label: "CSS",
      children: <div>CSS Content</div>
    }
  ];
  return <Tabs disabledKeys={["components"]} options={options} />;
};

export default DisabledTabsExample;

Size

탭의 크기를 설정할 수 있습니다.

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

const SizeTabs = () => {
  const [size, setSize] = useState('md');
  
  const sizeOptions = [
    { label: 'xs', value: 'xs' },
    { label: 'sm', value: 'sm' },
    { label: 'md', value: 'md' },
    { label: 'lg', value: 'lg' },
    { label: 'xl', value: 'xl' },
    { label: '2xl', value: '2xl' }
  ];

  const options = [
    {
      key: "home",
      label: "Home",
      children: <div>Home Content</div>
    },
    {
      key: "components",
      label: "Components",
      children: <div>Components Content</div>
    },
    {
      key: "css",
      label: "CSS",
      children: <div>CSS Content</div>
    }
  ];

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

export default SizeTabs;

Home Content

TabPane 사용

TabPane 컴포넌트를 사용한 방식입니다.

import React from 'react';
import { Tabs } from 'sud-ui';

const TabPaneExample = () => {
  return (
    <Tabs>
      <Tabs.TabPane label="Home">
        <div>Home Content</div>
      </Tabs.TabPane>
      <Tabs.TabPane label="Components">
        <div>Components Content</div>
      </Tabs.TabPane>
      <Tabs.TabPane label="CSS">
        <div>CSS Content</div>
      </Tabs.TabPane>
    </Tabs>
  );
};

export default TabPaneExample;

left

center

right

Home Content

Align

탭의 정렬 위치를 설정할 수 있습니다.

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

const AlignTabs = () => {
  const [align, setAlign] = useState('left');
  
  const alignOptions = [
    { label: 'left', value: 'left' },
    { label: 'center', value: 'center' },
    { label: 'right', value: 'right' }
  ];

  const options = [
    {
      key: "home",
      label: "Home",
      children: <div>Home Content</div>
    },
    {
      key: "components",
      label: "Components",
      children: <div>Components Content</div>
    },
    {
      key: "css",
      label: "CSS",
      children: <div>CSS Content</div>
    }
  ];

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

export default AlignTabs;

Home Content

Custom Color

탭의 색상을 커스텀할 수 있습니다.

import React from 'react';
import { Tabs } from 'sud-ui';

const CustomColorTabs = () => {
  const options = [
        {
      key: "home",
      label: "Home",
      children: <div>Home Content</div>
    },
    {
      key: "components",
      label: "Components",
      children: <div>Components Content</div>
    },
    {
      key: "css",
      label: "CSS",
      children: <div>CSS Content</div>
    }
  ];

  return (
    <Tabs 
      colorType={{ active: "primary", inactive: "info" }}
      options={options} 
    />
  );
};

export default CustomColorTabs;

사용 방법

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

value

현재 선택된 탭의 키 값 (제어 컴포넌트)

string | number

defaultValue

초기 선택된 탭의 키 값 (비제어 컴포넌트)

string | number

onChange

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

(key: string | number) => void

options

탭 옵션 배열 (선언적 방식 사용 시)

Array<{ key: string | number, label: string | ReactNode, children?: ReactNode }>

children

TabPane 컴포넌트들 (선언적 방식 대신 사용)

ReactNode

size

탭의 크기

｜

2xl

colorType

탭의 색상 타입

{ active?: "color-type", inactive?: "color-type" }

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

{ active: 'default', inactive: 'sub' }

background

탭의 배경색(palette값 또는 HEX code)

{ active?: string, inactive?: string }

color

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

{ active?: string, inactive?: string }

border

테두리 표시 여부

boolean

true

borderColor

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

{ active?: string, inactive?: string }

borderType

테두리 스타일

solid

dashed

dotted

double

groove

ridge

inset

outset

none

solid

borderWeight

테두리 두께

number

style

추가 스타일

CSSProperties

{}

className

추가 클래스명

string

disabledKeys

비활성화할 탭의 키 배열

Array<string | number>

[]

align

탭의 정렬 위치

left

center

right

left

Tabs.TabPane

label

탭의 레이블

string | ReactNode

children

탭의 내용

ReactNode

개인정보 처리방침

서비스 약관