Вкладки

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

Обложка вкладок

Ресурсы

Тип Связь Положение дел
Дизайн Исходный код дизайна (Фигма) Доступный
Выполнение Реактивный ранец Доступный

Основные моменты

  • Вкладки могут прокручиваться горизонтально. Пользовательский интерфейс может иметь столько вкладок, сколько необходимо.
  • Вкладки организуют контент по категориям, чтобы помочь пользователям быстро находить различные типы информации.
  • Вкладки отображаются рядом друг с другом как одноранговые, в категориях равной важности.

Варианты

Существует два типа индикаторов вкладок:

Таблетки ТаблеткиВкладки Подчеркивание
  1. Индикатор таблетки
  2. Барный индикатор

Выберите правильный тип в зависимости от акцента. Вкладки индикаторов таблеток рекомендуются для организации полных страниц. Они отображают основные направления контента. Вкладки-индикаторы используются в области содержимого для дальнейшего разделения связанного содержимого и установления иерархии.

Анатомия

Анатомия вкладок

  1. Значок (необязательно)
  2. Этикетка
  3. Активный индикатор
    1. Таблетка
    2. Бар
  4. Контейнер

состояния

Состояния вкладок

  1. По умолчанию
  2. Сосредоточенный
  3. Выбрано

Характеристики

Анатомия вкладок

Поведение

При переходе от одной вкладки к другой содержимое ниже также сдвигается влево или вправо в зависимости от перемещения вкладки.