Files
Endorphin-Document/guide/12-ui-components.md

88 lines
3.3 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 12. UI 组件
本章保留官方基础组件的参数、默认值和展示效果提案。组件用于组成普通函数返回的界面值,资源与结果的呈现方式见[资源访问与呈现](11-resource-access-and-presentation.md)。
官方库的 key、引用形式、组件构造表达式和界面类型尚未定义。本章示例是 `market:shop.ui` 的界面结构示意,不是源码,也不表示官方组件属于该 workspace 的库或必然免导入可用。用户编写的组件以其实际声明为准。
## 12.1 Column
Column 从上到下排列子节点。
```text
Column:gap 为 12,padding 为 24
Text:内容为 First
Text:内容为 Second
```
| 参数 | 值类型 | 默认值 | 含义 |
| --- | --- | --- | --- |
| `gap` | 数字 | `0` | 相邻子节点的垂直间距 |
| `padding` | 数字 | `0` | 四个方向的内边距 |
**子节点:** 接受零个或多个节点。
**布局效果:** 在本文简单内容布局模型中,宽度为最宽子节点宽度加左右内边距;高度为子节点高度、相邻间距和上下内边距之和。空容器没有子节点间距。
## 12.2 Row
Row 从左到右排列子节点。
```text
Row:gap 为 8,padding 为 4
Text:内容为 Left
Text:内容为 Right
```
| 参数 | 值类型 | 默认值 | 含义 |
| --- | --- | --- | --- |
| `gap` | 数字 | `0` | 相邻子节点的水平间距 |
| `padding` | 数字 | `0` | 四个方向的内边距 |
**子节点:** 接受零个或多个节点。
**布局效果:** 在本文简单内容布局模型中,宽度为子节点宽度、相邻间距和左右内边距之和;高度为最高子节点高度加上下内边距。空容器没有子节点间距。
## 12.3 Spacer
Spacer 占据布局空间,不显示可见内容。
```text
Spacer:size 为 16
```
| 参数 | 值类型 | 默认值 | 含义 |
| --- | --- | --- | --- |
| `size` | 数字 | `0` | 占位宽度与高度 |
**子节点:** 不接受。
**布局效果:** 在父组件的排列中占据指定空间。它不是间距参数本身,而是树中的一个节点。
## 12.4 Text
Text 显示字符串内容。
```text
Text:内容为 Product
Text:内容为 Shop,role 为 .title
```
| 参数 | 值类型 | 默认值 | 含义 |
| --- | --- | --- | --- |
| 文本内容 | 字符串 | `""` | 显示的文本;正式参数名与传入方式待定 |
| `role` | 符号值 | 普通文本角色 | `.title` 表示标题视觉角色 |
**子节点:** 不接受。
**展示效果:** 内容按字符串显示;role 表达文本的视觉角色,不指定固定字号、颜色、字符宽度或缩放比例。
## 12.5 尺寸与参数检查
数字布局参数表达逻辑尺寸,本文不将其等同于设备像素。单位、数值范围、负数、显式尺寸、溢出、主题与文字测量规则列于[规范状态](../appendices/specification-status.md#ui)。
组件声明与构造规则确定后,Preflight 据此检查名称、输入类型和子节点约束;inflight 保持组件规定的内容和排列效果。未知参数、错误类型或不支持的子节点不能通过静默忽略获得有效语义。
本章组件参数与默认值属于 UI 提案,确定程度与其他语言主题一起记录在规范状态附录。
[上一章:资源访问与呈现](11-resource-access-and-presentation.md) · [下一章:Agent](13-agents.md) · [目录](../README.md)