CoreTabItem

Usage

기본 사용법

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

<CoreTabs>
  <CoreTabItem active>Tab</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 active={active === 2} onClick={() => setActive(2)}>
    Tab3
  </CoreTabItem>
  <CoreTabItem active={active === 3} onClick={() => setActive(3)}>
    Tab4
  </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 
    size="md"
    active={active === 0} 
    onClick={() => setActive(0)}
    leadingElement={<IconTuneOutline />}
    trailingElement={<IconCaretDownFilled />}
  >
    Tab1
  </CoreTabItem>
  <CoreTabItem 
    size="md"
    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<'button'> 타입을 확장한 컴포넌트입니다.

Prop

Type

CoreTabItemSize

Prop

Type

스타일

기본 스타일 속성

Tab Item:

display: flex
transition: 0.2s
position: relative
color: text-3 (기본), text-1 (hover/active), text-4 (disabled)

Size Variants

sm: typography: heading[1], gap: spacing-150 (6px), padding-x: spacing-50 (2px), padding-y: spacing-150 (6px)
md: typography: heading[2], gap: spacing-200 (8px), padding-x: spacing-100 (4px), padding-y: spacing-200 (8px)

Active State

Active (on): color: text-1, 하단에 2px 높이의 toggle-primary[1] 색상 바 표시
Active (off): color: text-3
Active
: 하단 바 색상이 toggle-primary[2]로 변경

Hover State

Hover (not active, not focus-visible): 하단에 2px 높이의 border[3] 색상 밑줄

Focus State

Focus-visible: border-radius: radius-100, box-shadow: inset 0 0 0 2px focus 색상

On this page