茄总 开发文档

文档 / 高级界面

打开 Markdown

高级界面

这些组件是可选的增量能力。应用应先通过 platform.can("ui.<name>") 判断，再提供清楚的降级结构；不能因为宿主没有组件就让页面打不开。

分段选择与日期

  • segment(items, options?)：返回带 tablist 角色的分段控件，项目为 { id, label }，选项支持 value 和 onChange(id)。
  • datePicker(attrs?)：返回原生日期输入，默认 type="date"，属性会传给输入节点。
  • calendar({ value, dates, onChange })：返回日期按钮网格；dates 是 YYYY-MM-DD 字符串，选择后回调该字符串。

图表

chart({ type, data, label, max }) 使用内联 SVG，type 支持 line、bar、donut。data 可以是数字数组，也可以是 { value } 数组。它只负责表达已经准备好的数据，不会自行读取数据库；label 是无障碍名称。

状态、菜单与抽屉

  • skeleton(lines?)：表示正在加载的页面骨架；加载结束后替换节点，不要与空状态混用。
  • emptyState({ title, text, action, onAction })：带标题、说明和可选动作的空状态。
  • menu(items, options?)：返回原生 details 菜单；项目为 { label, disabled, onSelect }。
  • drawer({ title, children, closeLabel, onClose })：立即显示右侧抽屉并返回遮罩节点。它适合轻量详情或编辑，不适合多步骤长任务。

降级示例：

js
const chart = platform.can("ui.chart")
  ? ui.chart({ type: "line", data: values, label: "趋势" })
  : ui.list(values.map((value, index) => ui.row(`第 ${index + 1} 项`, String(value))));

这些组件仍然使用宿主的颜色变量和 lo-* 类，应用可以覆盖布局。图表不包含外部脚本或图片请求；抽屉和菜单的复杂键盘焦点管理需要应用根据自己的任务补充。