Общие параметры
Синхронизация
Табы, радиобаттоны, аккордеоны и дропдауны поддерживают синхронизацию — переключение одинаковых элементов на странице. Для этого используйте атрибут group.
Выбранный элемент запоминается и автоматически открывается на всех страницах документационного проекта с тем же значением group. Например, выбрав таб MacOS на одной странице, пользователь увидит его активным на всех страницах. Состояние интерактивных элементов сохраняется после перезагрузки страницы.
Примеры
{% list tabs group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world
{% endlist %}
{% list tabs group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world 2
{% endlist %}
Результат:
About python
- Tab with list
- One
- Two
- One
- Two
hello world
About python
- Tab with list
- One
- Two
- One
- Two
hello world 2
{% list tabs radio group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world
{% endlist %}
{% list tabs radio group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world 2
{% endlist %}
Результат:
About python
- Tab with list
- One
- Two
- One
- Two
hello world
About python
- Tab with list
- One
- Two
- One
- Two
hello world 2
{% list tabs accordion group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world
{% endlist %}
{% list tabs accordion group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world 2
{% endlist %}
Результат:
About python
- Tab with list
- One
- Two
- One
- Two
hello world
About python
- Tab with list
- One
- Two
- One
- Two
hello world 2
{% list tabs dropdown group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world
{% endlist %}
{% list tabs dropdown group=instructions %}
- Python
About python
- Tab with list
- One
- Two
- Tab with list
1. One
2. Two
- Next
hello world 2
{% endlist %}
Результат:
About python
- Tab with list
- One
- Two
- One
- Two
hello world
About python
- Tab with list
- One
- Two
- One
- Two
hello world 2
Элемент по умолчанию
Если нужно, чтобы элемент был раскрыт по умолчанию, добавьте к нему атрибут {selected}.
Примеры
{% list tabs %}
- Название таба 1
Текст таба 1.
- Название таба 2 {selected}
Пункт будет открыт по умолчанию.
- Название таба 3
Текст таба 3.
{% endlist %}
Результат:
Текст таба 1.
Пункт будет открыт по умолчанию.
Текст таба 3.
{% list tabs radio %}
- Название пункта 1
Текст.
- Название пункта 2 {selected}
Пункт будет открыт по умолчанию.
- Название пункта 3
Текст.
{% endlist %}
Результат:
Текст.
Пункт будет открыт по умолчанию.
Текст.
{% list tabs accordion %}
- Название пункта 1
Контент для пункта 1.
- Название пункта 2 {selected}
Пункт будет открыт по умолчанию.
- Название пункта 3
Контент для пункта 3.
{% endlist %}
Результат:
Контент для пункта 1.
Пункт будет открыт по умолчанию.
Контент для пункта 3.
{% list tabs dropdown %}
- Название пункта 1
Контент для пункта 1.
- Название пункта 2 {selected}
Пункт будет открыт по умолчанию.
- Название пункта 3
Контент для пункта 3.
{% endlist %}
Результат:
Контент для пункта 1.
Пункт будет открыт по умолчанию.
Контент для пункта 3.
Ссылки на активные элементы
Выбранный элемент сохраняется в URL как параметр ?tab=name_value, позволяя делиться прямой ссылкой на него.