Перейти к содержимому
Starlight

Вкладки

Для создания интерфейса с вкладками используйте компоненты <Tabs> и <TabItem>. Вкладки полезны для группировки эквивалентной информации, когда пользователю нужно увидеть только один из нескольких вариантов.

Превью
Сириус, Вега, Бетельгейзе

Импорт

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>
Превью
Сириус, Вега, Бетельгейзе

Синхронизация вкладок

Обеспечьте синхронизацию нескольких групп вкладок, добавив атрибут syncKey.

Все <Tabs> с одинаковым значением syncKey будут отображать одну и ту же активную метку. Это позволит вашему читателю выбрать один раз (например, операционную систему или менеджер пакетов), и видеть, что их выбор сохраняется при переходе по страницам.

Чтобы синхронизировать связанные вкладки, добавьте идентичное свойство syncKey к каждому компоненту <Tabs> и убедитесь, что все они используют одни и те же метки <TabItem>:

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


_Некоторые звёзды:_


<Tabs syncKey="constellations">
  <TabItem label="Орион">Беллатрикс, Ригель, Бетельгейзе</TabItem>
  <TabItem label="Близнецы">Поллукс, Кастор А, Кастор Б</TabItem>
</Tabs>


_Некоторые экзопланеты:_


<Tabs syncKey="constellations">
  <TabItem label="Орион">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>
  <TabItem label="Близнецы">Поллукс 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="Звёзды" icon="star">
    Сириус, Вега, Бетельгейзе
  </TabItem>
  <TabItem label="Луны" icon="moon">
    Ио, Европа, Ганимед
  </TabItem>
</Tabs>
Превью

Сириус, Вега, Бетельгейзе

Параметры <Tabs>

Реализация: Tabs.astro

Компонент <Tabs> объединяет несколько компонентов <TabItem> и принимает следующие параметры:

syncKey

тип: string

Ключ, используемый для синхронизации нескольких групп вкладок на нескольких страницах.

Параметры <TabItem>

Реализация: TabItem.astro

Набор вкладок состоит из элементов вкладок, каждый из которых имеет следующие параметры:

label

обязательный
тип: string

Элемент вкладки должен содержать атрибут label, содержащий текст, который будет отображаться на вкладке.

icon

тип: string

Каждый элемент вкладки может включать атрибут icon с именем одной из встроенных иконок Starlight, для отображения иконки рядом с меткой.