Плитка с иконкой
Сетка плиток категорий
Сетка плиток-категорий с ховером: число колонок считается от ширины контейнера, а наведение поднимает плитку тенью и сдвигом, а не одним цветом.
Что можно поменять
- items — список категорий: label, icon и необязательный count
- набор доступных icon: code, design, chart, rocket, shield, spark
- оттенок каждой категории через ICON_HUE внутри файла
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/icontile-008?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Серверный компонент, хуков нет. Каждая плитка — кнопка type="button", поэтому ряд фокусируется и листается с клавиатуры без дополнительного JS. Корневой блок только объявляет container-type:inline-size, а сама сетка живёт на вложенном data-part="grid": число колонок переключается через @container, нацеленный на этот вложенный узел (2 → 3 → 4), а не через медиазапрос окна и не на сам контейнер — иначе запрос молча не сработает. Наведение показано сразу двумя признаками — тенью и сдвигом вверх, а не одним цветом, и оба отключаются в prefers-reduced-motion. Оттенок плитки-иконки берётся из inline custom property --vibeui-icontile-008-item-hue, выставленной на кнопке под конкретную категорию из items.
Теги
- icontile
- grid
- category
- hover
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…