Skip to content

布局组件 ​

卡片、栅格、列表、标签页、折叠、对话框、抽屉、时间轴、步骤条、轮播、树、菜单等容器型布局组件。容器组件需用 [/type] 闭合,左侧为格式化的 TokUI DSL,右侧为实时渲染,点「编辑」可即时改动。

卡片 card / 页脚 ft ​

card 通用内容容器,tt 出标题、tx 直接写正文(自闭合模式),主体内容由子节点填充。ft 作为 card 的子容器,自动落到卡片底部作页脚。

属性含义适用示例
tt标题cardtt:用户信息
tx自闭合正文cardtx:一段说明
hc标题色(预设或色值)cardhc:primary
ht标题装饰样式cardht:underline
w宽度cardw:320
v变体cardv:highlight
v对齐ftv:right

card 变体:highlight(高亮边)、flat(扁平无阴影)、bordered(描边)、center / right(标题对齐)。 ht 标题装饰:fill(浅主色底填充)、accent(左侧色条)、underline(下划线)、dot(前缀圆点)、pill(浅底胶囊)。fill/pill 为「10% 主色浅底 + 主色文字」柔和配色,hc 自定义色同样自动浅化。 ft 变体:left / center / right。

1[row]
2 [col span:6]
3 [card tt:基础卡片]
4 [p 这是基础卡片,承载正文与子组件。]
5 [/card]
6 [/col]
7 [col span:6]
8 [card tt:高亮卡片 v:highlight ht:underline hc:primary]
9 [p 带下划线标题的高亮卡片。]
10 [/card]
11 [/col]
12[/row]
13[card tt:带页脚的卡片 hc:danger ht:accent]
14 [p 主体内容:把操作按钮放进页脚区。]
15 [ft v:right]
16 [btn tx:取消]
17 [btn tx:确定 v:primary]
18 [/ft]
19[/card]
加载 TokUI…
TokUI DSL · 左代码右渲染

栅格 row / col ​

基于 12 栅格系统的响应式布局。row 容器行,col 列,span 指定列宽(1-12)。

属性含义适用示例
v对齐方式rowv:center
gutter列/行统一间距(数字按 px 或 CSS 长度)rowgutter:16
gy行间距(单独覆盖行向间距)rowgy:8
span列宽(1-12)colspan:4
offset左侧空出的列数(1-11,offset+span 钳制不超 12)coloffset:2
rspan行跨(1-12),配合多行 row 跨行colrspan:2

row 变体:left / center / right(水平对齐)、inline(行内排列)。

1[row]
2 [col span:4]
3 [callout t:info]
4 span:4
5 [/callout]
6[/col]
7[col span:4]
8 [callout t:success]
9 span:4
10[/callout]
11[/col]
12[col span:4]
13 [callout t:warning]
14 span:4
15[/callout]
16[/col]
17[/row]
18[row]
19 [col span:6]
20 [callout t:info]
21 span:6
22 [/callout]
23[/col]
24[col span:3]
25 [callout t:tip]
26 span:3
27[/callout]
28[/col]
29[col span:3]
30 [callout t:tip]
31 span:3
32[/callout]
33[/col]
34[/row]
加载 TokUI…
TokUI DSL · 左代码右渲染
1[row gutter:16 gy:12]
2 [col span:4]
3 [callout t:info]
4 gutter:16
5 [/callout]
6[/col]
7[col span:4 offset:2]
8 [callout t:success]
9 span:4 offset:2
10[/callout]
11[/col]
12[col span:2]
13 [callout t:tip]
14 span:2
15[/callout]
16[/col]
17[/row]
加载 TokUI…
TokUI DSL · 左代码右渲染

高级网格 grid / cell ​

显式二维网格,与 12 栅格的 row/col 并行:grid 声明轨道与模板区域,cell 作为子项落位(可装任意组件)。选型规则:一维并排均分用 row/col;二维不对称、区域命名、固定+弹性混合轨道、跨行跨列、整页骨架用 grid/cell。

grid 属性:

属性含义示例
cols列轨道:纯数字 N(1-24) → repeat(N,1fr);auto:180px → auto-fill 自适应列;或空格分隔显式轨道列表cols:"200px 1fr 1fr"
rows行轨道,语法同 cols,可省rows:"64px 1fr"
areas模板区域:| 分行、空格分列、. 空位(区名限 [a-zA-Z][a-zA-Z0-9_-]*)areas:"nav main|nav aside"
gap / gx / gy间距 / 列间距 / 行间距(纯数字按 px,或 CSS 长度)gap:12
h / minh高度 / 最小高度(纯数字按 px)h:480
v变体:dense(grid-auto-flow:dense 自动填坑)、flush(零间距)v:dense
theme子树级主题:dark/modern/modern-dark/default,落 data-tokui-theme 到该元素,自身及后代令牌(stat/chart/btn 等)全部跟随。grid/cell/card 均支持theme:dark

轨道 token 白名单:长度(px/%/em/rem/vw/vh)、Nfr、auto、min-content、max-content、minmax(a,b)、fit-content(len)。所有值白名单校验,任一非法则该属性整体不输出(防样式注入)。

⚠️ 固定轨道溢出:rows/h 定死轨道后,内容超高不会撑开行轨,会溢出盖住相邻区域。chart 的 h 只是 viewBox 高度,SVG 按宽度 100% 等比缩放,宽 cell 内实际渲染会更高。内容高度不确定时省略 rows 用自动行,h 只用于确知内容高度的骨架(如车机 HMI)。薄轨(<100px,如顶栏/Dock)内不要放 card(卡壳 header+padding 就 ~110px),用裸 p/btngroup;cell 内独生子女(:only-child)会自动撑满 cell 高度。

