Layout Components
Container-type layout components such as cards, grids, lists, tabs, collapse, dialogs, drawers, timelines, step bars, carousels, trees, menus, and more. Container components must be closed with [/type]. The left side shows the formatted TokUI DSL, the right side renders it in real time — click "Edit" to make changes on the fly.
Card card / Footer ft
card is a general-purpose content container. tt sets the title, tx writes the body text directly (self-closing mode), and the main content is filled by child nodes. ft acts as a child container of card, automatically placed at the bottom of the card as a footer.
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
tt | Title | card | tt:用户信息 |
tx | Self-closing body text | card | tx:一段说明 |
hc | Title color (preset or color value) | card | hc:primary |
ht | Title decoration style | card | ht:underline |
w | Width | card | w:320 |
v | Variant | card | v:highlight |
v | Alignment | ft | v:right |
card variants: highlight (highlighted border), flat (flat, no shadow), bordered (outlined), center / right (title alignment). ht title decorations: fill (filled block), accent (left color bar), underline (underline), dot (leading dot), pill (pill). ft variants: left / center / right.
Grid row / col
Responsive layout based on a 12-column grid system. row is the container row, col is the column, and span specifies the column width (1-12).
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
v | Alignment | row | v:center |
span | Column width (1-12) | col | span:4 |
row variants: left / center / right (horizontal alignment), inline (inline layout).
List list / item
List container. list is unordered (ul) by default; t:ol switches it to an ordered list (ol). item is a list item (<li> semantics) — text is written inside the tag, child list can be nested, and plain hides the marker.
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
t | List type | list | t:ol |
plain | Remove marker/number | list | plain |
tx | Item text | item | tx:第一项 |
Tabs tabs / tab
tabs wraps multiple tab children. tt is each tab's navigation title, switched with pure CSS. Supports left/right arrow keyboard navigation.
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
tt | Tab title | tab | tt:详情 |
Accordion accordion / Collapse collapse
accordion wraps multiple collapse panels, each independently collapsible. tt sets the title; open expands by default.
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
tt | Title | collapse | tt:第一章 |
open | Expand by default | collapse | open |
id | Identifier | collapse | id:sec1 |
Dialog dialog
Built on the native <dialog> element, with a backdrop + centered modal. Esc / click backdrop / close button all dismiss it.
| Prop | Meaning | Example |
|---|---|---|
tt | Title | tt:确认操作 |
id | Identifier (the trigger button's data-target points to it) | id:myDialog |
clk | Handler name | clk:openDialog |
Triggered by a button: the trigger button uses
clk:openDialog data-target:"<the dialog's id>", and the matching[dialog id:...]must carry the same id. Clicking calls the built-inopenDialoghandler, which finds the dialog by id and callsshowModal(). Cancel/confirm buttons inside useclk:closeDialogto dismiss the enclosing dialog (no id needed).
Drawer drawer
A panel that slides in from the side. pos controls the direction; w sets the width for left/right drawers and h sets the height for top/bottom drawers. Esc / backdrop / close button all dismiss it.
| Prop | Meaning | Example |
|---|---|---|
tt | Title | tt:筛选条件 |
pos | Position (left/right/top/bottom, default right) | pos:left |
w | Width (left/right drawers, default 360px) | w:420 |
h | Height (top/bottom drawers, default 300px) | h:260 |
id | Identifier (the trigger button's data-target points to it) | id:myDrawer |
clk | Handler name | clk:openDrawer |
pos variants: left / right / top / bottom.
Triggered by a button: the trigger button uses
clk:openDrawer data-target:"<the drawer's id>", and the matching[drawer id:...]must carry the same id. Clicking calls the built-inopenDrawerhandler, which finds the drawer by id and adds thetokui-drawer--openclass to slide it in. Cancel/confirm buttons inside useclk:closeDrawerto dismiss the enclosing drawer.
Timeline timeline / ti
timeline is the container; ti is a single record. tm sets the timestamp, tt the title, t the status color (primary/success/warning/error/info). The body text goes inside the tag.
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
v | Layout (h/alternate/card) | timeline | v:alternate |
tm | Timestamp | ti | tm:2026-06-01 |
tt | Title | ti | tt:提交申请 |
t | Status color | ti | t:success |
timeline variants: h / horizontal (horizontal), alternate / alt (alternating left/right), card (card style).
Steps steps / step
A horizontal flow indicator. v sets the current step (1-based), vd:vertical switches to a vertical layout, and s:sm reduces the size. A step child can use status:error to mark an error state.
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
v | Current step (1-based) | steps | v:2 |
vd | Direction (horizontal/vertical) | steps | vd:vertical |
s | Size | steps | s:sm |
tt | Step title | step | tt:填写信息 |
status | Per-step status | step | status:error |
Carousel carousel / carousel-item
carousel is the container; children are carousel-item (or plain img). Children may also be written as [item] — inside carousel it renders as a slide (same name as [item] in list/desc, disambiguated by parent; item and carousel-item are equivalent and can be mixed). auto sets the autoplay interval (in milliseconds). Supports left/right arrows, indicator dots, dragging, and left/right keyboard navigation. thumb switches to a thumbnail legend below (replaces dots; click to jump smoothly). Sizing: w width, h height (plain numbers are px; %/vw/rem also accepted), or ratio aspect ratio (e.g. 16:9 / 4:3 / 1); when h or ratio is set, slides fill the height and images are cropped with object-fit:cover; h takes precedence over ratio.
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
auto | Autoplay interval (ms) | carousel | auto:3000 |
id | Identifier | carousel | id:myCarousel |
thumb | Show thumbnail legend (replaces dots) | carousel | thumb |
w | Width (plain number → px, or %/vw/rem) | carousel | w:480 / w:100% |
h | Height (px; overrides ratio) | carousel | h:240 |
ratio | Aspect ratio (16:9 / 4:3 / 1) | carousel | ratio:16:9 |
s | Image URL | carousel-item / item | s:https://... |
tt | Slide title | carousel-item / item | tt:第一张 |
tx | Slide description | carousel-item / item | tx:说明文字 |
Fixed size (h) / aspect ratio (ratio) / thumbnail legend (thumb):
Tree tree / tn
tree is the container; child nodes tn can be nested recursively. On tn, leaf marks a leaf node, open expands by default, chk selects, and dis disables. On tree, chk enables checkbox mode.
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
l | Field label | tree | l:目录 |
clk | Select callback | tree | clk:onPick |
chk | Checkbox mode | tree | chk |
dis | Disable the whole tree | tree | dis |
v / tx | Value / display text | tn | tx:src |
leaf | Leaf node | tn | leaf |
open | Expand by default | tn | open |
chk / dis | Selected / disabled | tn | chk |
Menu menu / menu-item
menu is the container; menu-item is self-closing. v switches direction (vertical default / horizontal / inline), act sets the clk value of the active item, and bg/fc customize colors.
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
v | Direction variant | menu | v:horizontal |
act | Active item clk | menu | act:goHome |
bg / fc | Background / text color | menu | bg:1f2937 |
tx | Text | menu-item | tx:首页 |
clk | Click handler | menu-item | clk:goHome |
i | Icon glyph | menu-item | i:🏠 |
dis | Disabled | menu-item | dis |
Resizable Panel resizable
A two-pane layout with a draggable splitter. dir controls the direction; min/max/default constrain the first pane's size. The first child node goes into the first pane; the rest go into the second. Supports fine-tuning with arrow keys.
| Prop | Meaning | Example |
|---|---|---|
dir | Direction (h horizontal default / v vertical) | dir:v |
min | Minimum size (px) | min:120 |
max | Maximum size (px) | max:600 |
default | Initial size (px) | default:240 |
w | Overall width | w:100% |
Horizontal · Sidebar + Main — The most common IDE / admin layout: a fixed-width left pane that can be dragged wider, and a right pane that fills the rest.
Vertical · Editor + Terminal — dir:v splits top/bottom: code or preview above, logs or console below.
Nested · Three-pane Workspace — resizable nests: outer splits horizontally, the right pane splits vertically again, yielding three regions.
Tight Constraint · Floating Rail — When min is close to max, the first pane is nearly fixed with only fine-tuning room.
Scroll Area scroll-area
A content region with a fixed outer size and custom scrollbar styling. h/w set the viewport size; overflowing content scrolls.
| Prop | Meaning | Example |
|---|---|---|
h | Height | h:160 |
w | Width | w:100% |
id | Identifier | id:myScroll |
Sidebar sidebar
sidebar is a container; children are sidebar-content (main content) and sidebar-footer (footer). collapsible enables the collapse button.
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
w | Width (default 260) | sidebar | w:240 |
pos | Position (left/right) | sidebar | pos:left |
collapsible | Collapsible | sidebar | collapsible |
tt | Title / logo text | sidebar | tt:控制台 |
bg / fc | Background / text color | sidebar | bg:111827 |
Tooltip tooltip
A lightweight hover-revealed text tip. tt is the tip content, tx is the trigger text, and pos controls the direction. It pops up on mouse enter and dismisses on leave/blur/Esc.
| Prop | Meaning | Example |
|---|---|---|
tt | Tip text | tt:这是提示 |
tx | Trigger text | tx:悬停看我 |
pos | Direction (default top) | pos:bottom |
Variants: top / bottom / left / right.
Popover popover
A richer popup card than tooltip, supporting a title and arbitrary child content. trig switches the trigger mode (click default / hover), pos controls the direction, and w sets the panel width.
| Prop | Meaning | Example |
|---|---|---|
tx | Trigger text | tx:点击查看 |
tt | Title | tt:用户信息 |
pos | Direction (default top) | pos:bottom |
trig | Trigger mode | trig:hover |
w | Panel width | w:240 |
Hover Card hover-card
hover-card is a container; children are hover-trigger (trigger area) and hover-content (pop-up content). delay controls the show delay, pos controls the direction, and the content is positioned with position:fixed to avoid clipping.
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
pos | Direction (default bottom) | hover-card | pos:right |
w | Pop-up width (px) | hover-card | w:280 |
delay | Show delay (ms, default 300) | hover-card | delay:200 |
Popconfirm popconfirm
A small confirmation popup with OK / Cancel buttons triggered on click. tt is the question text, tx the trigger button text, clk the confirm callback, t the confirm button type, and pos the direction.
| Prop | Meaning | Example |
|---|---|---|
tt | Question text | tt:确定删除吗？ |
tx | Trigger button text | tx:删除 |
clk | Confirm callback | clk:onConfirm |
t | Confirm button type (default primary) | t:danger |
pos | Direction (default top) | pos:right |
ok-text / cancel-text | Button text | ok-text:删除 |
Back to Top backtop
A back-to-top button that appears after a page or container scrolls past a threshold. t sets the threshold (default 200), container switches to in-container mode, and v sets the shape.
| Prop | Meaning | Example |
|---|---|---|
t | Visibility threshold (px, default 200) | t:300 |
v | Shape (circle / round / square) | v:round |
tx | Button text (default ↑) | tx:顶部 |
s | Size | s:lg |
container | In-container mode | container |
bottom / right | Distance from bottom / right (px) | bottom:40 |
backtopfloats in the bottom-right corner and is only visible after scrolling. The example below uses a callout to describe its behavior.
Command Palette command
command is a container; children are command-group (group, tt title), whose items use item (or command-item — equivalent; item recommended). Built-in fuzzy search, keyboard up/down selection, and Enter to confirm.
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
ph | Search box placeholder | command | ph:搜索命令... |
clk | Select callback | command | clk:onCommand |
id | Identifier (the trigger button's data-target points to it) | command | id:cmdMain |
tt | Group title | command-group | tt:常用 |
tx | Display text | item / command-item | tx:新建文件 |
v | Search value (defaults to tx) | item / command-item | v:new file |
clk | Item callback | item / command-item | clk:cmdNew |
shortcut | Shortcut hint | item / command-item | shortcut:⌘N |
The palette is hidden by default and triggered by a button: the trigger uses
clk:openCommand data-target:"<the command's id>", and the matching[command id:...]carries the same id. Usehotkeyto opt intoCmd/Ctrl+K(only one hotkey instance per page).
Canvas Panel canvas
canvas is a container; children are canvas-content (content area). pos controls the dock direction, w the width, open expands it by default, and closable whether it can be closed.
| Prop | Meaning | Applies to | Example |
|---|---|---|---|
tt | Title (default Canvas) | canvas | tt:预览 |
pos | Position (left/right, default right) | canvas | pos:right |
w | Width (default 400) | canvas | w:360 |
open | Expand by default | canvas | open |
closable | Closable (default on) | canvas | closable |
tx | Self-closing body text | canvas | tx:简单内容 |
When nesting container components deeply, close each container with
[/type]immediately after its content to avoid rendering glitches caused by misplaced implicit closing during streaming parsing.