你的第一个 SlexKit 卡片
SlexKit 的核心思想:用声明式 JSON 描述 UI,而不仅是 Markdown。下面是一个纯静态的卡片——没有 g 对象,没有交互,所有内容都直接写在结构中。
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。这就是 SlexKit 的核心理念:Markdown 提供叙事,DSL 提供交互。"
}
}
}
}只看不动,感受一下结构和布局语法。下一节我们给卡片加上第一条响应式数据。
思考:如果 "12,847" 需要从里面计算出来,显然直接写死字符串不够。这就需要引入 g 对象——下一节的主角。