i18n(zh-cn): add tabs.mdx & update astro.config.mjs (#2456)

Co-authored-by: HiDeoo <[email protected]>
withastro · Oct 9, 2024 · e71ffe4 · e71ffe4
1 parent c4db9b4
commit e71ffe4
Show file tree

Hide file tree

Showing 2 changed files with 222 additions and 0 deletions.
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -139,6 +139,7 @@ export default defineConfig({
 						ru: 'Компоненты',
 						ko: '컴포넌트',
 						ja: 'コンポーネント',
+						'zh-CN': '组件',
 					},
 					autogenerate: { directory: 'components' },
 				},

diff --git a/docs/src/content/docs/zh-cn/components/tabs.mdx b/docs/src/content/docs/zh-cn/components/tabs.mdx
@@ -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>` labels 属性：
+
+<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，格利泽 179b，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，格利泽 179b，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，格利泽 179b，Wasp-82 b</TabItem>
+	<TabItem label="双子座">北河三 b，HAT-P-24b，HD 50554 b</TabItem>
+</Tabs>
+
+</Fragment>
+
+</Preview>
+
+### 为选项卡添加图标
+
+在选项卡组件中，添加 [`icon`](#icon) 属性并将其设置为 [Starlight 内置图标之一](/zh-cn/reference/icons/#所有图标) 来为选项卡添加图标。
+
+<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)
+
+一组选项卡（tabs）由选项卡项（tab items）组成，每个选项卡项都具有以下属性：
+
+### `label`
+
+**必要属性**  
+**类型：** `string`
+
+选项卡项必须包含一个 `label` 属性，该属性决定了将在选项卡项中显示的文本。
+
+### `icon`
+
+**类型：** `string`
+
+每个选项卡项都可以包含一个 `icon` 属性，该属性设置为 [Starlight 的内置图标之一](/zh-cn/reference/icons/#所有图标) 的名称，以在标签旁边显示图标。