Эта страница переведена с английского. Читать страницу на английском
Компоненты макета размещают другие компоненты. Они не хранят данные и не добавляют запросов: экран, собранный из них, это один HTML-ответ.
Stack::new()
.add(Row::new().col(Card::new().title("Orders")).col(Card::new().title("Stock")).col(Card::new().title("People")))
.add(
Panel::new("Products").collapsible().add(
Tabs::new("Views")
.tab("Card", Card::new().title("A card inside a tab"))
.tab("Split", Split::new(Card::new().title("Left"), Card::new().title("Right")).ratio(55)),
),
)Orders
Stock
People
A card inside a tab
Stack
Узлы один под другим. .gap(units) задаёт расстояние между ними в единицах интервала (4 px при обычной плотности), от 0 до 12.
Row
Колонки рядом. Каждая .col(node) занимает долю ширины; .weight(n) после колонки делает её шире. На узких экранах колонки складываются друг под другом. .compact() плотно упаковывает мелкие элементы, например бейджи.
Row::new().col(customer_form).weight(2).col(order_totals)Card и Panel
Card это простая поверхность с необязательным заголовком. Panel это секция с заголовком и необязательной панелью инструментов; .collapsible() позволяет пользователю сворачивать её, а .collapsed() делает её свёрнутой с самого начала.
Panel::new(t!("ui.panel_products")).collapsible().toolbar(|t| t.export(Export::Csv)).add(products())Tabs
Tabs::new(label) с .tab(title, node). Стрелки переключают вкладки, как описано в шаблоне ARIA tabs. Содержимое закрытой вкладки не отрисовывается, пока вкладку не откроют в первый раз, поэтому экран со многими вкладками остаётся лёгким.
Split
Split::new(start, end) показывает два узла с ручкой между ними. .ratio(percent) задаёт начальный размер. Ручка двигается указателем или стрелками.
Dock
Dock располагает панели вокруг центральной области: левые, правые, нижние и центральные вкладки, которые пользователи перемещают, изменяют в размере, закрывают и возвращают. Раскладка каждого пользователя сохраняется для каждого экрана. См. Оболочка и команды.