CoreTabs

Usage

기본 사용법 (가로 방향)

import { useState } from 'react';
import { CoreTabs, CoreTabItem } from '@featuring-corp/components';

const [active, setActive] = useState(0);

<CoreTabs>
  <CoreTabItem active={active === 0} onClick={() => setActive(0)}>
    Tab1
  </CoreTabItem>
  <CoreTabItem active={active === 1} onClick={() => setActive(1)}>
    Tab2
  </CoreTabItem>
  <CoreTabItem active={active === 2} onClick={() => setActive(2)}>
    Tab3
  </CoreTabItem>
  <CoreTabItem active={active === 3} onClick={() => setActive(3)}>
    Tab4
  </CoreTabItem>
</CoreTabs>

세로 방향

import { useState } from 'react';
import { CoreTabs, CoreTabItem } from '@featuring-corp/components';

const [active, setActive] = useState(0);

<CoreTabs direction="vertical">
  <CoreTabItem active={active === 0} onClick={() => setActive(0)}>
    Tab1
  </CoreTabItem>
  <CoreTabItem active={active === 1} onClick={() => setActive(1)}>
    Tab2
  </CoreTabItem>
  <CoreTabItem active={active === 2} onClick={() => setActive(2)}>
    Tab3
  </CoreTabItem>
</CoreTabs>

Leading Element와 Trailing Element

import { useState } from 'react';
import { CoreTabs, CoreTabItem } from '@featuring-corp/components';
import { IconTuneOutline, IconCaretDownFilled } from '@featuring-corp/icons';

const [active, setActive] = useState(0);

<CoreTabs>
  <CoreTabItem 
    active={active === 0} 
    onClick={() => setActive(0)}
    leadingElement={<IconTuneOutline />}
    trailingElement={<IconCaretDownFilled />}
  >
    Tab1
  </CoreTabItem>
  <CoreTabItem 
    active={active === 1} 
    onClick={() => setActive(1)}
    leadingElement={<IconTuneOutline />}
  >
    Tab2
  </CoreTabItem>
</CoreTabs>

크기 설정

import { useState } from 'react';
import { CoreTabs, CoreTabItem } from '@featuring-corp/components';

const [active, setActive] = useState(0);

// Small
<CoreTabs>
  <CoreTabItem 
    size="sm"
    active={active === 0} 
    onClick={() => setActive(0)}
  >
    Tab1
  </CoreTabItem>
  <CoreTabItem 
    size="sm"
    active={active === 1} 
    onClick={() => setActive(1)}
  >
    Tab2
  </CoreTabItem>
</CoreTabs>

// Medium
<CoreTabs>
  <CoreTabItem 
    size="md"
    active={active === 0} 
    onClick={() => setActive(0)}
  >
    Tab1
  </CoreTabItem>
  <CoreTabItem 
    size="md"
    active={active === 1} 
    onClick={() => setActive(1)}
  >
    Tab2
  </CoreTabItem>
</CoreTabs>

비활성화된 탭

import { useState } from 'react';
import { CoreTabs, CoreTabItem } from '@featuring-corp/components';

const [active, setActive] = useState(0);

<CoreTabs>
  <CoreTabItem active={active === 0} onClick={() => setActive(0)}>
    Tab1
  </CoreTabItem>
  <CoreTabItem active={active === 1} onClick={() => setActive(1)}>
    Tab2
  </CoreTabItem>
  <CoreTabItem disabled>
    Tab3 (disabled)
  </CoreTabItem>
  <CoreTabItem active={active === 3} onClick={() => setActive(3)}>
    Tab4
  </CoreTabItem>
</CoreTabs>

Props

ComponentPropsWithoutRef<'div'> 타입을 확장한 컴포넌트입니다.

Prop

Type

CoreTabsDirection

Prop

Type

스타일

기본 스타일 속성

Tabs Container:

display: flex
gap: spacing-400 (16px)
flex-direction: row (horizontal) 또는 column (vertical)

Tab Item:

display: flex
transition: 0.2s
position: relative

Size Variants (Tab Item)

Size	Typography	Padding X	Padding Y	Gap
`sm`	`heading[1]`	`spacing-50` (2px)	`spacing-150` (6px)	`spacing-150` (6px)
`md`	`heading[2]`	`spacing-100` (4px)	`spacing-200` (8px)	`spacing-200` (8px)

States (상태별 토큰)

Tab Item:

Default: color: text-3
Hover: color: text-1, 하단에 2px 높이의 border[3] 색상 바 표시 (not active, not focus-visible)
Active (on): color: text-1, 하단에 2px 높이의 toggle-primary[1] 색상 바 표시 (not focus-visible)
Active (off): color: text-3
Active + Hover: 하단 바 색상이 toggle-primary[2]로 변경 (not focus-visible)
Focus-visible: border-radius: radius-100, box-shadow: inset 0 0 0 2px focus 색상
Disabled: color: text-4

On this page