컨텐츠로 건너뛰기
Starlight

탭

탭 인터페이스를 만들려면 <Tabs> 및 <TabItem> 컴포넌트를 사용합니다. 탭은 사용자가 여러 옵션 중 하나만 확인해야 하는 경우 동등한 정보를 그룹화하는 데 유용합니다.

미리보기
시리우스, 베가, 베텔게우스

가져오기

import { Tabs, TabItem } from '@astrojs/starlight/components';

사용

탭 인터페이스는 <Tabs> 및 <TabItem> 컴포넌트를 사용하여 표시합니다. 각 <TabItem>에는 사용자에게 표시할 label이 있어야 합니다.

import { Tabs, TabItem } from '@astrojs/starlight/components';


<Tabs>
  <TabItem label="별">시리우스, 베가, 베텔게우스</TabItem>
  <TabItem label="달">이오, 유로파, 가니메데</TabItem>
</Tabs>
미리보기
시리우스, 베가, 베텔게우스

탭 동기화

syncKey 속성을 추가하여 여러 탭 그룹을 동기화된 상태로 유지합니다.

syncKey 값이 같은 페이지의 모든 <Tabs>는 동일한 활성 레이블을 표시합니다. 이렇게 하면 독자가 운영 체제나 패키지 관리자 등을 한 번 선택하면 페이지 탐색 간 선택한 내용이 유지되는 것을 확인할 수 있습니다.

관련 탭을 동기화하려면 각 <Tabs> 컴포넌트에 동일한 syncKey 속성을 추가하고 모두 동일한 <TabItem> 레이블을 사용하는지 확인하세요.

import { Tabs, TabItem } from '@astrojs/starlight/components';


_별:_


<Tabs syncKey="별자리">
  <TabItem label="오리온자리">벨라트릭스, 리겔, 베텔게우스</TabItem>
  <TabItem label="쌍둥이자리">폴룩스, 캐스터 A, 캐스터 B</TabItem>
</Tabs>{' '}


_외계 행성:_


<Tabs syncKey="별자리">
  <TabItem label="오리온자리">HD 34445 b, 글리제 179 b, Wasp-82 b</TabItem>
  <TabItem label="쌍둥이자리">폴룩스 b, HAT-P-24b, HD 50554 b</TabItem>
</Tabs>
미리보기

별:

벨라트릭스, 리겔, 베텔게우스

외계 행성:

HD 34445 b, 글리제 179 b, Wasp-82 b

탭에 아이콘 추가

Starlight의 내장 아이콘 중 하나의 이름으로 설정된 icon 속성을 사용하여 탭 항목에 아이콘을 포함하면 레이블 옆에 아이콘이 표시됩니다.

import { Tabs, TabItem } from '@astrojs/starlight/components';


<Tabs>
  <TabItem label="별" icon="star">
    시리우스, 베가, 베텔게우스
  </TabItem>
  <TabItem label="달" icon="moon">
    이오, 유로파, 가니메데
  </TabItem>
</Tabs>
미리보기

시리우스, 베가, 베텔게우스

<Tabs> 속성

구현: Tabs.astro

<Tabs> 컴포넌트는 여러 개의 <TabItem> 컴포넌트를 그룹화하고 다음과 같은 속성을 허용합니다:

syncKey

타입: string

여러 페이지에서 여러 탭 그룹을 동기화하는 데 사용되는 키입니다.

<TabItem> 속성

구현: TabItem.astro

탭 세트는 탭 항목으로 구성되며, 각 항목에는 다음과 같은 속성이 있습니다:

label

필수
타입: string

탭 항목에는 탭에 표시될 텍스트로 설정된 label 속성이 포함되어야 합니다.

icon

타입: string

각 탭 항목에는 Starlight의 내장 아이콘 중 하나의 이름으로 설정된 icon 속성을 포함하여 레이블 옆에 아이콘을 표시할 수 있습니다.