cell 属性:

属性含义示例
area模板区域名(对应 grid 的 areas)area:nav
c列跨 N(1-24) 或 "start/end" 起止线c:2、c:"1/3"
r行跨 N(1-24)r:2
align / justify单元格内容对齐(start/center/end/stretch)align:center

圣杯布局(areas 区域命名,头脚通栏、nav 通高):

1[grid cols:"160px 1fr 160px" rows:"56px 1fr 48px" gap:8 h:360 areas:"hd hd hd|nav main aside|ft ft ft"]
2[cell area:hd]
3[callout t:info]
4头部 hd
5[/callout]
6[/cell]
7[cell area:nav]
8[callout t:tip]
9导航 nav
10[/callout]
11[/cell]
12[cell area:main]
13[callout t:success]
14主区 main
15[/callout]
16[/cell]
17[cell area:aside]
18[callout t:warning]
19侧栏 aside
20[/callout]
21[/cell]
22[cell area:ft]
23[callout t:info]
24页脚 ft
25[/callout]
26[/cell]
27[/grid]
加载 TokUI…
TokUI DSL · 左代码右渲染

监控大屏(c/r 行列混跨,无需 areas):

1[grid cols:4 rows:2 gap:8 h:320]
2[cell c:2 r:2]
3[card tt:实时流量]
4 [chart t:line area smooth l:"00:00,04:00,08:00,12:00,16:00,20:00" d:"120,240,180,320,560,480"]
5[/card]
6[/cell]
7[cell c:2]
8[card tt:资源水位]
9 [stat tt:CPU v:62 suf:% trend:up]
10 [stat tt:内存 v:71 suf:%]
11[/card]
12[/cell]
13[cell]
14[card tt:磁盘]
15 [stat v:48 suf:%]
16[/card]
17[/cell]
18[cell]
19[card tt:在线节点]
20 [stat v:128]
21[/card]
22[/cell]
23[/grid]
加载 TokUI…
TokUI DSL · 左代码右渲染

auto-fill 卡片墙(随容器宽度自动列数;无需跨区/跨行列时子组件可直接作 grid 子项,不必包 cell):

1[grid cols:"auto:150px" gap:12]
2[card tt:Alpha tx:自动填满整行]
3[card tt:Beta tx:每张最小 150px]
4[card tt:Gamma tx:无需媒体查询]
5[card tt:Delta tx:宽度自适应]
6[card tt:Epsilon tx:响应式卡片墙]
7[card tt:Zeta tx:auto-fill 轨道]
8[/grid]
加载 TokUI…
TokUI DSL · 左代码右渲染

车机 HMI(混合轨道 + 区域命名 + dense 填坑):

1[grid cols:"96px 1fr 1fr" rows:"1fr 1fr 64px" gap:10 h:380 v:dense areas:"nav media media|nav climate seat|bar bar bar"]
2[cell area:nav]
3[card tt:导航]
4 [list]
5 [item 地图]
6 [item 音乐]
7 [item 电话]
8 [/list]
9[/card]
10[/cell]
11[cell area:media]
12[card tt:媒体]
13 [p 正在播放:星际穿越 原声]
14[/card]
15[/cell]
16[cell area:climate]
17[card tt:空调]
18 [stat v:22 suf:°C]
19[/card]
20[/cell]
21[cell area:seat]
22[card tt:座椅]
23 [stat v:加热·二档]
24[/card]
25[/cell]
26[cell area:bar]
27[card tt:状态栏 tx:车速 60 km/h · 续航 320 km]
28[/card]
29[/cell]
30[/grid]
加载 TokUI…
TokUI DSL · 左代码右渲染

列表 list / item ​

列表容器,list 默认无序(ul),t:ol 切换有序列表(ol)。item 列表项(<li> 语义),文本写标签内,可嵌套子 list,plain 隐藏前缀。

属性含义适用示例
t列表类型listt:ol
plain去除序号/圆点listplain
tx项文本itemtx:第一项
1[row]
2 [col span:6]
3 [p v:bold 无序列表]
4 [list]
5 [item 第一项内容]
6 [item 第二项内容]
7 [item 第三项内容]
8 [/list]
9 [/col]
10 [col span:6]
11 [p v:bold 有序列表]
12 [list t:ol]
13 [item 步骤一]
14 [item 步骤二]
15 [item 步骤三]
16 [/list]
17 [/col]
18[/row]
19[p v:bold 嵌套列表]
20[list]
21 [item 主分类一[list]
22 [item 子项 A]
23 [item 子项 B]
24[/list]
25]
26[item 主分类二]
27[/list]
加载 TokUI…
TokUI DSL · 左代码右渲染

标签页 tabs / tab ​

tabs 容器包裹多个 tab,tt 为每个标签页的导航标题,纯 CSS 切换。支持键盘左右箭头导航。

属性含义适用示例
tt标签页标题tabtt:详情
1[tabs]
2 [tab tt:概览]
3 [p 这是概览页内容。]
4 [/tab]
5 [tab tt:详情]
6 [p 这是详情页内容,可放任意子组件。]
7 [stat tt:访问量 v:1024 trend:up]
8 [/tab]
9 [tab tt:设置]
10 [p 设置项放在这里。]
11 [/tab]
12[/tabs]
加载 TokUI…
TokUI DSL · 左代码右渲染

