基础组件

标题、文本、按钮、标签、提示、进度、统计、加载、Markdown、代码高亮等最高频的展示组件。每个示例左侧为格式化 + 高亮的 TokUI DSL，右侧为实时渲染，点「编辑」可即时改动。

标题 `h1` ~ `h6`

六级标题，自闭合。tx 文本（可省略直接写正文），v 控制对齐与装饰。

属性	含义	示例
`tx`	文本内容（亦可直接写正文）	`[h1 标题]`
`v`	变体	`v:underline`

变体：left / center / right（对齐），ribbon（缎带），underline（下划线），badge / pill（徽标）。

1[h1 v:underline TokUI 一级标题]

2[h2 二级标题]

3[h3 三级标题]

4[h4 四级标题]

5[h5 v:badge 五级带徽标]

6[h6 六级标题]

加载 TokUI…

TokUI DSL · 左代码右渲染

段落 `p`

正文段落，双模（与 card 的 tx 自闭合陷阱同理）：标签内有正文 → 叶子自闭合；无正文 → 容器收子节点。v 控制对齐与字重。

叶子模式 [p 文本] / [p v:bold 文本]：文本作正文，可夹内联子节点（a/tag/b/strong/em/mark/spin/sub/sup/code），遇块级兄弟自动闭合。
容器模式 [p]...[/p]：放 btn/form/card 等块级子节点时用，必须 [/p] 闭合。
正文里写 英文:值（如 Q:/A:）会被解析成属性吞掉（无空格→正文空、带空格→前缀消失）——改全角 ： 或去冒号（详见 DSL 语法）。

变体：left / center / right（对齐），muted（弱化），bold（加粗），sm / lg（字号）。

1[p 这是默认段落，用于承载正文内容。]

2[p v:muted 弱化段落，用于次要信息或辅助说明。]

3[p v:bold 加粗段落，用于强调重点。]

4[p v:sm 小字号段落，常用于脚注。]

5[p v:lg 大字号段落，用于引语。]

加载 TokUI…

TokUI DSL · 左代码右渲染

