Раскладки
Мозаика
Мозаика: плотная сетка из восьми плиток разной высоты, дыры заполняются автоматически — без экспериментального masonry и без JS. Для галереи работ, отзывов, ленты и коллекций.
Что можно поменять
- heading и lead — заголовок и подзаголовок над раскладкой; без них — призрак
- items — слоты по порядку: 01 плитка, 02 плитка, 03 плитка, 04 плитка, 05 плитка, 06 плитка, 07 плитка, 08 плитка; title/text/value/media
- media — свой кадр, видео или фон из категории «Фон» (surface-*) внутри слота, ложится под текст
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/layout-010?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, JS только для света за курсором. Grid с grid-auto-rows: 6rem и grid-auto-flow: dense; высота слота — grid-row: span 2–4 по позиции. Две колонки, с 48rem три, data-columns=four — четыре. Порядок DOM сохраняется, dense переставляет визуально только мелкие плитки вперёд. Слоты: 01 плитка, 02 плитка, 03 плитка, 04 плитка, 05 плитка, 06 плитка, 07 плитка, 08 плитка — items[i] с title/text/value/media, без них — призрак. Номера (numbers) показывают, какой слот куда ложится. Появление по прокрутке через animation-timeline: view(), без поддержки — каскад при загрузке; наведение — свет за курсором и подсветка кромки в точке указателя. Палитра --vibeui-layout-010-* с light-dark, container-запросы, порядок DOM = порядок чтения.
Теги
- layout
- masonry
- mosaic
- gallery
- grid
- portfolio
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…