切页回调:tabs 声明 on:"change:h" 后,用户切页上报 {index, title};程序化 upd 切换不触发。

手风琴 accordion / 折叠面板 collapse ​

accordion 容器包裹多个 collapse,每个 collapse 独立可折叠。tt 标题、open 默认展开。

属性含义适用示例
tt标题collapsett:第一章
open默认展开collapseopen
id标识collapseid:sec1
1[accordion]
2 [collapse tt:什么是 TokUI? open]
3 [p TokUI 是零依赖的流式 UI 描述与渲染框架。]
4 [/collapse]
5 [collapse tt:核心特性]
6 [p 流式增量解析、纯原生 DOM、零外部依赖。]
7 [/collapse]
8 [collapse tt:适用场景]
9 [p AI 对话中的流式 UI 生成、低代码可视化搭建。]
10 [/collapse]
11[/accordion]
加载 TokUI…
TokUI DSL · 左代码右渲染

对话框 dialog ​

原生 <dialog> 元素实现,遮罩层 + 居中模态框,Esc / 点击遮罩 / 关闭按钮均可关闭。

属性含义示例
tt标题tt:确认操作
id标识(触发按钮 data-target 指向它)id:myDialog
clk关联处理器名clk:openDialog
w弹窗宽度 px(480~1200 才生效,落 max-width;默认 480)——编辑表单(cols:2/transfer)等宽内容用 w:720w:720

由按钮触发:触发按钮写 clk:openDialog data-target:"<dialog 的 id>",对应 [dialog id:...] 必须带相同 id。点击按钮调用内置 openDialog 处理器按 id 找到 dialog 并 showModal() 弹出;弹窗内的取消/确认按钮写 clk:closeDialog 自动收起所在弹窗(无需手写 id)。

关闭回调:声明 on:"close:h" 后,用户关闭路径(Esc / 遮罩 / ✕)都会上报,detail 为 {};程序化 [upd id:x act:close] 不上报(防回环)。

1[row]
2 [col span:6]
3 [btn tx:点击打开对话框 v:primary clk:openDialog data-target:demoDialog]
4 [dialog tt:用户协议 id:demoDialog]
5 [p 请仔细阅读以下协议内容,勾选同意后即可继续。]
6 [p v:muted 点击「同意并继续」或 ✕ / 遮罩可关闭对话框。]
7 [ft v:right]
8 [btn tx:取消 clk:closeDialog]
9 [btn tx:同意并继续 v:primary clk:closeDialog]
10 [/ft]
11 [/dialog]
12 [/col]
13[/row]
加载 TokUI…
TokUI DSL · 左代码右渲染

抽屉 drawer ​

侧边滑出的面板,pos 控制弹出方向,左右用 w 控宽、上下用 h 控高。Esc / 遮罩 / 关闭按钮均可关闭。

属性含义示例
tt标题tt:筛选条件
pos位置(left/right/top/bottom,默认 right)pos:left
w宽度(左右抽屉,默认 360px)w:420
h高度(上下抽屉,默认 300px)h:260
id标识(触发按钮 data-target 指向它)id:myDrawer
clk关联处理器名clk:openDrawer

pos 变体:left / right / top / bottom。

由按钮触发:触发按钮写 clk:openDrawer data-target:"<drawer 的 id>",对应 [drawer id:...] 必须带相同 id。点击按钮调用内置 openDrawer 处理器按 id 找到 drawer 并添加 tokui-drawer--open 类滑出;抽屉内取消/确认按钮写 clk:closeDrawer 自动收起。

关闭回调:声明 on:"close:h" 后,用户关闭路径(Esc / 遮罩 / ✕)都会上报,detail 为 {};程序化 [upd id:x act:close] 不上报(防回环)。

1[btn tx:打开筛选抽屉 clk:openDrawer v:primary data-target:demoDrawer]
2[drawer tt:筛选条件 pos:right w:360 id:demoDrawer]
3 [p 在这里放置筛选表单或详情内容,Esc / 遮罩 / ✕ 可关闭。]
4 [ft v:right]
5 [btn tx:取消 clk:closeDrawer]
6 [btn tx:应用 v:primary clk:closeDrawer]
7 [/ft]
8[/drawer]
加载 TokUI…
TokUI DSL · 左代码右渲染

时间轴 timeline / ti ​

timeline 容器,ti 单条记录。tm 时间戳、tt 标题、t 状态色(primary/success/warning/error/info),正文写标签内。

属性含义适用示例
v布局(h/alternate/card)timelinev:alternate
tm时间戳titm:2026-06-01
tt标题titt:提交申请
t状态色tit:success

timeline 变体:h / horizontal(水平)、alternate / alt(交替左右)、card(卡片样式)。

1[timeline]
2 [ti tm:2026-06-01 09:00 tt:创建订单 t:primary 用户下单成功]
3 [ti tm:2026-06-01 10:30 tt:支付完成 t:success 已收到款项]
4 [ti tm:2026-06-02 08:00 tt:商家发货 t:warning 商品已出库]
5 [ti tm:2026-06-03 14:00 tt:签收确认 t:info 用户确认收货]
6[/timeline]
加载 TokUI…
TokUI DSL · 左代码右渲染

步骤条 steps / step ​