1[p 叶子模式可夹 [a u:# tx:内联链接]

2与

3[b 行内加粗]

4等内联子节点。]

5[p]

6[btn tx:容器模式放块级按钮 clk:ok]

7[btn tx:重置 clk:cancel]

8[/p]

9[p Q：全角冒号当正文，规避属性陷阱。]

加载 TokUI…

TokUI DSL · 左代码右渲染

链接 `a`

超链接，自闭合。u 地址、tx 文本、target 打开方式。

属性	含义	示例
`u`	链接地址	`u:https://example.com`
`tx`	文本	`tx:官网`
`target`	打开方式	`target:_blank`
`v`	变体	`v:underline`

变体：muted / danger / success / underline。

1[p]

2[a u:# tx:默认链接]

3·

4[a u:# tx:下划线链接 v:underline]

5·

6[a u:# tx:弱化链接 v:muted]

7·

8[a u:# tx:危险链接 v:danger]

9·

10[a u:# tx:成功链接 v:success]

11[/p]

12[p]

13[a u:https://github.com/jboltai/tokui tx:新窗口打开 GitHub target:_blank v:underline]

14[/p]

加载 TokUI…

TokUI DSL · 左代码右渲染

分割线 `hr` / `dv`

hr 普通水平线（自闭合）。dv 带文本与样式的分割线（自闭合）。

属性	含义	适用
`tx`	分割线文本	`dv`
`v`	线型/方向	`dv`
`bg`	颜色	`dv`

dv 变体：dashed / dotted（线型），sm / md / lg（间距），vert（竖向），plain。

1[p 上方内容]

2[hr]

3[p 下方内容]

4[dv tx:章节分隔]

5[dv v:dashed]

6[dv tx:垂直场景 v:vert]

加载 TokUI…

TokUI DSL · 左代码右渲染

图片 `img` / 多图 `imgs`

img 单图，点击可灯箱预览。imgs 容器，多图自适应九宫格。

属性	含义	示例
`s`	图片地址	`s:https://...`
`alt`	替代文本	`alt:封面`
`w` / `h`	宽 / 高	`w:120`
`v`	变体	`v:avatar`

img 变体：avatar（头像），rounded（圆角），bordered（边框）。

1[row]

2 [col span:4]

3 [img s:https://assets.vdata.chat/jboltai/aiimg/logo_60.png v:avatar w:72 alt:头像]

4 [/col]

5 [col span:4]

6 [img s:https://picsum.photos/seed/tokui1/200/120 v:rounded w:200 alt:圆角图]

7 [/col]

8 [col span:4]

9 [img s:https://picsum.photos/seed/tokui2/200/120 v:bordered w:200 alt:边框图]

10 [/col]

11[/row]

加载 TokUI…

TokUI DSL · 左代码右渲染

imgs 多图：s 用逗号分隔多个 URL，自动排成 1~9 宫格。

1[imgs s:"https://picsum.photos/seed/a/200,https://picsum.photos/seed/b/200,https://picsum.photos/seed/c/200,https://picsum.photos/seed/d/200"]

加载 TokUI…

TokUI DSL · 左代码右渲染

按钮 `btn` / 按钮组 `btngroup`

btn 自闭合，最常用交互组件。btngroup 容器包裹一组按钮。

属性	含义	示例
`tx`	文本	`tx:提交`
`clk`	点击处理器名	`clk:onSave`
`sub`	表单提交处理器名（内置 submit 动作）	`sub:onSubmit`
`reset`	重置绑定表单（内置 reset 动作，裸写或 `reset:H` 回调）	`reset`
`print`	打印目标区域（内置 print 动作，`print:ID` / `print:self`）	`print:invoice`
`form`	显式绑定表单 ID（按钮在表单外时用）	`form:loginForm`
`dis`	禁用	`dis`
`w`	宽度	`w:200`
`bg` / `fc`	背景色 / 文字色	`bg:4f46e5`
`v`	变体（类型/尺寸/形状）	`v:"primary,pill"`

内置动作：sub / reset / print 由 renderer 自动解析，无需 registerHandler（仅 sub 的业务回调仍需注册）。优先级 print > reset > submit > clk。详见表单组件 · 表单动作与打印区。

类型变体：primary / danger / success / warning / ghost。 尺寸/形状变体：sm / lg / pill（圆角）/ square（直角）/ block（块级宽）。

1[btngroup]

2 [btn tx:主要 v:primary]

3 [btn tx:成功 v:success]

4 [btn tx:警告 v:warning]

5 [btn tx:危险 v:danger]

6 [btn tx:幽灵 v:ghost]

7[/btngroup]

8[p v:muted]

9[btn tx:小 v:"primary,sm"]

10[btn tx:默认 v:primary]

11[btn tx:大 v:"primary,lg"]

12[btn tx:块级 v:"primary,block" tx:占满整行]

13[/p]

14[p v:muted]

15[btn tx:圆角 v:"primary,pill"]

16[btn tx:直角 v:"primary,square"]

17[btn tx:禁用 v:primary dis]

18[/p]

加载 TokUI…

TokUI DSL · 左代码右渲染

clk: / sub: 指向的处理器需通过 TokUI.registerHandler(name, fn) 预先注册，DSL 本身不含可执行代码。

标签 `tag`

标记与分类，自闭合。

属性	含义	示例
`tx`	文本	`tx:新功能`
`t`	类型/颜色	`t:danger`
`s`	尺寸	`s:sm`
`round`	圆角	`round`
`closable`	可关闭	`closable`
`bordered`	描边	`bordered`

1[tag tx:新功能 v:primary round]

2[tag tx:热门 t:danger]

3[tag tx:推荐 t:success bordered]

4[tag tx:默认]

5[tag tx:可关闭 t:warning closable]

6[tag tx:小尺寸 s:sm]

加载 TokUI…

TokUI DSL · 左代码右渲染

提示框 `callout`

带图标的信息提示，自闭合。

属性	含义	示例
`t`	类型	`t:success`
`tt`	标题	`tt:操作成功`
`tx`	正文	`tx:已保存`

类型：info / success / warning / error / tip。

1[callout t:info tt:信息提示]

2这是一条普通信息提示。

3[/callout]

4[callout t:success tt:操作成功]

5数据已成功保存。

6[/callout]

7[callout t:warning tt:请注意]

8该操作不可撤销。

9[/callout]

10[callout t:error tt:发生错误]

11请求失败，请稍后重试。

12[/callout]

加载 TokUI…

TokUI DSL · 左代码右渲染

状态点 `dot`

状态指示器，自闭合。

属性	含义	示例
`t`	状态类型	`t:success`
`tx`	文本	`tx:运行中`
`s`	尺寸	`s:lg`
`pulse`	脉冲动画	`pulse`

1[dot t:success tx:在线 pulse]

2[dot t:warning tx:忙碌]

3[dot t:danger tx:离线]

4[dot tx:默认 s:lg]

加载 TokUI…

TokUI DSL · 左代码右渲染

徽标 `badge` / `badge-box`

badge 数字/小红点徽标（自闭合），包裹子元素。badge-box 容器，给子元素加角标。

属性	含义	适用
`count`	数字（`parseInt` 截断小数，版本号/小数请用 `tx`）	两者
`dot`	小红点	两者
`tx`	文本徽标	两者（`badge-box` 兼容旧写法 `label`，推荐 `tx`）
`t`	状态色（default/primary/success/warning/error）	两者
`overflow`	数字溢出显示（如 99+）	两者
`pill`	胶囊圆角	`badge`
`size`	尺寸（sm/lg）	`badge`
`title`	悬停提示	`badge`

1[badge count:5]

2[btn tx:消息 v:ghost]

3[/badge]

4[badge count:99]

5[btn tx:通知 v:ghost]

6[/badge]

7[badge dot]

8[btn tx:待办 v:ghost]

9[/badge]

加载 TokUI…

TokUI DSL · 左代码右渲染

标题加徽标有两种写法（h3 是自闭合组件，禁止 [h3 文本 [badge]] 嵌套）：

并排 pill（标题旁标签，如版本号/状态）：用 row v:inline（flex 模式）托管 h3 + badge。必须 v:inline——默认 row 是 12 列 grid，直接放标题会被挤窄换行。
右上角角标（贴角，如未读/红点）：用 badge-box 包裹 h3。

1[row v:inline]

2 [h3 SaaS Pro]

3 [badge tx:v2.4 pill t:primary]

4[/row]

加载 TokUI…

TokUI DSL · 左代码右渲染

1[badge-box tx:v2.4 t:primary]

2 [h3 SaaS Pro]

3[/badge-box]

加载 TokUI…

TokUI DSL · 左代码右渲染

进度条 `progress`

自闭合。v 当前值（0-100）。

属性	含义	示例
`v`	当前值	`v:60`
`l`	标签	`l:下载中`
`t`	形态	`t:circle`
`stripe`	斑马纹	`stripe`
`status`	状态色	`status:success`

形态：line（默认）/ circle（环形）/ span（内联）。

1[progress v:30 l:下载中]

2[progress v:65 l:处理中 stripe]

3[progress v:100 status:success l:完成]

4[row]

5 [col span:4]

6 [progress t:circle v:75]

7 [/col]

8[/row]

加载 TokUI…

TokUI DSL · 左代码右渲染

统计 `stat`

数据展示卡片，自闭合。

属性	含义	示例
`tt`	标签	`tt:今日访问`
`v`	数值	`v:12345`
`pre` / `suf`	前缀 / 后缀	`suf:%`
`trend`	趋势	`trend:up`
`dec`	小数位	`dec:1`
`anim`	数字动画	`anim`

1[row]

2 [col span:6]

3 [stat tt:今日访问 v:12834 trend:up]

4 [/col]

5 [col span:6]

6 [stat tt:转化率 v:3.2 suf:% trend:down dec:1]

7 [/col]

8[/row]

9[row]

10 [col span:6]

11 [stat tt:营收 pre:¥ v:98210 trend:up]

12 [/col]

13 [col span:6]

14 [stat tt:退款 v:12 suf:笔 trend:down]

15 [/col]

16[/row]

加载 TokUI…

TokUI DSL · 左代码右渲染

倒计时 `countdown`

自闭合。target 目标时间戳或 dur 倒计时秒数。

属性	含义	示例
`target`	目标时间	`target:2026-12-31`
`dur`	持续秒数	`dur:3600`
`fmt`	格式	`fmt:dd天hh:mm:ss`
`tx`	结束文案	`tx:已结束`

1[callout t:info tt:秒杀倒计时]

2[countdown dur:86400 fmt:hh:mm:ss tx:活动已结束]

3[/callout]

加载 TokUI…

TokUI DSL · 左代码右渲染

加载 `spin` / 骨架 `skeleton` / 闪光 `shimmer`

spin 加载指示器、skeleton 骨架屏、shimmer 闪光占位，均自闭合。

属性	含义	适用
`t`	类型	三者
`s`	尺寸	`spin`
`tx`	文本	`spin`
`rows`	行数	`skeleton` / `shimmer`

1[row]

2 [col span:4]

3 [spin t:spinner tx:加载中…]

4 [/col]

5 [col span:4]

6 [spin t:dots]

7 [/col]

8 [col span:4]

9 [spin t:pulse s:lg]

10 [/col]

11[/row]

12[skeleton t:card rows:3]

13[shimmer t:text rows:2]

加载 TokUI…

TokUI DSL · 左代码右渲染

空状态 `empty` / 结果页 `result`

empty 无数据占位、result 操作结果页，均自闭合。

属性	含义	适用
`tx`	描述文本	两者
`icon`	图标	`empty`
`t`	类型	`result`
`tt`	标题	`result`

result 类型：success / error / warning / info。

1[row]

2 [col span:6]

3 [card tt:空状态]

4 [empty tx:暂无数据]

5 [/card]

6 [/col]

7 [col span:6]

8 [card tt:结果页]

9 [result t:success tt:提交成功 tx:我们将在 3 个工作日内审核]

10 [/card]

11 [/col]

12[/row]

加载 TokUI…

TokUI DSL · 左代码右渲染

复制 `copy`

一键复制按钮，自闭合。id 指向要复制的目标元素 ID，或复制 tx 文本。

属性	含义	示例
`id`	目标元素 ID	`id:codeBlock`
`tx`	按钮文本	`tx:复制`
`tt`	成功提示	`tt:已复制`

1[p v:muted v:bold id:copyTarget 这段文字可以被一键复制。]

2[copy id:copyTarget tx:复制这段 tt:已复制到剪贴板]

加载 TokUI…

TokUI DSL · 左代码右渲染

Markdown `md`

Markdown 渲染容器。支持标题、列表、引用、代码、表格、链接等常用语法。

1[md]

2 ## Markdown 渲染支持 **加粗**、*斜体*、`行内代码`、

3 [链接]

4 (#)。- 无序列表项一- 无序列表项二> 引用块文字。

5[/md]

加载 TokUI…

TokUI DSL · 左代码右渲染

代码块 `code`

语法高亮代码块容器。lang 指定语言，零依赖内置 11 种语言着色：js / ts / python / java / go / rust / sql / html / css / json / bash。

属性	含义	示例
`lang`	语言	`lang:js`
`tx`	标题（文件名）	`tx:app.js`

1[code lang:js]

2 function greet(name) {\n return `Hello, ${name}!`;\n}\nconsole.log(greet("TokUI"));

3[/code]

加载 TokUI…

TokUI DSL · 左代码右渲染

1[code lang:python]

2 def fib(n):\n a, b = 0, 1\n for _ in range(n):\n a, b = b, a + b\n return a\n\nprint(fib(10))

3[/code]

加载 TokUI…

TokUI DSL · 左代码右渲染

代码内容中的换行用 \n 表示。完整属性表见 DSL 语法。

基础组件 ​

标题 h1 ~ h6 ​

段落 p ​

链接 a ​

分割线 hr / dv ​

图片 img / 多图 imgs ​

按钮 btn / 按钮组 btngroup ​

标签 tag ​

提示框 callout ​

状态点 dot ​

徽标 badge / badge-box ​

进度条 progress ​

统计 stat ​

倒计时 countdown ​

加载 spin / 骨架 skeleton / 闪光 shimmer ​

空状态 empty / 结果页 result ​

复制 copy ​

Markdown md ​

代码块 code ​

基础组件

标题 `h1` ~ `h6`

段落 `p`

链接 `a`

分割线 `hr` / `dv`

图片 `img` / 多图 `imgs`

按钮 `btn` / 按钮组 `btngroup`

标签 `tag`

提示框 `callout`

状态点 `dot`

徽标 `badge` / `badge-box`

进度条 `progress`

统计 `stat`

倒计时 `countdown`

加载 `spin` / 骨架 `skeleton` / 闪光 `shimmer`

空状态 `empty` / 结果页 `result`

复制 `copy`

Markdown `md`

代码块 `code`