---
title: "Glass UI 组件参考"
description: "查询 @glass/ui 的眼镜布局、表单、状态、弹层和焦点 API。"
---

> Documentation Index
> Fetch the complete documentation index at: https://h5-app-docs.glass.tengyusmart.cn/llms.txt
> Use this file to discover all available pages before exploring further.

# Glass UI 组件参考

`@glass/ui` 面向 React 19。先导入 `@glass/ui/styles.css`。组件使用标准 React 属性和 DOM 事件。Bridge 由应用显式接入。

| 组件 | 常用属性或用法 |
| --- | --- |
| `HudPage` | `title`、`status`、`actions`、`focusPosition` 和用于焦点导航的 `ref`。 |
| `HudStage`、`HudAction` | 居中的任务内容、等待状态或单个主动作。 |
| `Button`、`IconButton` | 标准按钮属性，`busy` 会显示处理中并禁用。图标按钮使用 `label`。 |
| `Input`、`Textarea`、`Select` | `label` 为可见名称，`error` 用于字段错误。 |
| `Switch` | 用 `label` 提供名称，配合 `checked` 和 `onChange`。 |
| `List`、`ListItem` | 标准列表容器。可执行操作用内部按钮绑定。 |
| `Status`、`Progress` | 文本状态和进度。Progress 的 `value` 使用 0–100，未知时省略。 |
| `EmptyState`、`ErrorState` | 空状态和失败状态，`ErrorState` 可用 `onRetry` 提供重试。 |
| `PhoneConnectionWait` | 手机连接阻断页面读取时显示，可配合 `usePhoneRecovery` 重新读取。 |
| `Dialog` | 受控 `open`、`title`、`onClose`，可指定 `closeLabel`。 |
| `Image` | 提供 `alt`，媒体地址可来自当前页面的受管预览 URL。 |

`useFocusNavigation(ref, subscribe, onBack, options)` 将原生输入接到指定根节点。开启 `autoFocus` 可聚焦第一个有效控件，`onPositionChange` 将索引和总数传回 `HudPage`。非 React 场景可使用 `createFocusAdapter` 并在结束时调用 `dispose()`。实际布局和返回行为见 [眼镜界面与输入](https://h5-app-docs.glass.tengyusmart.cn/guide/glasses-ui/)。

Source: https://h5-app-docs.glass.tengyusmart.cn/reference/ui/index.mdx