コンポーネント

通常の関数から JSX を返します。レイアウト、タイポグラフィ、色は style に書きます。

#コンポーネントの定義

function Greeting(props: { name: string }) {
  return <Text>Hello, {props.name}</Text>;
}

function Example() {
  const [name] = createSignal("Ada");
  return <Greeting name={name()} />;
}

<View> はテキストを直接受け取れます。<div> と <span> は View と Text のエイリアスです。class も className もありません。見た目に関することはすべて style に書きます。

<div style={{ flexCol: true, gap2: true }}>
  some text
  <span style={{ textLg: true, fontSemibold: true }}>Styled text</span>
</div>

#プリミティブ

View、Text、Button、Input、TextArea、Image、Svg、Shader、VirtualList が基本の部品です。TextInput は Input と同じです。Terminal は terminal パッケージを追加すると使えます。

bun add @quickgui/extension-editor で Editor、CodeBlock、DiffView を追加できます。

bun add @quickgui/extension-markdown で Markdown を追加できます。

#複合コンポーネント

<Checkbox.Root checked={checked()} onCheckedChange={setChecked}>
  <Checkbox.Indicator>
    <Text>✓</Text>
  </Checkbox.Indicator>
  <Text>Remember this device</Text>
</Checkbox.Root>

フォーカスと値がつながったままになるよう、パーツは所属するルートの下に置きます。

#制御された状態

現在の値と変更コールバックを渡すか、コンポーネント自身に状態を持たせる場合は defaultValue、defaultChecked、defaultOpen を使います。

const [name, setName] = createSignal("");
<Input value={name()} onInput={(event) => setName(event.value ?? "")} />;

#コンポーネントの種類

コンポーネントリファレンスでは、フォーム、オーバーレイ、メニュー、テーブル、ツリーなどを扱っています。このリポジトリにはギャラリーとして examples/components-typescript があります。

#各パーツのスタイル

見えるパーツごとに style を指定します。パーツはスタイルなしで提供されるので、色とレイアウトはアプリ側で決めます。useTabsState や useSelectState のようなフックは、独自の見た目のために現在の状態を公開します。