Разделитель
Пунктирный разделитель
Пунктирный разделитель с управляемым рисунком: длина штриха и промежуток заданы числами, поэтому пунктир повторяем в разных местах макета.
Что можно поменять
- длину штриха через dash в пикселях
- промежуток между штрихами через gap в пикселях
- подписи через above, below, doneText и шаблон dashText с {dash} и {gap}
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/separator-004?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Серверный компонент, хуков нет. border-style:dashed рисует штрих, длина которого зависит от браузера и от толщины границы, — одинакового пунктира в двух местах макета так не добиться. Здесь линия набрана repeating-linear-gradient, где длина штриха и промежуток вынесены в переменные --vibeui-separator-004-dash и --vibeui-separator-004-gap и подставляются из пропов в пикселях. Разделитель набран тегом hr со снятой рамкой, поэтому граница видна и скринридеру. Компонент показан в контексте двух строк раздела; подложки по умолчанию нет, палитра объявлена через light-dark() и следует теме окружения. Все подписи вынесены в пропы: above, below, doneText и шаблон dashText, где {dash} и {gap} подставляются числами.
Теги
- separator
- dashed
- gradient
- divider
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…