Каты, табы и радиобаттоны

Благодаря расширениям YFM вы можете использовать интерактивные элементы разметки: каты, табы, радиобаттоны, дропдаун и аккордеон.

Каты

Используйте каты, чтобы скрыть часть контента. Например, дополнительную информацию или длинные блоки кода.

{% cut "Заголовок ката" %}

Контент, который отобразится по нажатию.

{% endcut %}

Результат:

Табы

Используйте табы для взаимоисключающих разделов. Например, чтобы разделить инструкции для разных ОС.

{% list tabs %}

- Название таба 1

  Текст таба 1.

  * Можно использовать списки.
  * И **другую** разметку.

- Название таба 2

  Текст таба 2.

{% endlist %}

Результат:

Радиобаттоны

Радиобаттоны работают подобно табам. Например, для разделения инструкций для разных платформ.

{% list tabs radio %}

- Название радиобаттона 1

  Текст радиобаттона 1  

- Название радиобаттона 1

  Текст радиобаттона 2

{% endlist %}

{% list tabs radio %}

- Название радиобаттона 1

  Текст радиобаттона 1.

  Можно вложить еще один перечень радиобаттонов.

  {% list tabs radio %}

  - Вложенный радиобаттон 1

    Текст вложенного радиобаттона

  - Вложенный радиобаттон 2

    Текст вложенного радиобаттона    

  {% endlist %}
  

- Название радиобаттона 2

  Текст радиобаттона 2.

{% endlist %}

Дропдаун

Используйте дропдаун, чтобы получить удобный выпадающий список, если элементов со скрытым контентом слишком много.

{% list tabs dropdown %}

- Название пункта 1

  Контент для пункта 1.

- Название пункта 2

  Контент для пункта 2.

{% endlist %}

Результат:

Аккордеон

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

{% list tabs accordion %}

- Название пункта 1

  Контент для пункта 1.

- Название пункта 2

  Контент для пункта 2.
 
- Название пункта 3

  Контент для пункта 3.

{% endlist %}

Результат:

Элемент по умолчанию

Если нужно, чтобы выбранный элемент был раскрыт по умолчанию, добавьте атрибут {selected} к нужному пункту.

{% list tabs accordion %}

- Название пункта 1

  Контент для пункта 1.

- Название пункта 2

  Контент для пункта 2.

- Название пункта 3 {selected}

  Контент для пункта 3.

{% endlist %}

{% list tabs radio %}

- Название пункта 1

  Текст.

- Название пункта 2 {selected}

  Пункт будет открыт по умолчанию.

{% endlist %}