Вкладки

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

Превью

Звёзды

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

Луны

Ио, Европа, Ганимед

Импорт

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

Использование

Создавайте интерфейс с вкладками с помощью компонентов <Tabs> и <TabItem>. Каждый компонент <TabItem> должен иметь атрибут label для отображения пользователям.

MDX

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

<Tabs>
  <TabItem label="Звёзды">Сириус, Вега, Бетельгейзе</TabItem>
  <TabItem label="Луны">Ио, Европа, Ганимед</TabItem>
</Tabs>

Markdoc

{% tabs %}
{% tabitem label="Звёзды" %}
Сириус, Вега, Бетельгейзе
{% /tabitem %}

{% tabitem label="Луны" %}
Ио, Европа, Ганимед
{% /tabitem %}
{% /tabs %}

Превью

Звёзды

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

Луны

Ио, Европа, Ганимед

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

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

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

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

MDX

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>

Markdoc

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

{% tabs syncKey="constellations" %}
{% tabitem label="Orion" %}
Беллатрикс, Ригель, Бетельгейзе
{% /tabitem %}

{% tabitem label="Gemini" %}
Pollux, Castor A, Castor B
{% /tabitem %}
{% /tabs %}

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

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

Близнецы

Поллукс b, HAT-P-24b, HD 50554 b

Добавление иконок

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

MDX

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

<Tabs>
  <TabItem label="Звёзды" icon="star">
    Сириус, Вега, Бетельгейзе
  </TabItem>
  <TabItem label="Луны" icon="moon">
    Ио, Европа, Ганимед
  </TabItem>
</Tabs>

Markdoc

{% 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, для отображения иконки рядом с меткой.