横向流程指示,v 指定当前步序(1-based),vd:vertical 切换竖向,s:sm 缩小尺寸。step 子项的 status:error 标记错误态。

属性含义适用示例
v当前步骤(1-based)stepsv:2
vd方向(horizontal/vertical)stepsvd:vertical
s尺寸stepss:sm
tt步骤标题steptt:填写信息
status单步状态stepstatus:error
1[steps v:3]
2 [step tt:填写信息 基本信息]
3 [step tt:身份验证 完成实名认证]
4 [step tt:设置支付 配置支付方式]
5 [step tt:完成注册 激活账号]
6[/steps]
加载 TokUI…
TokUI DSL · 左代码右渲染

可点击步骤:steps 声明 on:"change:h" 后步骤变为可点击,点击上报 {index, title}。

carousel 容器,子项为 carousel-item(或直接 img)。carousel 的子项也可写 [item]——在 carousel 内自动按幻灯片渲染(与 list/desc 内的 [item] 同名不同义,按父级区分;item 与 carousel-item 等价,可混用)。auto 设置自动播放间隔(毫秒),支持左右箭头、指示点、拖动、键盘左右键切换。thumb 改用下方缩略图图例(替代指示点,点击丝滑跳转)。尺寸:w 宽、h 高(纯数字按 px,亦支持 %/vw/rem),或 ratio 宽高比(如 16:9 / 4:3 / 1);设了 h 或 ratio 时幻灯片撑满高度、图片 object-fit:cover 裁切,h 优先于 ratio。

