Components and wood DOM

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

The component is responsible for a small task and only receives the necessary data. This boundary helps to change the card or field without rewriting the entire screen.
♪ The song
DOM
Declarative API
01
From screen to tree
The XML page is the tree of the knots. The application has a root, and inside it there may be a hat, card, text, and button. When a part is repeated or has its own role, it is useful to give the name of the component.
ui.show(
ui.column(
ui.heading("Наблюдения"),
ui.card("Сегодня", ui.text("Записано 3 идеи")),
ui.button("Открыть заметки")
)
)
1
The root gives context
n
The components build the contents
DOM
browser stores real knots
02
Properties are input data.
PyUI Command
What it says
What creates the host
ui.heading(text)
text and title level
Semantic title inside the screen
ui.card(title, *children)
Heading and subsidiaries
Group of related contents
ui.grid(*children)
A set of same type components
Adaptive DOM network
ui.notice(text, tone)
message and its tone
Visual notification without HTML string
Don't get confused.
The property comes into the component from the outside. The state changes when the interface works: for example, the user presses the real button on the page and the processor changes the data.
03
Compositation without copy
Pick up a little card, see if you can press the button after she shows up in a tree.
Component pool
DOM nodes