第一个 SlexKit 卡片
该示例不使用 g 对象或交互,只用 layout 声明一张静态卡片。
slex: "0.1",
namespace: "learn_hello_slexkit",
layout: {
"section:hello": {
eyebrow: "入门教程 · 1/4",
title: "第一个 SlexKit 卡片",
subtitle: "所有内容都是声明式的——数字、颜色、布局,全部来自 DSL。",
"grid:top-stats": {
columns: 1, mdColumns: 3,
"stat:users": { label: "活跃用户", value: "12,847", unit: "人" },
"stat:uptime": { label: "正常运行", value: "99.97", unit: "%" },
"stat:latency": { label: "服务延迟", value: "42", unit: "ms" }
},
"table:pricing": {
columns: ["功能", "免费版", "专业版"],
rows: [
["可用组件", "全部", "全部"],
["自定义主题", "3 种", "无限"],
["数据导出", "JSON", "JSON / CSV / SQL"]
]
},
"callout:tip": {
tone: "info",
text: "标题、数值、表格和颜色都来自上面的 DSL 声明,不需要额外 HTML。Markdown 承载正文,DSL 承载交互结构。"
}
}
}
}先观察结构、组件 key 和嵌套方式。下一节会在同样的结构里加入响应式数据。
如果 "12,847" 需要动态计算,就需要把数据放进 g 对象,并用表达式读取。