属性含义适用示例
auto自动播放间隔(ms)carouselauto:3000
id标识carouselid:myCarousel
thumb显示缩略图图例(替代指示点)carouselthumb
w宽度(纯数字→px,或 %/vw/rem)carouselw:480 / w:100%
h高度(px,优先于 ratio)carouselh:240
ratio宽高比(16:9 / 4:3 / 1)carouselratio:16:9
s图片地址carousel-item / items:https://...
tt幻灯片标题carousel-item / itemtt:第一张
tx幻灯片描述carousel-item / itemtx:说明文字
1[carousel auto:4000]
2 [item s:https://picsum.photos/seed/c1/600/280 tt:第一张 tx:用 item 声明]
3 [carousel-item s:https://picsum.photos/seed/c2/600/280 tt:第二张 tx:两种可混用]
4 [item s:https://picsum.photos/seed/c3/600/280 tt:第三张 tx:等价于 carousel-item]
5[/carousel]
加载 TokUI…
TokUI DSL · 左代码右渲染

切换上报:声明 on:"change:h" 后,手动切换(箭头 / 指示点 / 拖动 / 键盘)上报 {index};autoplay 自动播放不触发。

固定尺寸(h)/ 比例尺寸(ratio)/ 缩略图图例(thumb):

1[row]
2 [col span:6]
3 [carousel h:200]
4 [carousel-item s:https://picsum.photos/seed/cs1/600/300 tt:固定高 200px]
5 [/carousel]
6 [/col]
7 [col span:6]
8 [carousel ratio:16:9]
9 [carousel-item s:https://picsum.photos/seed/cs2/600/338 tt:16:9 比例]
10 [/carousel]
11 [/col]
12[/row]
加载 TokUI…
TokUI DSL · 左代码右渲染
1[carousel thumb ratio:21:9]
2 [carousel-item s:https://picsum.photos/seed/ct1/800/343 tt:日出]
3 [carousel-item s:https://picsum.photos/seed/ct2/800/343 tt:正午]
4 [carousel-item s:https://picsum.photos/seed/ct3/800/343 tt:黄昏]
5 [carousel-item s:https://picsum.photos/seed/ct4/800/343 tt:夜晚]
6[/carousel]
加载 TokUI…
TokUI DSL · 左代码右渲染

树 tree / tn ​

tree 容器,子节点 tn 可递归嵌套。tn 的 leaf 标记叶节点、open 默认展开、chk 选中、dis 禁用。tree 的 chk 开启复选框模式。

属性含义适用示例
l字段标签treel:目录
clk选中回调treeclk:onPick
chk复选框模式treechk
dis整树禁用treedis
v / tx值 / 显示文本tntx:src
leaf叶节点tnleaf
open默认展开tnopen
chk / dis选中 / 禁用tnchk
load懒加载数据 handlertnload:loadChildren
1[tree l:项目结构]
2 [tn tx:src open]
3 [tn tx:components leaf]
4 [tn tx:core leaf]
5 [tn tx:styles leaf]
6 [/tn]
7 [tn tx:tests open]
8 [tn tx:test-parser.js leaf]
9 [tn tx:test-renderer.js leaf]
10 [/tn]
11 [tn tx:package.json leaf]
12[/tree]
加载 TokUI…
TokUI DSL · 左代码右渲染

选中与复选上报:声明 on:"change:h" 后选中节点上报 {value, id};复选框模式(chk)下声明 on:"check:h",复选变化上报 {value: 选中值数组}。

懒加载(load):tn 声明 load:数据handler名 后,首次展开该节点调用 fn({id, value})(返回子节点对象数组或 Promise),展开时显示 loading 态;已加载的节点不重复请求,返回的子节点可继续带 load 递归懒加载。加载完成上报 load 事件 {value, count}。

菜单 menu / menu-item ​

menu 容器,menu-item 自闭合。v 切换方向(vertical 默认 / horizontal 横向 / inline 内联),act 默认激活项的 clk 值,bg/fc 自定义配色。

属性含义适用示例
v方向变体menuv:horizontal
act默认激活项 clkmenuact:goHome
bg / fc背景 / 文字色menubg:1f2937
tx文字menu-itemtx:首页
clk点击处理器menu-itemclk:goHome
i图标字符menu-itemi:🏠
dis禁用menu-itemdis
1[row]
2 [col span:6]
3 [p v:bold 竖向菜单]
4 [menu act:goHome]
5 [menu-item tx:首页 i:🏠 clk:goHome]
6 [menu-item tx:产品 i:📦 clk:goProduct]
7 [menu-item tx:文档 i:📖 clk:goDocs]
8 [menu-item tx:设置 i:⚙️ dis]
9 [/menu]
10 [/col]
11 [col span:6]
12 [p v:bold 横向菜单]
13 [menu v:horizontal]
14 [menu-item tx:概览 clk:go1]
15 [menu-item tx:分析 clk:go2]
16 [menu-item tx:报告 clk:go3]
17 [/menu]
18 [/col]
19[/row]
加载 TokUI…
TokUI DSL · 左代码右渲染

激活回调与程序化激活:menu 声明 on:"change:h" 后,激活项变化上报 {value}(项标识取 id > v > 文本);服务端可用 [upd id:m act:activate v:标识] 程序化激活菜单项。

可调面板 resizable ​

双面板可拖拽分隔条,dir 控制方向,min/max/default 限制第一面板尺寸。第一个子节点进第一面板,其余进第二面板。支持键盘箭头微调。

属性含义示例
dir方向(h 横向默认 / v 纵向)dir:v
min最小尺寸(px)min:120
max最大尺寸(px)max:600
default初始尺寸(px)default:240
w整体宽度w:100%

横向 · 侧边导航 + 主内容 — 最常见的 IDE / 后台布局:左栏定宽可拖宽,右栏吃满剩余空间。

1[resizable dir:h min:140 max:320 default:200]
2 [menu]
3 [menu-item tx:首页 i:🏠]
4 [menu-item tx:产品 i:📦]
5 [menu-item tx:订单 i:📋]
6 [menu-item tx:设置 i:⚙️ dis]
7 [/menu]
8 [card tt:主内容区]
9 [p v:muted 左侧导航可拖宽,右侧自适应剩余空间。]
10 [p 常见于 IDE、后台管理、邮件客户端布局。]
11 [/card]
12[/resizable]
加载 TokUI…
TokUI DSL · 左代码右渲染

纵向 · 编辑器 + 终端 — dir:v 上下分割:上方代码 / 预览,下方日志 / 控制台。

1[resizable dir:v min:80 max:240 default:140]
2 [code lang:js]
3 const greet = name => "Hello, " + name;\nconsole.log(greet("TokUI"));
4 [/code]
5 [terminal status:success]
6 $ npm run dev\n✓ ready on http://localhost:3109
7 [/terminal]
8[/resizable]
加载 TokUI…
TokUI DSL · 左代码右渲染

嵌套 · 三栏工作台 — resizable 可嵌套:外层横向分左右,右栏内再纵向分上下,构成三区域。

1[resizable dir:h min:120 max:260 default:160]
2 [card tt:文件树]
3 [list]
4 [item src/]
5 [item components/]
6 [item core/]
7 [item styles/]
8 [/list]
9 [/card]
10 [resizable dir:v min:60 max:200 default:120]
11 [card tt:预览]
12 [p v:muted 上层:渲染结果或文档。]
13 [/card]
14 [card tt:控制台]
15 [terminal]
16 $ build ok\n✓ dist/tokui.umd.js
17 [/terminal]
18 [/card]
19 [/resizable]
20[/resizable]
加载 TokUI…
TokUI DSL · 左代码右渲染

紧约束 · 浮动徽标条 — min 接近 max 时第一面板尺寸几乎固定,仅留微调余量。

1[resizable dir:h min:120 max:160 default:140]
2 [callout t:info]
3 固定栏(120–160px)
4[/callout]
5[callout t:success]
6自适应区:拖动范围被紧约束,常用于侧边徽标 / 工具条。
7[/callout]
8[/resizable]
加载 TokUI…
TokUI DSL · 左代码右渲染

滚动区域 scroll-area ​

通用滚动容器:固定尺寸(h/w)或占满父级(h:100%,宽度缺省 100%),可包裹任意布局与组件。视口 overflow:auto 双向按需出现滚动条——内容超宽出横向、超高出纵向、不超不出。

滚动条交互:默认隐藏不占视觉焦点,三种方式浮现——鼠标悬停容器、滚动进行中(停止约 0.8s 后淡出)、键盘聚焦(tabindex=0 方向键滚动,WCAG 2.1.1)。颜色走 --tokui-scrollbar-* 主题令牌,四主题 + seed 动态色阶自动适配,thumb 悬停再加深一档。

属性含义示例
h高度(纯数字按 px,亦可 100%/50vh)h:160
w宽度(纯数字按 px,缺省 100%)w:100%
minh / maxh弹性高度:内容少时收缩、多时封顶出滚动minh:120 maxh:400
dir轴向锁定:x 仅横向 / y 仅纵向(缺省双向按需)dir:x
id标识id:myScroll
virtual虚拟滚动(均匀行高模式)virtual
ih行高(px,默认 36)ih:40

变体:v:flush 去视口内边距(嵌表格 / 通栏内容)。

1[scroll-area h:180]
2 [p 第一段:滚动区域内可放任意长内容,超出部分出现滚动条;默认隐藏,悬停或滚动时浮现。]
3 [p 第二段:固定高度 180px,自动纵向滚动。]
4 [p 第三段:常用于侧边栏长列表、聊天记录区、日志面板。]
5 [p 第四段:配合 row/col 可做多栏滚动。]
6 [p 第五段:滚动到底部。]
7[/scroll-area]
加载 TokUI…
TokUI DSL · 左代码右渲染
1[h4 横向锁定 dir:x(标签带)]
2[scroll-area h:80 dir:x]
3 [row v:inline]
4 [tag React]
5 [tag Vue]
6 [tag Svelte]
7 [tag Solid]
8 [tag Angular]
9 [tag Web Components]
10 [tag Qwik]
11 [tag Lit]
12 [tag Alpine]
13 [tag HTMX]
14 [tag Astro]
15 [/row]
16[/scroll-area]
17[h4 弹性高度 minh:80 maxh:140]
18[scroll-area minh:80 maxh:140]
19 [p 内容不足时收缩,超过 maxh 自动封顶出滚动条。]
20 [p 第二行。]
21 [p 第三行。]
22 [p 第四行。]
23 [p 第五行。]
24 [p 第六行。]
25[/scroll-area]
加载 TokUI…
TokUI DSL · 左代码右渲染

虚拟滚动与触底加载:virtual 仅把可视窗口 + buffer 的行挂入 DOM(均匀行高模式,不等高行不适用);滚动到 80% 阈值触底时上报 loadmore 事件(on:"loadmore:h",detail {})——长列表 / 对话历史加载更多用。

侧边栏 sidebar ​

sidebar 容器,子节点为 sidebar-content(主内容区)和 sidebar-footer(页脚区)。collapsible 开启折叠按钮。

属性含义适用示例
w宽度(默认 260)sidebarw:240
pos位置(left/right)sidebarpos:left
collapsible可折叠sidebarcollapsible
tt标题 / Logo 文本sidebartt:控制台
bg / fc背景 / 文字色sidebarbg:111827
1[sidebar tt:控制台 w:240]
2 [sidebar-content]
3 [menu]
4 [menu-item tx:仪表盘 clk:goDash]
5 [menu-item tx:用户管理 clk:goUsers]
6 [menu-item tx:系统设置 clk:goSettings]
7 [/menu]
8 [/sidebar-content]
9 [sidebar-footer]
10 [p v:muted v:sm v:center 当前用户:admin]
11 [/sidebar-footer]
12[/sidebar]
加载 TokUI…
TokUI DSL · 左代码右渲染

折叠上报:collapsible 折叠钮切换时经统一出口上报 toggle 事件 {collapsed}(可用 on:"toggle:h" 声明命名 handler)。

文字提示 tooltip ​

悬浮显示的轻量文字提示,tt 为提示内容、tx 为触发文本、pos 控制方向。鼠标移入即弹出,移出/失焦/Esc 收起。

属性含义示例
tt提示文本tt:这是提示
tx触发文本tx:悬停看我
pos方向(默认 top)pos:bottom

变体:top / bottom / left / right。

1[p]
2[tooltip tt:上方提示 tx:悬停(上) pos:top]
3·
4[tooltip tt:下方提示 tx:悬停(下) pos:bottom]
5·
6[tooltip tt:左侧提示 tx:悬停(左) pos:left]
7·
8[tooltip tt:右侧提示 tx:悬停(右) pos:right]
9[/p]
10[p v:muted 移入触发文本即可看到提示气泡。]
11[/p]
加载 TokUI…
TokUI DSL · 左代码右渲染

气泡卡片 popover ​

比 tooltip 更丰富的弹出卡片,可放标题与任意子节点内容。trig 切换触发方式(click 默认 / hover),pos 控制方向,w 控制面板宽。

属性含义示例
tx触发文本tx:点击查看
tt标题tt:用户信息
pos方向(默认 top)pos:bottom
trig触发方式trig:hover
w面板宽度w:240
1[popover tt:操作菜单 tx:点击展开 pos:bottom w:240 trig:click]
2 [list plain]
3 [item 新建项目]
4 [item 导入数据]
5 [item 导出报表]
6 [/list]
7[/popover]
8[popover tt:悬浮预览 tx:悬停预览 pos:top trig:hover]
9[p 鼠标悬停即可展示富内容。[/popover]
加载 TokUI…
TokUI DSL · 左代码右渲染

悬停卡片 hover-card ​

hover-card 容器,子节点为 hover-trigger(触发区)与 hover-content(弹出内容)。delay 控制显示延迟,pos 控制方向,内容用 position:fixed 定位避免裁切。

属性含义适用示例
pos方向(默认 bottom)hover-cardpos:right
w弹层宽度(px)hover-cardw:280
delay显示延迟(ms,默认 300)hover-carddelay:200
1[hover-card pos:bottom w:240 delay:200]
2 [hover-trigger]
3 [a u:# tx:@TokUI v:underline]
4 [/hover-trigger]
5 [hover-content]
6 [card tt:TokUI]
7 [p v:sm 零依赖的流式 UI 描述与渲染框架。]
8 [tag tx:开源 t:success round]
9 [/card]
10 [/hover-content]
11[/hover-card]
加载 TokUI…
TokUI DSL · 左代码右渲染

确认气泡 popconfirm ​

点击触发后弹出小型确认框,含确定 / 取消按钮。tt 询问文案、tx 触发按钮文字、clk 确定回调、t 确定按钮类型、pos 方向。

属性含义示例
tt询问文案tt:确定删除吗?
tx触发按钮文字tx:删除
clk确定回调clk:onConfirm
t确定按钮类型(默认 primary)t:danger
pos方向(默认 top)pos:right
ok-text / cancel-text按钮文字ok-text:删除
1[p]
2[popconfirm tt:确定要删除这条记录吗? tx:删除 t:danger clk:onDelDelete pos:bottom ok-text:删除]
3[popconfirm tt:确认提交本次表单? tx:提交 clk:onSubmit pos:top]
4[/p]
加载 TokUI…
TokUI DSL · 左代码右渲染

回到顶部 backtop ​

页面或容器滚动超过阈值后浮现的回到顶部按钮。t 设置阈值(默认 200),container 切换为容器内模式,v 控形状。

属性含义示例
t出现阈值(px,默认 200)t:300
v形状(circle / round / square)v:round
tx按钮文字(默认 ↑)tx:顶部
s尺寸s:lg
container容器内模式container
bottom / right距底 / 距右(px)bottom:40

backtop 浮于右下角,滚动后才可见;下例用 callout 说明其行为。

1[callout t:tip tt:回到顶部组件]
2[p [backtop t:200 v:circle tx:↑]
3滚动页面超过 200px 即在右下角出现,点击平滑回到顶部。]
4[/callout]
加载 TokUI…
TokUI DSL · 左代码右渲染

命令面板 command ​

command 容器,子节点为 command-group(分组,tt 标题),其下命令项用 item(或 command-item,两者等价;推荐 item)。内置模糊搜索、键盘上下选择、回车确认。

属性含义适用示例
ph搜索框占位commandph:搜索命令...
clk选中回调commandclk:onCommand
id标识(触发按钮 data-target 指向它)commandid:cmdMain
hotkey启用 Cmd/Ctrl+K 全局快捷键(页面只应一个实例)commandhotkey
tt分组标题command-grouptt:常用
tx显示文本item / command-itemtx:新建文件
v搜索值(默认同 tx)item / command-itemv:new file
clk项回调item / command-itemclk:cmdNew
shortcut快捷键提示item / command-itemshortcut:⌘N

命令面板默认隐藏,由按钮触发:触发按钮写 clk:openCommand data-target:"<command 的 id>",对应 [command id:...] 带相同 id。需要 Cmd/Ctrl+K 时显式写 hotkey(页面只应有一个 hotkey 实例)。 选中命令项时:项级 clk 的 handler 第一参为 { value, text };若 command 根也设了 clk,会再触发一次根级回调,第一参为 { value, text, clk }(clk 为该项的项级回调名)。点击面板空白 / 搜索框不触发任何回调。

1[btn tx:⌘ 打开命令面板 clk:openCommand data-target:demoCmd v:primary]
2[command ph:输入命令或搜索... clk:onCommand id:demoCmd]
3 [command-group tt:常用操作]
4 [item tx:新建文件 clk:cmdNew shortcut:⌘N]
5 [item tx:打开项目 clk:cmdOpen shortcut:⌘O]
6 [item tx:搜索替换 clk:cmdSearch shortcut:⌘F]
7 [/command-group]
8 [command-group tt:导航]
9 [item tx:跳到行 clk:cmdGoto]
10 [item tx:切换主题 clk:cmdTheme]
11 [/command-group]
12[/command]
加载 TokUI…
TokUI DSL · 左代码右渲染

画布面板 canvas ​

canvas 容器,子节点为 canvas-content(内容区)。pos 控制停靠方向、w 控宽、open 默认展开、closable 是否可关闭。

属性含义适用示例
tt标题(默认 Canvas)canvastt:预览
pos位置(left/right,默认 right)canvaspos:right
w宽度(默认 400)canvasw:360
open默认展开canvasopen
closable是否可关闭(默认开)canvasclosable
tx自闭合正文canvastx:简单内容
1[canvas tt:实时预览 pos:right w:340 open]
2 [canvas-content]
3 [p 这是画布面板的内容区,常用于代码/设计预览。]
4 [callout t:success tt:就绪]
5 [p v:sm 面板默认展开,可点击边缘标签折叠。[/callout]
6 [/canvas-content]
7[/canvas]
加载 TokUI…
TokUI DSL · 左代码右渲染

锚点导航 anchor ​

双模式。长文档内的章节跳转导航:点击平滑滚动到目标章节,滚动时 scroll-spy 自动高亮最近过顶的一项。目标元素需带 id(如 [h2 id:sec-a 第一章])。

属性含义示例
opt锚点简写串 目标id:标题;...(必须双引号,原子自闭合)opt:"sec-a:第一章;sec-b:第二章"
topscroll-spy 激活偏移(px,缺省 12)top:20
v变体:horizontal 横向模式v:horizontal
onchange 上报 {value}(目标 id)on:"change:h"
id元素 IDid:pageAnchor

容器模式 lk 子项(支持二级锚点):

属性含义示例
h目标元素 id(可带 #)h:sec-a
tx显示文本tx:第一章
d层级深度 1-3(缩进)d:1

点击激活后平滑滚动途中 spy 不会抢回高亮(900ms 抑制窗);upd v:目标id 程序化高亮(silent)。

1[anchor opt:"s1:第一章;s2:第二章"]
2[h2 id:s1 第一章]
3[p 内容……]
4[h2 id:s2 第二章]
5[p 内容……]
加载 TokUI…
TokUI DSL · 左代码右渲染

点击调用 scrollIntoView 平滑滚动。服务端可用 [upd id:pageAnchor v:目标id] 程序化高亮(silent,不上报)。

1[anchor opt:"s1:第一章;s2:第二章"]
2[h2 id:s1 第一章]
3[p 内容……]
4[h2 id:s2 第二章]
5[p 内容……]
加载 TokUI…
TokUI DSL · 左代码右渲染

固钉 affix ​

容器。滚动越过偏移时将内容以 position:fixed 固定(固顶或固底),并自动插入占位元素防止布局跳动;固定状态切换经 change 事件上报。

属性含义示例
top固顶:距滚动容器顶部偏移(px),缺省 top:0top:8
bottom固底:距滚动容器底部偏移(px,与 top 二选一)bottom:8
target显式滚动容器选择器(缺省自动探测最近可滚动祖先)target:#list
on固定状态切换上报 {fixed:true/false}on:"change:h"

固底语义:元素位于底线之下时先固定于底部,滚动经过其原始位置后释放(同 AntD offsetBottom)。滚动监听挂 window 捕获阶段,嵌套滚动容器(对话区/scroll-area)均可感知。

1[affix top:8]
2[btn tx:固定按钮 v:primary]
3[/affix]
加载 TokUI…
TokUI DSL · 左代码右渲染

瀑布流 masonry ​

容器。CSS columns 瀑布流:cols 固定列数或 minw 自动列(子项最小宽度,列数随容器宽度自适应),gap 间距。子项自动分列平衡,流式追加自然流动;零 JS 布局计算,子项 break-inside: avoid 不被截断。

属性含义示例
cols固定列数(1-6,缺省 2)cols:3
minw自动列模式:子项最小宽度(px,优先于 cols)minw:200
gap间距(px,缺省 8)gap:10
1[masonry cols:3]
2[card tt:A]
3 [p 短内容]
4[/card]
5[card tt:B]
6 [p 这是一段比较长的内容,用来撑高这张卡片,让瀑布流高低错落的效果更明显。]
7 [p 再来一段补充说明。]
8[/card]
9[card tt:C]
10 [p 适中内容]
11 [p 第二行]
12[/card]
13[card tt:D]
14 [p 短]
15[/card]
16[card tt:E]
17 [p 长内容示例]
18 [p 第二段]
19 [p 第三段]
20 [p 第四段]
21[/card]
22[card tt:F]
23 [p 适中]
24[/card]
25[card tt:G]
26 [p 瀑布流按列依次填充,卡片高度各不相同,才能看出与网格布局的区别。]
27[/card]
28[card tt:H]
29 [p 短]
30[/card]
31[card tt:I]
32 [p 收尾卡片]
33 [p 内容]
34[/card]
35[/masonry]
加载 TokUI…
TokUI DSL · 左代码右渲染

漫游引导 tour / tour-step ​

tour 容器包裹若干 tour-step(自闭合标记),分步高亮讲解页面元素。键盘:Esc 关闭、←/→ 切步。无 tgt 的步骤面板居中显示。

属性含义适用示例
open容器闭合后自动开启touropen
mask遮罩(默认开,mask:false 关)tourmask:false
id标识(供 upd 定向控制)tourid:tour1
on事件上报(见下)touron:"change:h,finish:h,close:h"
tgt目标元素 id(可带 #)tour-steptgt:"#btn-a"
tt步骤标题tour-steptt:第一步
tx步骤说明(或直接写正文)tour-steptx:说明文字
pos面板方位(top/bottom/left/right,默认 bottom)tour-steppos:bottom

事件:change(切步,detail {index,target})/ finish(完成)/ close(跳过·✕·Esc)。 程序化控制:[upd id:tour1 act:open](v 可选起始步)、[upd id:tour1 act:goto v:N]、[upd id:tour1 act:close],均 silent 不上报。

1[tour open]
2[tour-step tt:第一步 tx:这是引导说明]
3[tour-step tt:完成 tx:无目标步骤居中显示]
4[/tour]
加载 TokUI…
TokUI DSL · 左代码右渲染

命令式确认 modal.confirm ​

命令式确认对话框——宿主侧 JS API,不经 DSL,由页面代码直接调用。返回 Promise<boolean>:确认得 true,取消 / Esc / 点击遮罩得 false。别名 TokUI.confirm(opts) 等价。

js
const ok = await TokUI.modal.confirm({
  tt: '删除确认',
  tx: '确定要删除这条记录吗?',
  t: 'danger',           // 确认按钮类型:'danger' | 'primary'(默认)
  'ok-text': '删除',      // 缺省走 i18n common.ok
  'cancel-text': '取消',  // 缺省走 i18n common.cancel
  onOk() { /* 与 Promise 并存的回调 */ },
  onCancel() {}
});
选项含义默认
tt标题i18n modal.aria
tx正文无(缺省不渲染正文区)
t确认按钮类型primary
ok-text / cancel-text按钮文案i18n common.ok / common.cancel
onOk / onCancel回调(与 Promise 并存)—

遮罩 aria 文案同样走 i18n(modal.aria),多语言站点无需手工处理。

容器型组件层级较深时,建议在每个容器后立即写好闭合标签 [/type],避免流式解析下因隐式闭合时机错位导致渲染异常。