Вкладки
Вкладки (tabs) делят содержимое на разделы, между которыми переключаются щелчком: видно только содержимое выбранной вкладки. На странице курса LearnUp это «Программа», «Отзывы» и «Преподаватель». Компонент — класс tabs, отдельная вкладка — tab.
Ряд вкладок
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div role="tablist" class="tabs tabs-box">
<a role="tab" class="tab tab-active">Программа</a>
<a role="tab" class="tab">Отзывы</a>
<a role="tab" class="tab">Преподаватель</a>
</div>Серая полоса с тремя вкладками, первая выделена белой плашкой — её отмечает tab-active. Атрибуты role="tablist" и role="tab" подсказывают программам чтения с экрана, что это вкладки. Сами по себе такие вкладки ничего не переключают: класс tab-active переносят ссылкой на другую страницу или скриптом.
Стили вкладок
| Модификатор | Вид |
|---|---|
| без стиля | Просто текст, активная вкладка ярче |
tabs-box | Вкладки на общей плашке |
tabs-border | Линия под активной вкладкой |
tabs-lift | Вкладки как у папки с бумагами |
Размер задают tabs-xs … tabs-xl, как у кнопок.
Вкладки с содержимым
Чтобы вкладки переключали содержимое без JavaScript, их делают радиокнопками: <input type="radio" class="tab"> с общим name. Подпись вкладки берётся из атрибута aria-label, а сразу после каждой вкладки идёт её блок tab-content:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="tabs tabs-lift">
<input type="radio" name="course-tabs" class="tab" aria-label="Программа" checked>
<div class="tab-content border-base-300 bg-base-100 p-6">
12 уроков: теги, ссылки, списки, таблицы и формы.
</div>
<input type="radio" name="course-tabs" class="tab" aria-label="Отзывы">
<div class="tab-content border-base-300 bg-base-100 p-6">
«Понятно даже без опыта» — Олег.
</div>
<input type="radio" name="course-tabs" class="tab" aria-label="Преподаватель">
<div class="tab-content border-base-300 bg-base-100 p-6">
Анна, фронтенд-разработчик с 8-летним опытом.
</div>
</div>Щёлкайте по вкладкам — под ними меняется текст в белой рамке. Атрибут checked выбирает вкладку, открытую сразу. Радиокнопки с общим name не могут быть отмечены одновременно, поэтому всегда видно ровно одно содержимое.
Частая ошибка
Сгруппировать сначала все вкладки, а потом все блоки содержимого:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="tabs tabs-lift">
<input type="radio" name="wrong-tabs" class="tab" aria-label="Программа" checked>
<input type="radio" name="wrong-tabs" class="tab" aria-label="Отзывы">
<div class="tab-content bg-base-100 p-6">12 уроков.</div>
<div class="tab-content bg-base-100 p-6">«Понятно даже без опыта».</div>
</div>При выборе «Программы» содержимое не появляется вовсе, а при выборе «Отзывов» показывается текст программы: daisyUI показывает блок tab-content, который стоит сразу после отмеченной вкладки. Соблюдайте порядок «вкладка — её содержимое — следующая вкладка».