diff --git a/docs/src/content/docs/ko/components/tabs.mdx b/docs/src/content/docs/ko/components/tabs.mdx new file mode 100644 index 00000000000..da4fed66ead --- /dev/null +++ b/docs/src/content/docs/ko/components/tabs.mdx @@ -0,0 +1,221 @@ +--- +title: 탭 +description: Starlight에서 탭 인터페이스를 만들어 동등한 정보를 그룹화하는 방법을 알아보세요. +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +탭 인터페이스를 만들려면 `` 및 `` 컴포넌트를 사용합니다. +탭은 사용자가 여러 옵션 중 하나만 확인해야 하는 경우 동등한 정보를 그룹화하는 데 유용합니다. + +import Preview from '~/components/component-preview.astro'; + + + + + 시리우스, 베가, 베텔게우스 + 이오, 유로파, 가니메데 + + + + +## 가져오기 + +```tsx +import { Tabs, TabItem } from '@astrojs/starlight/components'; +``` + +## 사용 + +탭 인터페이스는 `` 및 `` 컴포넌트를 사용하여 표시합니다. +각 ``에는 사용자에게 표시할 [`label`](#label)이 있어야 합니다. + + + +```mdx +import { Tabs, TabItem } from '@astrojs/starlight/components'; + + + 시리우스, 베가, 베텔게우스 + 이오, 유로파, 가니메데 + +``` + + + +```markdoc +{% tabs %} +{% tabitem label="별" %} +시리우스, 베가, 베텔게우스 +{% /tabitem %} + +{% tabitem label="달" %} +이오, 유로파, 가니메데 +{% /tabitem %} +{% /tabs %} +``` + + + + + 시리우스, 베가, 베텔게우스 + 이오, 유로파, 가니메데 + + + + +### 탭 동기화 + +[`syncKey`](#synckey) 속성을 추가하여 여러 탭 그룹을 동기화된 상태로 유지합니다. + +`syncKey` 값이 같은 페이지의 모든 ``는 동일한 활성 레이블을 표시합니다. +이렇게 하면 독자가 운영 체제나 패키지 관리자 등을 한 번 선택하면 페이지 탐색 간 선택한 내용이 유지되는 것을 확인할 수 있습니다. + +관련 탭을 동기화하려면 각 `` 컴포넌트에 동일한 `syncKey` 속성을 추가하고 모두 동일한 `` 레이블을 사용하는지 확인하세요. + + + +```mdx 'syncKey="별자리"' +import { Tabs, TabItem } from '@astrojs/starlight/components'; + +_별:_ + + + 벨라트릭스, 리겔, 베텔게우스 + 폴룩스, 캐스터 A, 캐스터 B + + +_외계 행성:_ + + + HD 34445 b, 글리제 179 b, Wasp-82 b + 폴룩스 b, HAT-P-24b, HD 50554 b + +``` + + + +```markdoc 'syncKey="별자리"' +_별:_ + +{% 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 %} +``` + + + + + +_별:_ + + + 벨라트릭스, 리겔, 베텔게우스 + 폴룩스, 캐스터 A, 캐스터 B + + +_외계 행성:_ + + + HD 34445 b, 글리제 179 b, Wasp-82 b + 폴룩스 b, HAT-P-24b, HD 50554 b + + + + + + +### 탭에 아이콘 추가 + +[Starlight의 내장 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 [`icon`](#icon) 속성을 사용하여 탭 항목에 아이콘을 포함하면 레이블 옆에 아이콘이 표시됩니다. + + + +```mdx /icon="\w+"/ +import { Tabs, TabItem } from '@astrojs/starlight/components'; + + + + 시리우스, 베가, 베텔게우스 + + + 이오, 유로파, 가니메데 + + +``` + + + +```markdoc /icon="\w+"/ +{% tabs %} +{% tabitem label="별" icon="star" %} +시리우스, 베가, 베텔게우스 +{% /tabitem %} + +{% tabitem label="달" icon="moon" %} +이오, 유로파, 가니메데 +{% /tabitem %} +{% /tabs %} +``` + + + + + + 시리우스, 베가, 베텔게우스 + + + 이오, 유로파, 가니메데 + + + + + +## `` 속성 + +**구현:** [`Tabs.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Tabs.astro) + +`` 컴포넌트는 여러 개의 `` 컴포넌트를 그룹화하고 다음과 같은 속성을 허용합니다: + +### `syncKey` + +**타입:** `string` + +여러 페이지에서 여러 탭 그룹을 동기화하는 데 사용되는 키입니다. + +## `` 속성 + +**구현:** [`TabItem.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/TabItem.astro) + +탭 세트는 탭 항목으로 구성되며, 각 항목에는 다음과 같은 속성이 있습니다: + +### `label` + +**필수** +**타입:** `string` + +탭 항목에는 탭에 표시될 텍스트로 설정된 `label` 속성이 포함되어야 합니다. + +### `icon` + +**타입:** `string` + +각 탭 항목에는 [Starlight의 내장 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 `icon` 속성을 포함하여 레이블 옆에 아이콘을 표시할 수 있습니다. \ No newline at end of file