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