样式与布局

用链式方法设置布局、绘制、排版和交互样式。长度是逻辑像素。

#样式方法

div()
    .p(16.0)
    .gap(12.0)
    .bg(Color::rgb8(24, 24, 27))
    .text_color(Color::rgb8(250, 250, 250))

flex_col、p_3、rounded_lg 和 text_lg 等预设与 Go 和 TypeScript 的辅助方法对应。p_3 是 12 像素。自定义值请使用 rounded(10.0)、p(14.0) 以及 w / h。

#合并样式

后写的调用会覆盖同一属性。when 仅在条件为真时应用分支：

div().p(12.0).when(self.selected, |style| style.bg(Color::rgb8(37, 99, 235)))

#复用样式

编写接收并返回 Element 的函数：

fn panel(child: impl IntoElement) -> Element {
    div().p_3().rounded_xl().bg(Color::rgb8(32, 36, 44)).child(child)
}

#Flexbox

使用 flex、flex_col、flex_grow、对齐和 gap。给可滚动的弹性子节点设置 min_w(0.0) 或 min_h(0.0)，它们才能收缩。

#网格布局

使用 grid，再配合轨道、放置和跨度方法。

#文本与颜色

字体族、字重、字号、换行和选择作用于文本。颜色接受 Color::rgb8、Color::rgba8 以及打包值。

#交互状态

button()
    .bg(Color::rgb8(37, 99, 235))
    .hover(|style| style.bg(Color::rgb8(29, 78, 216)))
    .child("Save")

#分组与具名分组悬停

在祖先上命名 group，并在后代上使用 group_hover，让它们一起设置样式。