组件

从普通函数返回 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。

运行 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 这类钩子会暴露当前状态，便于自定义展示。