跳转到内容
Starlight

选项卡

要创建选项卡式界面，请使用 <Tabs> 和 <TabItem> 组件。 选项卡对于给等效信息进行分组非常有用，用户只需查看多个选项之一即可。

Preview
天狼星，织女星，参宿四

导入

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>
Preview
天狼星，织女星，参宿四

同步选项卡

通过添加 syncKey 属性来保持多个选项卡组之间的同步。

页面上具有相同 syncKey 值的所有 <Tabs> 将显示相同的活动标签。 这允许你的读者只需选择一次（例如选择他们的操作系统或包管理器），就可以看到他们的选择在页面导航中保持一致。

要同步相关选项卡，请向每个 <Tabs> 组件添加相同的 syncKey 属性，并确保它们都使用相同的 <TabItem> labels 属性：

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

一些恒星：

参宿五，参宿七，参宿四

一些系外行星：

HD 34445 b，格利泽 179b，Wasp-82 b

为选项卡添加图标

在选项卡组件中，添加 icon 属性并将其设置为 Starlight 内置图标之一 来为选项卡添加图标。

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


<Tabs>
  <TabItem label="恒星" icon="star">
    天狼星，织女星，参宿四
  </TabItem>
  <TabItem label="卫星" icon="moon">
    木卫一，木卫二，木卫三
  </TabItem>
</Tabs>
Preview

天狼星，织女星，参宿四

<Tabs> 的属性

实现： Tabs.astro

<Tabs> 组件将多个 <TabItem> 组件组合在一起并接受以下属性：

syncKey

类型： string

一个用于使多个选项卡组在多个页面之间保持同步的键。

<TabItem> 的属性

实现： TabItem.astro

一组选项卡（tabs）由选项卡项（tab items）组成，每个选项卡项都具有以下属性：

label

必要属性
类型： string

选项卡项必须包含一个 label 属性，该属性决定了将在选项卡项中显示的文本。

icon

类型： string

每个选项卡项都可以包含一个 icon 属性，该属性设置为 Starlight 的内置图标之一 的名称，以在标签旁边显示图标。