iter(g129): 新增排版文本组件 typography
This commit is contained in:
+36
-1
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-26T06:49:03.720Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T07:17:51.824Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -1668,6 +1668,40 @@ const day = signal(''); calendar({ value: day, marker: (d) => (d === '2026-10-26
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-calendar
|
||||
|
||||
### typography — 排版文本 Typography
|
||||
|
||||
参数:
|
||||
|
||||
- content(必填):string | Node —— 文本内容:字符串按纯文本渲染;传 DOM 则原样插入(此时不参与截断与复制)
|
||||
- variant(默认 text):'title' | 'text' | 'paragraph' —— 排版形态,决定语义标签与字号:title 出 h1-h5、paragraph 出 p、text 出 span
|
||||
- level(默认 3):1 | 2 | 3 | 4 | 5 —— 标题层级,仅 variant=title 生效;越界值会被夹到 1-5
|
||||
- type:'secondary' | 'success' | 'warning' | 'danger' —— 语义色调;缺省主文本色
|
||||
- strong(默认 false):boolean —— 加粗强调
|
||||
- underline(默认 false):boolean —— 下划线(可为链接式文案保留指引视觉)
|
||||
- delete(默认 false):boolean —— 删除线,用于作废文案;会同时弱化文字颜色
|
||||
- mark(默认 false):boolean —— 高亮底纹(警示色 24% 混透明),用于搜索命中片段
|
||||
- code(默认 false):boolean —— 等宽代码样式,用于行内字段名 / 命令
|
||||
- align:'left' | 'center' | 'right' —— 水平对齐;缺省左对齐
|
||||
- ellipsis:number —— 截断行数(1 起):超出显示省略号,纯文本自动挂 title 供悬停看全文;缺省不截断
|
||||
- copyable(默认 false):boolean —— 右侧附复制按钮:点击写剪贴板并回显「已复制 / 复制失败」,1.2 秒后复原
|
||||
|
||||
示例:
|
||||
|
||||
```
|
||||
typography({ variant: 'title', level: 2, content: '部署说明' }); typography({ content: 'RB-2048', code: true, copyable: true }); typography({ variant: 'paragraph', ellipsis: 2, content: '一段很长的说明……' })
|
||||
```
|
||||
|
||||
手把手:
|
||||
|
||||
1. 正文一律用 variant='text' 或 'paragraph',标题用 variant='title' + level,标签自动出 h1-h5,别自己写 h 标签再叠样式
|
||||
2. 文内强调用装饰位组合:strong 加粗、mark 高亮、code 等宽、underline / delete 表示链接与作废,一个组件内可叠加
|
||||
3. 长描述(卡片摘要、表格说明)用 ellipsis 给行数:超出显示省略号并自动挂 title,悬停即看全文,不必额外做展开按钮
|
||||
4. 订单号 / 密钥 / 命令这类要复制的内容传 copyable:按钮独立于文本节点,复制失败会回显「复制失败」而不是静默
|
||||
5. content 传 DOM 时组件只负责语义标签与类名:截断与复制对 DOM 内容不生效(取不到稳定文本)
|
||||
6. 段落连续排列时相邻 .ua-type-paragraph 自动留出间距,单个段落不额外撑高,嵌进卡片也不会有空隙
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-typography
|
||||
|
||||
API 速览:
|
||||
|
||||
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
|
||||
@@ -1732,6 +1766,7 @@ API 速览:
|
||||
- anchor(props):锚点导航,竖排区块链接,滚动时按目标位置高亮当前区块(aria-current 同步),点击按 offset 偏移量平滑定位并回写 hash;container 可指定内滚容器
|
||||
- popconfirm(props, trigger):二次确认气泡,挂在任意触发器上,就地确认危险操作;确定后先收起再回调,取消 / 点外部 / Esc 走 onCancel,展开即聚焦「取消」
|
||||
- calendar(props):月历,整月网格内嵌页面(排期 / 值班 / 日程),每日可带 marker 标记文案,方向键漫游 + Enter 选中,翻月走 onMonthChange
|
||||
- typography(props):排版文本,variant 决定语义(标题出 h1-h5 / 段落出 p / 行内出 span),支持语义色、装饰位、对齐、多行截断与复制按钮
|
||||
|
||||
一行用法:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user