Компоненты и дерево DOM

Содержание и основные понятия

Компонент отвечает за небольшую задачу и получает только нужные данные. Такая граница помогает менять карточку или поле, не переписывая весь экран.
композиция
DOM
декларативный API
01
От экрана к дереву
HTML-страница - дерево узлов. У приложения есть корень, внутри него могут быть шапка, карточка, текст и кнопка. Когда часть повторяется или имеет собственную роль, ей полезно дать имя компонента.
ui.show(
ui.column(
ui.heading("Наблюдения"),
ui.card("Сегодня", ui.text("Записано 3 идеи")),
ui.button("Открыть заметки")
)
)
1
корень задаёт контекст
n
компоненты строят содержимое
DOM
браузер хранит реальные узлы
02
Свойства - это входные данные
Команда PyUI
Что описывает
Что создаёт host
ui.heading(text)
текст и уровень заголовка
семантический заголовок внутри экрана
ui.card(title, *children)
заголовок и дочерние узлы
группу связанного содержимого
ui.grid(*children)
набор однотипных компонентов
адаптивную сетку DOM-узлов
ui.notice(text, tone)
сообщение и его тон
визуальное уведомление без HTML-строк
Не путай
Свойство приходит в компонент снаружи. Состояние меняется во время работы интерфейса: например, пользователь нажимает реальную кнопку на странице и обработчик изменяет данные.
03
Композиция без копирования
Собери маленькую карточку. Проверь, что кнопку можно нажать после того, как она появилась в дереве.
Палитра компонентов
узлы DOM