# 组件总览

`platform.ui` 提供与主站一致的界面组件。组件返回 DOM 节点，可以组合、修改属性和注册事件。除 `toast` 与 `dialog` 会立即添加到应用文档外，其它组件需要加入 `root` 或其它容器后才会显示。

| 分类 | 方法 | 文档 |
| --- | --- | --- |
| 布局与文字 | `page`、`stack`、`card`、`header`、`section`、`divider`、`title`、`hint`、`muted`、`empty` | [布局与文字](/doc/components/layout) |
| 表单 | `field`、`input`、`textarea`、`select`、`checkbox`、`switch` | [表单控件](/doc/components/forms) |
| 交互与导航 | `button`、`list`、`row`、`tabs`、`tag` | [交互与导航](/doc/components/navigation) |
| 状态反馈 | `toast`、`dialog`、`loading` | [状态反馈](/doc/components/feedback) |
| 展示 | `image`、`avatar`、`stat`、`mark` | [图片与数据展示](/doc/components/display) |

## 组合组件

```js preview height=280
export default function render(root, platform) {
  const ui = platform.ui;
  root.replaceChildren(ui.page([
    ui.header("今天", ui.tag("生活")),
    ui.card([
      ui.stat("完成事项", "3"),
      ui.divider(),
      ui.button("查看详情", () => ui.toast("可以在这里切换页面")),
    ]),
  ]));
}
```

`children` 接受节点、字符串或由它们组成的数组；`null` 和 `undefined` 会被忽略。返回节点不是虚拟 DOM，重复使用同一个节点会移动它，而不会复制它。

需要额外布局时，可以使用 `document.createElement` 和宿主的 `lo-*` 类，样式遵循[设计规范](/doc/style)。当前没有内置日历面板、图表、地图、富文本或虚拟列表组件。