iter(g136): 新增链接组件 link
This commit is contained in:
+30
-1
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-26T07:26:53.819Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T07:28:06.168Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -1819,6 +1819,34 @@ const dept = signal(''); treeSelect({ nodes: [{ key: 'tech', label: '技术中
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-treeselect
|
||||
|
||||
### link — 链接 Link
|
||||
|
||||
参数:
|
||||
|
||||
- href(必填):string —— 目标地址:站内相对路径或绝对 URL
|
||||
- label(必填):string —— 链接文案
|
||||
- target:'_self' | '_blank' | '_parent' | '_top' —— 打开方式;缺省同窗口。传 _blank 会自动按站外处理(补 rel 与图标)
|
||||
- external(默认 false):boolean —— 站外链接:补 ↗ 图标、强制新窗口、加 rel=noopener noreferrer,并给读屏播报「在新窗口打开」
|
||||
- muted(默认 false):boolean —— 弱化色,用于次要链接与页脚
|
||||
- disabled(默认 false):boolean —— 禁用:去掉 href、拦点击,保留可聚焦与 aria-disabled(仍能被 Tab 到,读屏能听出不可用)
|
||||
- onClick(回调):(e: Event) => void —— 点击回调(禁用时不触发;可用于埋点,returnValue 不影响默认跳转)
|
||||
|
||||
示例:
|
||||
|
||||
```
|
||||
link({ href: '/docs', label: '查看文档' }); link({ href: 'https://example.com', label: '外部站点', external: true }); link({ href: '#', label: '说明页', muted: true })
|
||||
```
|
||||
|
||||
手把手:
|
||||
|
||||
1. 站内跳转用相对路径、站外用 external: true:会自动补 ↗、target=_blank、rel=noopener noreferrer,并给读屏播报开了新窗口
|
||||
2. 页脚 / 次要说明用 muted 弱化;正文里的行内链接保持默认主色,与 typography 的 underline 区分用途(后者不跳转)
|
||||
3. 需要「点了先确认再跳」这类拦截,在 onClick 里做判断后自行处理,组件不接管默认行为(除禁用外都放行)
|
||||
4. 禁用态只是去掉 href 并保持 aria-disabled,不做视觉上的「像普通文字」处理——需要完全不可聚焦请在外层控制渲染
|
||||
5. 纯样式的「看起来像链接」用 typography({ underline: true }),不要为了样式引入带 href 的 a 标签
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-link
|
||||
|
||||
API 速览:
|
||||
|
||||
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
|
||||
@@ -1888,6 +1916,7 @@ API 速览:
|
||||
- floatButton(props):悬浮操作按钮,固定停靠左下 / 右下角,label 缺省为纯图标圆形,badge 走角标,tooltip 兼作 aria-label
|
||||
- mentions(props):@提及输入,textarea 内键入 @ 弹候选(名字 / 关键词过滤),↑↓ 环形移动、Enter/Tab 选中、Esc 只收本层,选中按光标替换并写回 value
|
||||
- treeSelect(props):树形选择,按钮触发弹层并复用 tree(搜索 / 多选 / 级联),单选选中即收起、多选保持展开,Esc 与点外收起
|
||||
- link(props):链接,站内跳转与站外跳转统一入口,external 自动补 ↗ 与 rel=noopener noreferrer 并给读屏播报
|
||||
|
||||
一行用法:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user