oscript-ui
oscript-ui
GitHub

oscript-ui

UI-кит для веб-приложений на чистом OneScript в облике Material Design 3. Экран собирается на сервере из готовых компонентов и печатается в HTML, который выглядит прилично без единой строки CSS от вас.

Что это#

Кит — набор компонентов, каркас страницы и тема. Экран собирается деревом узлов — холстом: позицией то, без чего узел бессмыслен, дальше дети, остальное — слова цепочкой (правила — на странице Язык узлов). Дерево печатается одним вызовом. Компонент можно позвать и строкой: набор получает модель-структуру и сразу возвращает разметку.

Экран из пяти компонентов

ИмяСостояние
альфаоткрытый
отчётустаревший
Проекты = Новый Массив(); Проекты.Добавить(Новый Структура("Имя, Состояние", Кит.Код("альфа"), Кит.Плашка("открытый").Вид("ok"))); Проекты.Добавить(Новый Структура("Имя, Состояние", Кит.Код("отчёт"), Кит.Плашка("устаревший").Вид("warn"))); Таблица = Кит.Таблица(Проекты); Таблица.Колонка("Имя", "Имя"); Таблица.Колонка("Состояние", "Состояние"); HTML = Кит.Холст( Кит.СтрокаПоиска("/проекты").Метка("Поиск").Кнопка("Найти", "поиск"), Таблица, Кит.Пагинация("/проекты", 1, 3)).Рендер();

Три обещания кита#

  • Выглядит готовым из коробки. Базовый лист кита оформляет каждый класс, который кит печатает. Тест следит, чтобы ни один компонент не приехал к вам голым.
  • Работает без скрипта. Формы отправляются, меню и окна открываются движком браузера, раскрывашки раскрываются. Скрипт кита добавляет движение — рябь, плавающую подпись поля, — но страница без него законченная.
  • Переопределяется штатно. Свой лист встаёт вторым в каскаде, свой файл статики вытесняет одноимённый файл кита, свой акцент перекрашивает всю схему. Библиотеку трогать не нужно.

Как читать документацию#

У каждой страницы компонента одинаковое устройство: зачем он, когда его брать, варианты с живыми образцами, правила «делайте и не делайте», доступность и модель.

Образцы на этих страницах не картинки. Код под образцом исполняется при каждом показе страницы, и образец нарисован ровно им. Скопируйте код кнопкой справа, вставьте к себе — получите то же самое.

Разделы#

Основы

Цвет и темароли цвета, акцент и тёмная темаТипографикашкала шрифта Material 3Формы и возвышениескругления, тени, слои состоянийДвижениекривые, длительности, рябьИконкиглифы Material SymbolsСетка и интервалыколонки, шаг 4dp, плотность

Действия

Кнопказапускает действие или ведёт по ссылкеМенюдействия строки и учётки в выпадающей панелиБлок командыкоманда для терминала с копированием

Ввод

Поле формытекст, число, выбор, флажок, список, цветТумблервключено или выключеноФорма отборапоиск и фильтр спискаДерево галоквыбор в иерархииШагидлинная форма по одному экрануСлот картинкизагрузить или заменить одну картинкуОбразецпредпросмотр, который меняется по вводуПоле из конфигазначение, заданное снаружиСкрытое полезначение, которое форма везёт молчаСегментыодин из немногих вариантовПодсказкадлинное пояснение значком «?»

Показ данных

Таблицазаписи строками, на телефоне карточкамиПлашкакороткая метка состоянияКарточказаконченный кусок содержимогоПлитка показателяодно число крупноСводказапись одним взглядомРеестрнемного записей с действиямиПолоса заполнениядоля от целогоРяд метысведения об объекте строкойШапка объектаимя, состояние и действия объектаЗаголовок страницыо чём экранПустое состояниекогда показать нечего

Навигация

Вкладкисоседние виды одного объектаДерево разделовразделы внутри объектаКрошкипуть к текущей страницеПагинациядлинный список страницамиПроводникшаги первой настройкиЕдиное менюнавигация инсталляции на любой ширине

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

Тоститог действияОкнокороткая задача поверх экранаПодтверждениеокно перед необратимым действиемОпасная зонанеобратимое действие с подтверждениемПанель сохранениясохранить или отменить правкуСтраница ошибкиотказ и «не найдено»

Холст

Холст и узлыэкран деревом узловЯзык узловшесть правил и словарь узловКаркас документаголова, тело, лендмаркиРаскладкагруппы, ряды, сеткаСписки и парыперечни и «подпись — значение»Таблица деревомтаблица из узловФормы деревомформа из узловТекст и значениязаголовки, абзацы, код, ссылкиКомпонент в деревекомпоненты узлами холстаСловарь родоввсе роды узлов

Приложение

Каркас страницышапка, меню, подвал вокруг экранаСтраница входаузкая колонка: вход, регистрация, парольДом настроекразделы, секции, сохранениеСвоё оформлениелист, статика и тема инсталляцииПриложение на winowэтот сайт как пример

Этот сайт#

Документация — мини-приложение на winow, собранное самим китом: шапка, единое меню, оглавление, образцы — всё компоненты кита. Как оно устроено, рассказывает страница Приложение на winow.