Разделитель
Разделитель с пилюлей
Разделитель с подписью в пилюле, которая несёт собственный фон: приём с текстом цвета страницы ломается на градиенте, а пилюля работает на любой подложке.
Что можно поменять
- текст подписи и её длину
- положение подписи через align: start, center или end
- line — цвет линии и рамки пилюли; пусто оставляет цвет из палитры
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/separator-002?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Серверный компонент, хуков нет. Положение подписи задаётся числом колонок сетки: center — 1fr auto 1fr, start — auto 1fr, end — 1fr auto, поэтому линии всегда упираются в пилюлю без ручных отступов. Пилюля несёт свою заливку и рамку — популярный приём «закрасить текст цветом страницы» рассыпается на градиенте и на картинке, где подпись оказывается в прямоугольнике чужого цвета. У корня role=separator и aria-label с текстом подписи, так что граница слышна и названа. Пилюля светлая с тёмным текстом, поэтому подложка компоненту не нужна.
Теги
- separator
- label
- divider
- pill
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…