跳转到内容
Starlight

标签页

要创建一个标签页界面，请使用 <Tabs> 和 <TabItem> 组件。当用户一次只需要查看多个选项中的一个时，标签页对于将等效信息分组非常有用。

预览
天狼星、织女星、参宿四

导入

标题为“导入”的部分
import { Tabs, TabItem } from '@astrojs/starlight/components';

用法

标题为“用法”的部分

使用 <Tabs> 和 <TabItem> 组件来显示一个标签页界面。每个 <TabItem> 都必须有一个 label 属性，用于向用户显示。

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


<Tabs>
  <TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
  <TabItem label="Moons">Io, Europa, Ganymede</TabItem>
</Tabs>
预览
天狼星、织女星、参宿四

同步标签页

标题为“同步标签页”的部分

通过添加 syncKey 属性来保持多个标签页组同步。

页面上所有具有相同 syncKey 值的 <Tabs> 将显示相同的活动标签。这允许你的读者选择一次（例如，他们的操作系统或包管理器），并且这个选择会在页面导航时保持。

要同步相关的标签页，请为每个 <Tabs> 组件添加一个相同的 syncKey 属性，并确保它们都使用相同的 <TabItem> 标签文本

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


_Some stars:_


<Tabs syncKey="constellations">
  <TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem>
  <TabItem label="Gemini">Pollux, Castor A, Castor B</TabItem>
</Tabs>


_Some exoplanets:_


<Tabs syncKey="constellations">
  <TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
  <TabItem label="Gemini">Pollux b, HAT-P-24b, HD 50554 b</TabItem>
</Tabs>
预览

一些恒星

参宿五、参宿七、参宿四

一些系外行星

HD 34445 b, Gliese 179 b, Wasp-82 b

为标签页添加图标

标题为“为标签页添加图标”的部分

在标签项中使用 icon 属性并将其设置为 Starlight 的内置图标之一的名称，即可在标签文本旁显示一个图标。

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


<Tabs>
  <TabItem label="Stars" icon="star">
    Sirius, Vega, Betelgeuse
  </TabItem>
  <TabItem label="Moons" icon="moon">
    Io, Europa, Ganymede
  </TabItem>
</Tabs>
预览

天狼星、织女星、参宿四

<Tabs> 属性

标题为“<Tabs> 属性”的部分

实现： Tabs.astro

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

syncKey

标题为“syncKey”的部分

类型： string

一个用于在多个页面之间保持多个标签页组同步的键。

<TabItem> 属性

标题为“<TabItem> 属性”的部分

实现： TabItem.astro

一组标签页由多个标签项组成，每个标签项都有以下属性

label

标题为“label”的部分

必需
类型： string

标签项必须包含一个 label 属性，其值是将在标签中显示的文本。

icon

标题为“icon”的部分

类型： string

每个标签项都可以包含一个 icon 属性，将其设置为 Starlight 的内置图标之一 的名称，即可在标签文本旁显示一个图标。