amis2/docs/renderers.md

title
渲染器手册

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

集合

• Page: JSON 配置最外层的 Page 渲染器
• Form: 表单渲染器
  • FormItem: Form 中主要是由各种 FormItem 组成
  • List: 简单的列表选择框
  • Button-Group: 按钮集合
  • Service: 动态配置，配置项由接口决定
  • Tabs: 多个输入框通过选项卡来分组
  • Table: 可以用来展示数组类型的数据
  • HBox: 支持 form 内部再用 HBox 布局
  • Grid: 支持 form 内部再用 grid 布局
  • Panel: 还是为了布局，可以把一部分 FormItem 合并到一个 panel 里面单独展示
  • Hidden: 隐藏字段类型
  • Text: 普通的文本输入框
  • Textarea: 多行文本输入框
  • Url: URL 输入框
  • Email: Email 输入框
  • Password: 密码输入框
  • Number: 数字输入框
  • Select: 选项表单
  • Chained-Select: 无限级别下拉
  • Checkbox: 勾选框
  • Checkboxes: 复选框
  • Radios: 单选框
  • Switch: 可选框，和 checkbox 完全等价
  • Date: 日期类型
  • Datetime: 日期时间类型
  • Time: 时间类型
  • Date-Range: 日期范围类型
  • Color: 颜色选择器
  • Range: 范围输入框
  • Image: 图片格式输
  • File: 文件输入
  • Matrix: 矩阵类型的输入框
  • Tree: 树形结构输入框
  • TreeSelect: 树形结构选择框
  • NestedSelect: 树形结构选择框
  • Button: 按钮, 包含 button、submit 和 reset
  • Button-Toolbar: 让多个按钮在一起放置
  • Combo: 组合模式
  • Array: 数组输入框配置
  • SubForm: formItem 还可以是子表单类型
  • Picker: 列表选取
  • Formula: 公式类型
  • Group: 表单项集合
  • FieldSet: 多个输入框可以通过 fieldSet 捆绑在一起
  • Repeat: 可用来设置重复频率
  • Rich-Text: 富文本编辑器
  • Editor: 编辑器
  • Static: 纯用来展现数据的
• Wizard: 表单向导
• Tpl: 支持用 JS 模板引擎来组织输出
• Plain: 单纯的文字输出
• Html: html, 当需要用到变量时，请用 Tpl 代替
• Action: 一种特殊的渲染器，它本身是一个按钮，同时它能触发事件
• Dialog: Dialog 由 Action 触发。他是一个类似于 Page 的容器模型
• Drawer: Drawer 由 Action 触发
• Divider: 分割线
• CRUD: 增删改查模型，主要用来展现列表
  • CRUD-Table: 请参考 Table
  • CRUD-Cards: 请参考 Cards
  • CRUD-List: 请参考 List
• 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: 类型说明文档