amis/docs/renderers.md
2019-06-04 20:13:40 +08:00

5.9 KiB
Raw Blame History

title
渲染器手册

amis 页面是通过 JSON 配置出来的,是由一个一个渲染模型组成的,掌握他们规则,就能灵活配置出各种页面。

集合

  • Page: JSON 配置最外层的 Page 渲染器
  • Form: 表单渲染器
  • Wizard: 表单向导
  • Tpl: 支持用 JS 模板引擎来组织输出
  • Plain: 单纯的文字输出
  • Html: html, 当需要用到变量时,请用 Tpl 代替
  • Action: 一种特殊的渲染器,它本身是一个按钮,同时它能触发事件
  • Dialog: Dialog 由 Action 触发。他是一个类似于 Page 的容器模型
  • Drawer: Drawer 由 Action 触发
  • Divider: 分割线
  • CRUD: 增删改查模型,主要用来展现列表
  • Panel: 可以把相关信息以盒子的形式展示到一块。
  • Wrapper: 简单的一个容器。
  • Service: 功能型容器,自身不负责展示内容,主要职责在于通过配置的 api 拉取数据
  • Chart: 图表渲染器
  • Collapse: 折叠器
  • Carousel: 轮播图
  • Audio: 音频播放器
  • Video: 视频播放器
  • Table: 表格展示
    • Column: 表格中的列配置
  • List: 列表展示
  • Card: 卡片的展示形式
  • Cards: 卡片集合
  • Field: 主要用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中
  • Tabs: 标签页
  • Grid: Grid 布局
  • HBox: HBox 布局
  • Button-Group 按钮集合
  • iFrame 如果需要内嵌外部站点,可用 iframe 来实现
  • Nav: 菜单栏
  • Tasks: 任务操作集合,类似于 orp 上线
  • QRCode: 二维码显示组件
  • Types: 类型说明文档