スタイルとレイアウト

レイアウト、タイポグラフィ、色の宣言はすべて、camelCase のキーで style に書きます。長さは論理ピクセルです。

#スタイルメソッド

<View style={{ padding: 16, gap: 12, bg: "#18181b", color: "#fafafa" }} />

真偽値のプリセットは、Go と同じヘルパーに対応しています。

<View style={{ flexCol: true, p3: true, gap2: true, roundedLg: true }}>
  <Text style={{ textLg: true, fontSemibold: true }}>Panel title</Text>
</View>

roundedLg は 8 ピクセルの半径、p3 は 12 ピクセルです。独自の値には borderRadius、padding、gridTemplateColumns、width を使います。falsy なプリセット（false、null、undefined）はそのプリセットをオフにします。

#スタイルのマージ

スタイルの配列は左から右へマージされます。後ろのフィールドが前のフィールドを上書きします。falsy なエントリは無視されます。

<View style={[base, selected() && selectedStyle, { padding: 20 }]} />

リアクティブなスタイルオブジェクトからフィールドを取り除くと、そのプロパティはクリアされます。

#スタイルの再利用

import type { JSX } from "@quickgui/solid";

const panel = { p3: true, roundedXl: true, bg: "#20242c" } satisfies JSX.Style;
<View style={panel}><Text>Reusable panel</Text></View>

値が変化に追従するようにするときは、getter を JSX に置きます。

#Flexbox

display、flexDirection、flexGrow、flexShrink、flexBasis、整列、gap を使います。フレックスでスクロールする子には minWidth: 0 または minHeight: 0 を設定し、縮小できるようにします。

#グリッド

display: "grid" と、トラック、配置、スパンのフィールドを使います。

#テキストと色

フォントファミリー、ウェイト、サイズ、折り返し、選択はテキストに適用されます。色は hex、CSS の色文字列、またはパックされた RGBA 値を受け付けます。

#インタラクション状態

<Button style={{
  bg: "#2563eb",
  hover: { bg: "#1d4ed8" },
  active: { opacity: 0.8 },
  focusVisible: { outlineColor: "#93c5fd", outlineWidth: 2 },
}}>Save</Button>

#グループと名前付きグループのホバー

祖先で group に名前を付け、子孫で groupHover または groupActive を使うと、一緒にスタイルされます。