Component

Tabs

관련된 여러 패널을 탭으로 전환해 한 위치에 표시합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

기본 TabsList의 표현 방식

responsive를 켜면 모바일 표현을 조절할 수 있습니다.

tab 목록의 방향

TabsBar의 반응형 예제 사용

두 번째 tab을 disabled

Code

import { Tabs, TabsBar, TabsTrigger, TabsList, TabsContent } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Tabs flushTopOnMobile={false} defaultValue="overview" orientation={"horizontal"}>
      {(<TabsList variant={"segmented"} aria-label="프로젝트 보기">
          <TabsTrigger value="overview">개요</TabsTrigger>
          <TabsTrigger disabled={false} value="activity">
            활동
          </TabsTrigger>
          <TabsTrigger value="settings">설정</TabsTrigger>
        </TabsList>)}
      <TabsContent value="overview">프로젝트의 현재 상태입니다.</TabsContent>
      <TabsContent value="activity">최근 활동이 없습니다.</TabsContent>
      <TabsContent value="settings">알림과 권한을 관리합니다.</TabsContent>
    </Tabs>))
}

Props

import {
  Tabs,
  TabsBar,
  TabsList,
  TabsTrigger,
  TabsContent,
} from '@amineslab/ui'

`Tabs`

Name	Type	Default	Description
`value`	`string`	-	외부에서 제어하는 현재 tab 값입니다.
`defaultValue`	`string`	-	내부 상태로 관리할 때의 초기 tab 값입니다.
`onValueChange`	`(value: string) => void`	-	tab이 바뀔 때 호출합니다.
`flushTopOnMobile`	`boolean`	`false`	좁은 화면에서 상단 여백을 제거하는 확장 prop입니다.

`TabsBar`

Name	Type	Default	Description
`mobileVariant`	`'tabs' \| 'select'`	`'tabs'`	좁은 화면에서 탭 목록을 tabs 또는 Drawer select로 표시합니다.
`actions`	`ReactNode`	-	탭 옆이나 아래에 배치할 작업 영역입니다.
`aria-label`	`string`	-	tab 목록의 접근 가능한 이름입니다.
`aria-labelledby`	`string`	-	tab 목록의 이름을 제공하는 요소 id입니다.

`TabsList`

Name	Type	Default	Description
`variant`	`'segmented' \| 'underline' \| 'line' \| 'page'`	`'segmented'`	탭 목록의 스타일을 정합니다.

`TabsTrigger`

Name	Type	Default	Description
`value*`	`string`	-	tab 값입니다.

`TabsContent`

Name	Type	Default	Description
`value*`	`string`	-	연결할 tab 값입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Mobile select

PC에서는 탭 목록, 모바일에서는 선택 버튼과 하단 Drawer로 바뀝니다. 뷰포트 비교에서 두 동작을 함께 확인할 수 있습니다.

프로젝트의 현재 상태입니다.

import { Tabs, TabsBar, TabsTrigger, TabsContent } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Tabs defaultValue="overview">
          <TabsBar aria-label="프로젝트 보기" mobileVariant="select">
            <TabsTrigger value="overview">개요</TabsTrigger>
            <TabsTrigger value="activity">활동</TabsTrigger>
            <TabsTrigger value="settings">설정</TabsTrigger>
          </TabsBar>
          <TabsContent value="overview">프로젝트의 현재 상태입니다.</TabsContent>
          <TabsContent value="activity">최근 활동이 없습니다.</TabsContent>
          <TabsContent value="settings">알림과 권한을 관리합니다.</TabsContent>
        </Tabs>))
}

Vertical

워크스페이스 이름과 URL

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Tabs defaultValue="general" orientation="vertical">
          <TabsList aria-label="설정">
            <TabsTrigger value="general">일반</TabsTrigger>
            <TabsTrigger value="members">멤버</TabsTrigger>
          </TabsList>
          <TabsContent value="general">워크스페이스 이름과 URL</TabsContent>
          <TabsContent value="members">초대와 권한</TabsContent>
        </Tabs>))
}

사용 기준

권장하는 사용

탭 제목이 짧고 패널의 중요도가 대등할 때 사용합니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Arrow keys: 인접 tab 이동
Home 또는 End: 첫 또는 마지막 tab 이동