Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(ko-KR): create tabs.mdx #2361

Merged
merged 3 commits into from
Sep 19, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 221 additions & 0 deletions docs/src/content/docs/ko/components/tabs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
---
title: 탭
description: Starlight에서 탭 인터페이스를 만들어 동등한 정보를 그룹화하는 방법을 알아보세요.
---

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

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

import Preview from '~/components/component-preview.astro';

<Preview>

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

</Preview>

## 가져오기

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

## 사용

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

<Preview>

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

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

<Fragment slot="markdoc">

```markdoc
{% tabs %}
{% tabitem label="별" %}
시리우스, 베가, 베텔게우스
{% /tabitem %}

{% tabitem label="달" %}
이오, 유로파, 가니메데
{% /tabitem %}
{% /tabs %}
```

</Fragment>

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

</Preview>

### 탭 동기화

[`syncKey`](#synckey) 속성을 추가하여 여러 탭 그룹을 동기화된 상태로 유지합니다.

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

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

<Preview>

```mdx 'syncKey="별자리"'
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>
```

<Fragment slot="markdoc">

```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 %}
```

</Fragment>

<Fragment slot="preview">

_별:_

<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>

</Fragment>

</Preview>

### 탭에 아이콘 추가

[Starlight의 내장 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)의 이름으로 설정된 [`icon`](#icon) 속성을 사용하여 탭 항목에 아이콘을 포함하면 레이블 옆에 아이콘이 표시됩니다.

<Preview>

```mdx /icon="\w+"/
import { Tabs, TabItem } from '@astrojs/starlight/components';

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

<Fragment slot="markdoc">

```markdoc /icon="\w+"/
{% tabs %}
{% tabitem label="별" icon="star" %}
시리우스, 베가, 베텔게우스
{% /tabitem %}

{% tabitem label="달" icon="moon" %}
이오, 유로파, 가니메데
{% /tabitem %}
{% /tabs %}
```

</Fragment>

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

</Preview>

## `<Tabs>` 속성

**구현:** [`Tabs.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Tabs.astro)

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

### `syncKey`

**타입:** `string`

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

## `<TabItem>` 속성

**구현:** [`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` 속성을 포함하여 레이블 옆에 아이콘을 표시할 수 있습니다.
Loading