スタイルとレイアウト

チェーンできるメソッドで、レイアウト、塗り、タイポグラフィ、インタラクションのスタイルを設定します。長さの単位は論理ピクセルです。

#スタイルメソッド

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 を使うと、一緒にスタイルできます。