sitelo UI

sitelo-ui — это библиотека компонентов для sitelo. Каждый компонент — функция, возвращающая строку HTML, поэтому он вкладывается прямо в ту страницу, которую вы и так пишете: без компилятора, без рантайма, без гидратации.

Каждый пример в этом разделе рендерит та же сборка, что и страницу вокруг него. Вы видите ровно то, что произвёл код под ним, и оно следует светлой и тёмной темам этого сайта, потому что sitelo-ui читает тот же атрибут data-theme, что и документация.

Раскладка

• по центру

  КонтейнерЦентрированная колонка страницы с ограниченной шириной.
• раздватри

  СтекFlex-строка или колонка с токеном интервала в качестве промежутка.
• 1234

  СеткаВмещает столько колонок, сколько влезет, без медиазапросов.
• или

  РазделительЛиния между разделами, с подписью или без.
• Соотношение сторонДержит блок в заданной форме, чтобы при загрузке ничего не прыгало.

• Карточка

  КарточкаПоверхность для сгруппированного содержимого: шапка, тело и подвал.

Типографика

• Заголовок

  Подпись

  ТипографикаШкала кеглей, которая сама выбирает элемент.

• Заголовок

  И абзац.

  ПрозаОформляет сырой HTML из Markdown или CMS.

• Читайте документацию.

  СсылкаОформленный якорь с атрибутами, нужными внешней ссылке.
• Иконки99 знаков на одной сетке, размер и цвет — от окружающего текста.

Поля ввода

• СохранитьОтмена

  КнопкаПять вариантов, пять цветов, три размера.
• РазДва

  Группа кнопокКнопки, слитые в один элемент управления.
• Почта

  Текстовое полеПодпись, поле, подсказка и ошибка — связаны между собой.
• ТемаСветлаяТёмная

  Выпадающий списокНативный select, оформленный в тон.
• SitemapRSS-лента

  ФлажокНастоящий input, оформленный через CSS, а не подменённый.
• бесплатныйpro

  РадиогруппаОдин выбор из нескольких — радиокнопки с общим name.
• ПубличныйЧерновики

  ТумблерПереключатель для настройки, которая срабатывает сразу.
• СлайдерНативный range-инпут, оформленный в тон.
• ВклВыкл

  Кнопка-переключательКнопка, которая остаётся нажатой.
• abc

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

Отображение данных

• ALGHAT+1

  АватарКартинка, если она есть, и инициалы, если её нет.
• Входящие12

  БейджСчётчик или точка, приколотые к углу.
• прошлостатика

  ЧипТег, статус, фильтр.
• Наведите

  ПодсказкаПодсказка при наведении и фокусе, нарисованная целиком на CSS.

• Страница	Размер
  /	4,1 кБ
  /docs	12,7 кБ

  ТаблицаСтроки и колонки из данных, в контейнере с прокруткой.
• • Маршрутизация

    На файлах

  СписокСтроки с чем-нибудь по краям.

• 

  ИллюстрацияКартинка и подпись к ней как одна иллюстрация.

Обратная связь

• Развёрнуто.

  УведомлениеСообщение, у которого иконка и ARIA-роль следуют за цветом.

• Здесь пусто

  Пустое состояниеКак выглядит список, пока в нём ничего нет.
• ПрогрессПолоса для известной работы и спиннер для всего остального.
• СкелетонЗаглушка в форме содержимого, которое вот-вот появится.
• Сохранено.

  ТостМимолётное сообщение, добавляемое скриптом.

Навигация

• Хлебные крошкиЦепочка предков, заканчивающаяся этой страницей.
• ПагинацияПронумерованные страницы окном, настоящими ссылками.
• ОднаДве

  ВкладкиСсылки, по странице на вкладку, — или панели, меняющиеся на месте.
• sitelo

  v2

  Панель приложенияМарка с одной стороны, навигация и действия с другой.
• Переключатель темыСветлая и тёмная, без вспышки на входе.

Оверлеи

• Открыть окно

  Модальное окноДиалог на popover API — нигде ни строчки скрипта.
• Открыть панель

  Боковая панельПанель от края, с той же механикой popover.
• Действия ▾

  МенюВыпадающее меню на details: открытие и закрытие достаются даром.
• Вопрос

  АккордеонСворачиваемые секции, включая эксклюзивный режим.
• Показать больше

  Скрыто, пока не попросят.

  Сворачиваемый блокОдно «показать больше», без обрамления аккордеона.

Секции

• Заголовок

  И фраза.

  Hero-блокВерх посадочной страницы: заголовок, фраза, действия.
• ДокументацияРуководство · Компоненты

  ПодвалКолонки ссылок и строка под ними.

• Страниц

  204

  +8

  ПоказательЧисло, на которое стоит взглянуть, и что оно значит.
• 1. 1

     Установить

  2. 2

     Собрать

  ШагиПронумерованный путь, где сделанное помечено как сделанное.

• 1. v2.7

     Секции

  ТаймлайнЗаписи по порядку, вдоль линии.
• sitelo.dev

  МакетСкриншот в браузере, окне, телефоне или терминале.

Стили

• ТемыЛюбой цвет, скругление и шрифт — из одного вызова.

Подключение

Две строки: импортировать компоненты и поставить styles() в head. Страница «Компоненты» в документации разбирает установку, темы, соглашение о вызове и необязательный клиентский рантайм и перечисляет все экспорты в одной таблице.

Каталог examples/ui в репозитории рендерит весь набор на одной странице.