Компоненты шестой версии

Кнопки: форма × тема

Пять форм — btn-solid, btn-outline, btn-subtle, btn-text, btn-styled — и восемь тем ядра. В пятой версии на это уходило шестнадцать классов, здесь — таблица умножения.

Значки и чипы

Значок — три формы: сплошной, мягкий badge-subtle и контурный badge-outline. Чип — новый компонент для меток и выбора; с крестиком он становится удаляемым.

primaryaccentsuccessdangerwarninginfoinversesecondary

primaryaccentsuccessdangerwarninginfoinversesecondary

primaryaccentsuccessdangerwarninginfoinversesecondary

Заголовок новое

Входящие99+непрочитанных

Простой С аватаром Тема Выбран Готово Удаляемый

Оповещения, тосты, ход выполнения

Крестик кладётся прямо в оповещение — класс alert-dismissible исчез, раскладка flex ставит кнопку на место сама. Оповещение гаснет плавно без класса fade.

Диалоги и ящики на нативном dialog

Модальное окно — элемент <dialog>: подложку рисует ::backdrop, фокус запирает браузер, прокрутку страницы держит scrollbar-gutter: stable, поэтому макет не прыгает. Ящик — тот же элемент с другой геометрией.

Меню вместо dropdown

Обёртка не нужна: кнопка и .menu — соседи. Позиционирует Floating UI, подменю раскрывается по наведению или клику.

Навигация и шаги

Вкладки — плагин Tab, панель появляется из @starting-style. Степпер — новый компонент только на CSS: шкала пути материала по редакции.

• Сегодня
• Неделя
• Месяц

путь материала по редакции

1. Верстаем

   вертикальный степпер по умолчанию
2. Снимаем

   экраны в Chromium
3. Публикуем

   репозиторий и релиз

Карусель на scroll-snap

Лента — обычный контейнер с прокруткой и привязкой: свайп, инерция и клавиатура достаются от браузера. Три слайда в ряд задают две переменные, без JavaScript.

Аватары и карточки

Аватар — новый компонент с размерами, индикатором статуса и стопкой. Карточка получила варианты card-subtle, card-translucent и горизонтальную форму card-row.

Списки и таблицы

Таблица с темой строк и обёрткой md:table-responsive: ниже md она прокручивается по горизонтали.