forked from p96170835/amis
docs: ✏️ 渲染器文档
This commit is contained in:
SIMDD
parent
1a905e46e5
commit
652c26a6e8
|
|
@ -1,76 +1,68 @@
|
|||
## AMis 渲染器手册
|
||||
|
||||
- [Page](./renderers/Page.md)
|
||||
- [Form](./renderers/Form.md)
|
||||
- [FormItem](./renderers/FormItem.md)
|
||||
- [Page](./renderers/Page.md): JSON 配置最外层的 Page 渲染器
|
||||
- [Form](./renderers/Form.md): 表单渲染器
|
||||
|
||||
- [FormItem-List](./renderers/FormItem-List.md)
|
||||
- [FormItem-Button-Group](./renderers/FormItem-Button-Group.md)
|
||||
- [FormItem-Service](./renderers/FormItem-Service.md)
|
||||
- [FormItem-Tabs](./renderers/FormItem-Tabs.md)
|
||||
- [FormItem-Table](./renderers/FormItem-Table.md)
|
||||
- [FormItem-HBox](./renderers/FormItem-HBox.md)
|
||||
- [FormItem-Grid](./renderers/FormItem-Grid.md)
|
||||
- [FormItem-Panel](./renderers/FormItem-Panel.md)
|
||||
- [FormItem](./renderers/FormItem.md): Form 中主要是由各种 FormItem 组成
|
||||
- [FormItem-List](./renderers/FormItem-List.md): 简单的列表选择框
|
||||
- [FormItem-Button-Group](./renderers/FormItem-Button-Group.md): 按钮集合
|
||||
- [FormItem-Service](./renderers/FormItem-Service.md): 动态配置，配置项由接口决定
|
||||
- [FormItem-Tabs](./renderers/FormItem-Tabs.md): 多个输入框通过选项卡来分组
|
||||
- [FormItem-Table](./renderers/FormItem-Table.md): 可以用来展示数组类型的数据
|
||||
- [FormItem-HBox](./renderers/FormItem-HBox.md): 支持 form 内部再用 HBox 布局
|
||||
- [FormItem-Grid](./renderers/FormItem-Grid.md): 支持 form 内部再用 grid 布局
|
||||
- [FormItem-Panel](./renderers/FormItem-Panel.md): 还是为了布局，可以把一部分 FormItem 合并到一个 panel 里面单独展示
|
||||
- [Hidden](./renderers/Hidden.md): 隐藏字段类型
|
||||
- [Text](./renderers/Text.md): 普通的文本输入框
|
||||
- [Textarea](./renderers/Textarea.md): 多行文本输入框
|
||||
- [Url](./renderers/Url.md): URL 输入框
|
||||
- [Email](./renderers/Email.md): Email 输入框
|
||||
- [Password](./renderers/Password.md): 密码输入框
|
||||
- [Number](./renderers/Number.md): 数字输入框
|
||||
- [Divider](./renderers/Divider.md): 分割线
|
||||
- [Select](./renderers/Select.md): 选项表单
|
||||
- [Chained-Select](./renderers/Chained-Select.md): 无限级别下拉
|
||||
- [Checkbox](./renderers/Checkbox.md): 勾选框
|
||||
- [Checkboxes](./renderers/Checkboxes.md): 复选框
|
||||
- [Radios](./renderers/Radios.md): 单选框
|
||||
- [Switch](./renderers/Switch.md): 可选框，和 checkbox 完全等价
|
||||
- [Date](./renderers/Date.md): 日期类型
|
||||
- [Datetime](./renderers/Datetime.md): 日期时间类型
|
||||
- [Time](./renderers/Time.md): 时间类型
|
||||
- [Date-Range](./renderers/Date-Range.md): 日期范围类型
|
||||
- [Color](./renderers/Color.md): 颜色选择器
|
||||
- [Range](./renderers/Range.md): 范围输入框
|
||||
- [Image](./renderers/Image.md): 图片格式输
|
||||
- [File](./renderers/File.md): 文件输入
|
||||
- [Matrix](./renderers/Matrix.md): 矩阵类型的输入框
|
||||
- [Tree](./renderers/Tree.md): 树形结构输入框
|
||||
- [TreeSelect](./renderers/TreeSelect.md): 树形结构选择框
|
||||
- [NestedSelect](./renderers/NestedSelect.md): 树形结构选择框
|
||||
- [Button](./renderers/Button.md): 按钮, 包含 button、submit 和 reset
|
||||
- [Button-Toolbar](./renderers/Button-Toolbar.md): 让多个按钮在一起放置
|
||||
- [Combo](./renderers/Combo.md): 组合模式
|
||||
- [Array](./renderers/Array.md): 数组输入框配置
|
||||
- [SubForm](./renderers/SubForm.md): formItem 还可以是子表单类型
|
||||
- [Picker](./renderers/Picker.md): 列表选取
|
||||
- [Formula](./renderers/Formula.md): 公式类型
|
||||
- [Group](./renderers/Group.md): 表单项集合
|
||||
- [FieldSet](./renderers/FieldSet.md): 多个输入框可以通过 fieldSet 捆绑在一起
|
||||
- [Repeat](./renderers/Repeat.md): 可用来设置重复频率
|
||||
- [Rich-Text](./renderers/Rich-Text.md): 富文本编辑器
|
||||
- [Editor](./renderers/Editor.md): 编辑器
|
||||
- [Static](./renderers/Static.md): 纯用来展现数据的
|
||||
|
||||
- [Hidden](./renderers/Hidden.md)
|
||||
- [Text](./renderers/Text.md)
|
||||
- [Textarea](./renderers/Textarea.md)
|
||||
- [Url](./renderers/Url.md)
|
||||
- [Email](./renderers/Email.md)
|
||||
- [Password](./renderers/Password.md)
|
||||
- [Number](./renderers/Number.md)
|
||||
- [Divider](./renderers/Divider.md)
|
||||
- [Select](./renderers/Select.md)
|
||||
- [Chained-Select](./renderers/Chained-Select.md)
|
||||
- [Checkbox](./renderers/Checkbox.md)
|
||||
- [Checkboxes](./renderers/Checkboxes.md)
|
||||
- [Radios](./renderers/Radios.md)
|
||||
- [Switch](./renderers/Switch.md)
|
||||
- [Date](./renderers/Date.md)
|
||||
- [Datetime](./renderers/Datetime.md)
|
||||
- [Time](./renderers/Time.md)
|
||||
- [Date-Range](./renderers/Date-Range.md)
|
||||
- [Color](./renderers/Color.md)
|
||||
- [Range](./renderers/Range.md)
|
||||
- [Image](./renderers/Image.md)
|
||||
- [File](./renderers/File.md)
|
||||
- [Matrix](./renderers/Matrix.md)
|
||||
- [Tree](./renderers/Tree.md)
|
||||
- [TreeSelect](./renderers/TreeSelect.md)
|
||||
- [NestedSelect](./renderers/NestedSelect.md)
|
||||
- [Button](./renderers/Button.md)
|
||||
- [Button-Toolbar](./renderers/Button-Toolbar.md)
|
||||
- [Combo](./renderers/Combo.md)
|
||||
- [Array](./renderers/Array.md)
|
||||
- [SubForm](./renderers/SubForm.md)
|
||||
- [Picker](./renderers/Picker.md)
|
||||
- [Formula](./renderers/Formula.md)
|
||||
- [Group](./renderers/Group.md)
|
||||
- [FieldSet](./renderers/FieldSet.md)
|
||||
- [Repeat](./renderers/Repeat.md)
|
||||
- [Rich-Text](./renderers/Rich-Text.md)
|
||||
- [Editor](./renderers/Editor.md)
|
||||
|
||||
- [XXX-Editor](./renderers/XXX-Editor.md)
|
||||
- [Diff-Editor](./renderers/Diff-Editor.md)
|
||||
|
||||
- [Static](./renderers/Static.md)
|
||||
- [Static-XXX](./renderers/Static-XXX.md)
|
||||
|
||||
- [Wizard](./renderers/Wizard.md)
|
||||
- [Tpl](./renderers/Tpl.md)
|
||||
- [Plain](./renderers/Plain.md)
|
||||
- [Html](./renderers/Html.md)
|
||||
- [Action](./renderers/Action.md)
|
||||
- [Dialog](./renderers/Dialog.md)
|
||||
- [Drawer](./renderers/Drawer.md)
|
||||
|
||||
- [CRUD](./renderers/CRUD.md)
|
||||
|
||||
- [CRUD-Table](./renderers/CRUD-Table.md)
|
||||
- [CRUD-Cards](./renderers/CRUD-Cards.md)
|
||||
- [CRUD-List](./renderers/CRUD-List.md)
|
||||
- [Wizard](./renderers/Wizard.md): 表单向导
|
||||
- [Tpl](./renderers/Tpl.md): 支持用 JS 模板引擎来组织输出
|
||||
- [Plain](./renderers/Plain.md): 单纯的文字输出
|
||||
- [Html](./renderers/Html.md): html, 当需要用到变量时，请用 Tpl 代替
|
||||
- [Action](./renderers/Action.md): 一种特殊的渲染器，它本身是一个按钮，同时它能触发事件
|
||||
- [Dialog](./renderers/Dialog.md): Dialog 由 Action 触发。他是一个类似于 Page 的容器模型
|
||||
- [Drawer](./renderers/Drawer.md): Drawer 由 Action 触发
|
||||
- [CRUD](./renderers/CRUD.md): 增删改查模型，主要用来展现列表
|
||||
- [CRUD-Table](./renderers/CRUD-Table.md): 请参考 Table
|
||||
- [CRUD-Cards](./renderers/CRUD-Cards.md): 请参考 Cards
|
||||
- [CRUD-List](./renderers/CRUD-List.md): 请参考 List
|
||||
- [CRUD-Table](./renderers/CRUD-Table.md)
|
||||
- [CRUD-Table](./renderers/CRUD-Table.md)
|
||||
- [CRUD-Table](./renderers/CRUD-Table.md)
|
||||
|
|
@ -79,28 +71,25 @@
|
|||
- [CRUD-Table](./renderers/CRUD-Table.md)
|
||||
- [CRUD-Table](./renderers/CRUD-Table.md)
|
||||
- [CRUD-Table](./renderers/CRUD-Table.md)
|
||||
|
||||
- [Panel](./renderers/Panel.md)
|
||||
- [Wrapper](./renderers/Wrapper.md)
|
||||
- [Service](./renderers/Service.md)
|
||||
- [Chart](./renderers/Chart.md)
|
||||
- [Collapse](./renderers/Collapse.md)
|
||||
- [Audio](./renderers/Audio.md)
|
||||
- [Video](./renderers/Video.md)
|
||||
- [Table](./renderers/Table.md)
|
||||
- [Column](./renderers/Column.md)
|
||||
- [List](./renderers/List.md)
|
||||
- [Card](./renderers/Card.md)
|
||||
- [Cards](./renderers/Cards.md)
|
||||
- [Field](./renderers/Field.md)
|
||||
|
||||
- [Field 通用配置](./renderers/Field通用配置.md)
|
||||
- [Tabs](./renderers/Tabs.md)
|
||||
- [Grid](./renderers/Grid.md)
|
||||
- [HBox](./renderers/HBox.md)
|
||||
- [Button-Group](./renderers/Button-Group.md)
|
||||
- [iFrame](./renderers/iFrame.md)
|
||||
- [Nav](./renderers/Nav.md)
|
||||
- [Tasks](./renderers/Tasks.md)
|
||||
- [QRCode](./renderers/QRCode.md)
|
||||
- [类型说明](./renderers/类型说明.md)
|
||||
- [Panel](./renderers/Panel.md): 可以把相关信息以盒子的形式展示到一块。
|
||||
- [Wrapper](./renderers/Wrapper.md): 简单的一个容器。
|
||||
- [Service](./renderers/Service.md): 功能型容器，自身不负责展示内容，主要职责在于通过配置的 api 拉取数据
|
||||
- [Chart](./renderers/Chart.md): 图表渲染器
|
||||
- [Collapse](./renderers/Collapse.md): 折叠器
|
||||
- [Audio](./renderers/Audio.md): 音频播放器
|
||||
- [Video](./renderers/Video.md): 视频播放器
|
||||
- [Table](./renderers/Table.md): 表格展示
|
||||
- [Column](./renderers/Column.md): 表格中的列配置
|
||||
- [List](./renderers/List.md): 列表展示
|
||||
- [Card](./renderers/Card.md): 卡片的展示形式
|
||||
- [Cards](./renderers/Cards.md): 卡片集合
|
||||
- [Field](./renderers/Field.md): 主要用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中
|
||||
- [Tabs](./renderers/Tabs.md): 标签页
|
||||
- [Grid](./renderers/Grid.md): Grid 布局
|
||||
- [HBox](./renderers/HBox.md): HBox 布局
|
||||
- [Button-Group](./renderers/Button-Group.md)： 按钮集合
|
||||
- [iFrame](./renderers/iFrame.md)： 如果需要内嵌外部站点，可用 iframe 来实现
|
||||
- [Nav](./renderers/Nav.md): 菜单栏
|
||||
- [Tasks](./renderers/Tasks.md): 任务操作集合，类似于 orp 上线
|
||||
- [QRCode](./renderers/QRCode.md): 二维码显示组件
|
||||
- [类型说明](./renderers/类型说明.md): 类型说明文档
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
### Diff-Editor
|
||||
|
||||
- `type` 请设置成 `diff-editor`
|
||||
- `language` 默认为 `javascript` 当 `type` 为 `diff-editor` 的时候有用
|
||||
- `diffValue` 设置左侧编辑器的值，支持`${xxx}`获取变量
|
||||
- `disabled` 配置 **右侧编辑器** 是否可编辑，**左侧编辑器**始终不可编辑
|
||||
- 更多配置请参考 [FormItem](#FormItem)
|
||||
|
||||
PS: 当用作纯展示时，可以通过`value`配置项，设置右侧编辑器的值
|
||||
|
||||
```schema:height="350" scope="form-item"
|
||||
{
|
||||
"type": "diff-editor",
|
||||
"name": "diff",
|
||||
"diffValue": "hello world",
|
||||
"label": "Diff-Editor"
|
||||
}
|
||||
```
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
### Editor or XXX-Editor
|
||||
### Editor
|
||||
|
||||
### XXX-Editor
|
||||
|
||||
- `type` 请设置成 `editor` 或者 `bat-editor`、`c-editor`、`coffeescript-editor`、`cpp-editor`、`csharp-editor`、`css-editor`、`dockerfile-editor`、`fsharp-editor`、`go-editor`、`handlebars-editor`、`html-editor`、`ini-editor`、`java-editor`、`javascript-editor`、`json-editor`、`less-editor`、`lua-editor`、`markdown-editor`、`msdax-editor`、`objective-c-editor`、`php-editor`、`plaintext-editor`、`postiats-editor`、`powershell-editor`、`pug-editor`、`python-editor`、`r-editor`、`razor-editor`、`ruby-editor`、`sb-editor`、`scss-editor`、`sol-editor`、`sql-editor`、`swift-editor`、`typescript-editor`、`vb-editor`、`xml-editor`、`yaml-editor`。
|
||||
- `language` 默认为 `javascript` 当 `type` 为 `editor` 的时候有用。
|
||||
|
|
@ -11,3 +13,22 @@
|
|||
"label": "Json Editor"
|
||||
}
|
||||
```
|
||||
|
||||
### Diff-Editor
|
||||
|
||||
- `type` 请设置成 `diff-editor`
|
||||
- `language` 默认为 `javascript` 当 `type` 为 `diff-editor` 的时候有用
|
||||
- `diffValue` 设置左侧编辑器的值，支持`${xxx}`获取变量
|
||||
- `disabled` 配置 **右侧编辑器** 是否可编辑，**左侧编辑器**始终不可编辑
|
||||
- 更多配置请参考 [FormItem](#FormItem)
|
||||
|
||||
PS: 当用作纯展示时，可以通过`value`配置项，设置右侧编辑器的值
|
||||
|
||||
```schema:height="350" scope="form-item"
|
||||
{
|
||||
"type": "diff-editor",
|
||||
"name": "diff",
|
||||
"diffValue": "hello world",
|
||||
"label": "Diff-Editor"
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -73,3 +73,144 @@
|
|||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Field 通用配置
|
||||
|
||||
- `name` 绑定变量名。
|
||||
- `placeholder` 当没有值时的展示内容。
|
||||
- `popOver` 配置后在内容区增加一个放大按钮，点击后弹出一个详情弹框。
|
||||
`boolean` 简单的开启或者关闭
|
||||
`Object` 弹出的内容配置。请参考 [Dialog](#dialog) 配置说明。
|
||||
- `quickEdit` 配置后在内容区增加一个编辑按钮，点击后弹出一个编辑框。
|
||||
`boolean` 简单的开启或者关闭
|
||||
`Object` 快速编辑详情，请参考 [FormItem](#formitem) 配置。
|
||||
`.mode` 模式如果设置为 `inline` 模式，则直接展示输入框，而不需要点击按钮后展示。
|
||||
`.saveImmediately` 开启后，直接保存，而不是等全部操作完后批量保存。
|
||||
- `copyable` 配置后会在内容区增加一个复制按钮，点击后把内容复制到剪切板。
|
||||
todo
|
||||
|
||||
### Tpl(Field)
|
||||
|
||||
请参考[tpl](#tpl)
|
||||
|
||||
### Plain(Field)
|
||||
|
||||
请参考[Plain](#plain)
|
||||
|
||||
### Json(Field)
|
||||
|
||||
todo
|
||||
|
||||
### Date(Field)
|
||||
|
||||
用来显示日期。
|
||||
|
||||
- `type` 请设置为 `date`。
|
||||
- `format` 默认为 `YYYY-MM-DD`，时间格式，请参考 moment 中的格式用法。
|
||||
- `valueFormat` 默认为 `X`，时间格式，请参考 moment 中的格式用法。
|
||||
|
||||
### Mapping(Field)
|
||||
|
||||
用来对值做映射显示。
|
||||
|
||||
- `type` 请设置为 `date`。
|
||||
- `map` 映射表, 比如
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "mapping",
|
||||
"name": "flag",
|
||||
"map": {
|
||||
"1": "<span class='label label-default'>One</span>",
|
||||
"*": "其他 ${flag}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
当值为 1 时，显示 One, 当值为其他时会命中 `*` 所以显示 `其他 flag的值`。
|
||||
|
||||
### Image(Field)
|
||||
|
||||
用来展示图片。
|
||||
|
||||
- `type` 请设置为 `image`。
|
||||
- `description` 图片描述。
|
||||
- `defaultImage` 默认图片地址。
|
||||
- `className` CSS 类名。
|
||||
- `src` 图片地址，支持变量。如果想动态显示，请勿配置。
|
||||
|
||||
### Progress(Field)
|
||||
|
||||
用来展示进度条。
|
||||
|
||||
- `type` 请设置为 `progress`。
|
||||
- `showLabel` 是否显示文字
|
||||
- `map` 等级配置
|
||||
默认
|
||||
|
||||
```json
|
||||
["bg-danger", "bg-warning", "bg-info", "bg-success", "bg-success"]
|
||||
```
|
||||
|
||||
展示的样式取决于当前值在什么区间段，比如以上的配置，把 100 切成了 5 分，前 1/5, 即 25 以前显示 `bg-danger` 背景。50 ~ 75 显示 `bg-info` 背景。
|
||||
|
||||
- `progressClassName` 进度外层 CSS 类名 默认为: `progress-xs progress-striped active m-t-xs m-b-none`
|
||||
- `progressBarClassName` 进度条 CSS 类名。
|
||||
|
||||
### Status(Field)
|
||||
|
||||
用来显示状态，用图表展示。
|
||||
|
||||
- `type` 请设置为 `status`。
|
||||
- `map` 图标配置
|
||||
|
||||
默认:
|
||||
|
||||
```json
|
||||
["fa fa-times text-danger", "fa fa-check text-success"]
|
||||
```
|
||||
|
||||
即如果值 `value % map.length` 等于 0 则显示第一个图标。`value % map.length` 等于 1 则显示第二个图标，无限类推。所以说 map 其实不只是支持 2 个，可以任意个。
|
||||
|
||||
这个例子，当值为 0 、2、4 ... 时显示红 `X`， 当值为 1, 3, 5 ... 绿 `√`
|
||||
|
||||
### Switch(Field)
|
||||
|
||||
用来占一个开关。
|
||||
|
||||
- `type` 请设置为 `switch`。
|
||||
- `option` 选项说明
|
||||
- `trueValue` 勾选后的值
|
||||
- `falseValue` 未勾选的值
|
||||
|
||||
## Tabs
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------------- | ----------------------- | ----------------------------------- | -------------------------------------------------------- |
|
||||
| type | `string` | `"tabs"` | 指定为 Tabs 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| tabsClassName | `string` | | Tabs Dom 的类名 |
|
||||
| tabs | `Array` | | tabs 内容 |
|
||||
| tabs[x].title | `string` | | Tab 标题 |
|
||||
| tabs[x].icon | `icon` | | Tab 的图标 |
|
||||
| tabs[x].tab | [Container](#container) | | 内容区 |
|
||||
| tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 |
|
||||
| tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 |
|
||||
| tabs[x].className | `string` | `"bg-white b-l b-r b-b wrapper-md"` | Tab 区域样式 |
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
"type": "tabs",
|
||||
"tabs": [
|
||||
{
|
||||
"title": "Tab 1",
|
||||
"tab": "Content 1"
|
||||
},
|
||||
|
||||
{
|
||||
"title": "Tab 2",
|
||||
"tab": "Content 2"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,140 +0,0 @@
|
|||
### Field 通用配置
|
||||
|
||||
- `name` 绑定变量名。
|
||||
- `placeholder` 当没有值时的展示内容。
|
||||
- `popOver` 配置后在内容区增加一个放大按钮，点击后弹出一个详情弹框。
|
||||
`boolean` 简单的开启或者关闭
|
||||
`Object` 弹出的内容配置。请参考 [Dialog](#dialog) 配置说明。
|
||||
- `quickEdit` 配置后在内容区增加一个编辑按钮，点击后弹出一个编辑框。
|
||||
`boolean` 简单的开启或者关闭
|
||||
`Object` 快速编辑详情，请参考 [FormItem](#formitem) 配置。
|
||||
`.mode` 模式如果设置为 `inline` 模式，则直接展示输入框，而不需要点击按钮后展示。
|
||||
`.saveImmediately` 开启后，直接保存，而不是等全部操作完后批量保存。
|
||||
- `copyable` 配置后会在内容区增加一个复制按钮，点击后把内容复制到剪切板。
|
||||
todo
|
||||
|
||||
### Tpl(Field)
|
||||
|
||||
请参考[tpl](#tpl)
|
||||
|
||||
### Plain(Field)
|
||||
|
||||
请参考[Plain](#plain)
|
||||
|
||||
### Json(Field)
|
||||
|
||||
todo
|
||||
|
||||
### Date(Field)
|
||||
|
||||
用来显示日期。
|
||||
|
||||
- `type` 请设置为 `date`。
|
||||
- `format` 默认为 `YYYY-MM-DD`，时间格式，请参考 moment 中的格式用法。
|
||||
- `valueFormat` 默认为 `X`，时间格式，请参考 moment 中的格式用法。
|
||||
|
||||
### Mapping(Field)
|
||||
|
||||
用来对值做映射显示。
|
||||
|
||||
- `type` 请设置为 `date`。
|
||||
- `map` 映射表, 比如
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "mapping",
|
||||
"name": "flag",
|
||||
"map": {
|
||||
"1": "<span class='label label-default'>One</span>",
|
||||
"*": "其他 ${flag}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
当值为 1 时，显示 One, 当值为其他时会命中 `*` 所以显示 `其他 flag的值`。
|
||||
|
||||
### Image(Field)
|
||||
|
||||
用来展示图片。
|
||||
|
||||
- `type` 请设置为 `image`。
|
||||
- `description` 图片描述。
|
||||
- `defaultImage` 默认图片地址。
|
||||
- `className` CSS 类名。
|
||||
- `src` 图片地址，支持变量。如果想动态显示，请勿配置。
|
||||
|
||||
### Progress(Field)
|
||||
|
||||
用来展示进度条。
|
||||
|
||||
- `type` 请设置为 `progress`。
|
||||
- `showLabel` 是否显示文字
|
||||
- `map` 等级配置
|
||||
默认
|
||||
|
||||
```json
|
||||
["bg-danger", "bg-warning", "bg-info", "bg-success", "bg-success"]
|
||||
```
|
||||
|
||||
展示的样式取决于当前值在什么区间段，比如以上的配置，把 100 切成了 5 分，前 1/5, 即 25 以前显示 `bg-danger` 背景。50 ~ 75 显示 `bg-info` 背景。
|
||||
|
||||
- `progressClassName` 进度外层 CSS 类名 默认为: `progress-xs progress-striped active m-t-xs m-b-none`
|
||||
- `progressBarClassName` 进度条 CSS 类名。
|
||||
|
||||
### Status(Field)
|
||||
|
||||
用来显示状态，用图表展示。
|
||||
|
||||
- `type` 请设置为 `status`。
|
||||
- `map` 图标配置
|
||||
|
||||
默认:
|
||||
|
||||
```json
|
||||
["fa fa-times text-danger", "fa fa-check text-success"]
|
||||
```
|
||||
|
||||
即如果值 `value % map.length` 等于 0 则显示第一个图标。`value % map.length` 等于 1 则显示第二个图标，无限类推。所以说 map 其实不只是支持 2 个，可以任意个。
|
||||
|
||||
这个例子，当值为 0 、2、4 ... 时显示红 `X`， 当值为 1, 3, 5 ... 绿 `√`
|
||||
|
||||
### Switch(Field)
|
||||
|
||||
用来占一个开关。
|
||||
|
||||
- `type` 请设置为 `switch`。
|
||||
- `option` 选项说明
|
||||
- `trueValue` 勾选后的值
|
||||
- `falseValue` 未勾选的值
|
||||
|
||||
## Tabs
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------------- | ----------------------- | ----------------------------------- | -------------------------------------------------------- |
|
||||
| type | `string` | `"tabs"` | 指定为 Tabs 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| tabsClassName | `string` | | Tabs Dom 的类名 |
|
||||
| tabs | `Array` | | tabs 内容 |
|
||||
| tabs[x].title | `string` | | Tab 标题 |
|
||||
| tabs[x].icon | `icon` | | Tab 的图标 |
|
||||
| tabs[x].tab | [Container](#container) | | 内容区 |
|
||||
| tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 |
|
||||
| tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 |
|
||||
| tabs[x].className | `string` | `"bg-white b-l b-r b-b wrapper-md"` | Tab 区域样式 |
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
"type": "tabs",
|
||||
"tabs": [
|
||||
{
|
||||
"title": "Tab 1",
|
||||
"tab": "Content 1"
|
||||
},
|
||||
|
||||
{
|
||||
"title": "Tab 2",
|
||||
"tab": "Content 2"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
### Static-XXX
|
||||
|
||||
- `type` 请设置成 `static-tpl`、`static-plain`、`static-json`、`static-date`、`static-datetime`、`static-time`、`static-mapping`、`static-image`、`static-progress`、`static-status`或者`static-switch`
|
||||
|
||||
纯用来展示数据的，用法跟 crud 里面的[Column](#column)一样, 且支持 quickEdit 和 popOver 功能。
|
||||
|
||||
```schema:height="250" scope="form-item"
|
||||
{
|
||||
"type": "static-json",
|
||||
"name": "json",
|
||||
"label": "Label",
|
||||
"value": {
|
||||
"a":"dd",
|
||||
"b":"asdasd"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -26,3 +26,21 @@
|
|||
"value": "A"
|
||||
}
|
||||
```
|
||||
|
||||
### Static-XXX
|
||||
|
||||
- `type` 请设置成 `static-tpl`、`static-plain`、`static-json`、`static-date`、`static-datetime`、`static-time`、`static-mapping`、`static-image`、`static-progress`、`static-status`或者`static-switch`
|
||||
|
||||
纯用来展示数据的，用法跟 crud 里面的[Column](#column)一样, 且支持 quickEdit 和 popOver 功能。
|
||||
|
||||
```schema:height="250" scope="form-item"
|
||||
{
|
||||
"type": "static-json",
|
||||
"name": "json",
|
||||
"label": "Label",
|
||||
"value": {
|
||||
"a":"dd",
|
||||
"b":"asdasd"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2492,14 +2492,14 @@ formItem 还可以是子表单类型。
|
|||
|
||||
PS: 当用作纯展示时，可以通过`value`配置项，设置右侧编辑器的值
|
||||
|
||||
```schema:height="350" scope="form-item"
|
||||
````schema:height="350" scope="form-item"
|
||||
{
|
||||
"type": "diff-editor",
|
||||
"name": "diff",
|
||||
"diffValue": "hello world",
|
||||
"label": "Diff-Editor"
|
||||
}
|
||||
```
|
||||
```Wizard支持用 JS 模板引擎来组织输出
|
||||
|
||||
### Static
|
||||
|
||||
|
|
@ -2528,7 +2528,7 @@ PS: 当用作纯展示时，可以通过`value`配置项，设置右侧编辑器
|
|||
"label": "Label",
|
||||
"value": "A"
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
### Static-XXX
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue