CoreTabs

Живой MDC-рендер и исходник для копирования.

Живой рендер

Так ContentRenderer отрисует этот контент на реальной странице.

Табы: пункты — массив items ({ label, value, icon?, disabled? }), JSON-биндинг :items='[…]'; активная вкладка — model-value. Контент панели — именованные слоты по значению таба (#docs): при переключении таба панель меняется. Для динамического контента — scoped default (item/value`) в Vue-коде.

Полоска вкладок

Материалы документации: руководства, справочник компонентов и гайды.

Пилюли

Таблица с сортировкой и фильтрами.

Исходник (MDC)

Тот же код текстом — скопируйте в свой контент как есть.

MDC

Табы: пункты — массив `items` (`{ label, value, icon?, disabled? }`), JSON-биндинг `:items='[…]'; активная вкладка — `model-value`. Контент панели — именованные слоты по значению таба (`#docs`): при переключении таба панель меняется. Для динамического контента — scoped default (`item`/`value`) в Vue-коде.

### Полоска вкладок

::core-tabs{:items='[{"label":"Документация","value":"docs"},{"label":"Примеры","value":"examples"},{"label":"API","value":"api","disabled":true}]' model-value="docs"}
#docs
Материалы документации: руководства, справочник компонентов и гайды.

#examples
Живые примеры использования компонентов в контенте.
::

### Пилюли

::core-tabs{variant="pills" :items='[{"label":"Список","value":"list"},{"label":"Таблица","value":"table"}]' model-value="table"}
#list
Компактный список записей с пагинацией.

#table
Таблица с сортировкой и фильтрами.
::