mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 20:09:08 +08:00
docs: ✏️ [Column](#column)
This commit is contained in:
SIMDD
parent
827b8142e1
commit
620a557bb7
@ -3,7 +3,7 @@
|
||||
卡片的展示形式。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------------- | ---------------------------- | ----------------------------------- | -------------------------------------- |
|
||||
| ---------------------- | -------------------------------- | ----------------------------------- | ------------------------------------------ |
|
||||
| type | `string` | `"card"` | 指定为 Card 渲染器 |
|
||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||
| header | `Object` | | Card 头部内容设置 |
|
||||
@ -14,9 +14,9 @@
|
||||
| header.avatar | `string` | | 图片 |
|
||||
| header.highlight | `boolean` | | 是否点亮 |
|
||||
| header.avatarClassName | `string` | `"pull-left thumb avatar b-3x m-r"` | 图片类名 |
|
||||
| body | `Array` 或者 [Field](#field) | | 内容容器，主要用来放置 [Field](#field) |
|
||||
| body | `Array` 或者 [Field](./Field.md) | | 内容容器，主要用来放置 [Field](./Field.md) |
|
||||
| bodyClassName | `string` | `"padder m-t-sm m-b-sm"` | 内容区域类名 |
|
||||
| actions | Array Of [Button](#button) | | 按钮区域 |
|
||||
| actions | Array Of [Button](./Button.md) | | 按钮区域 |
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
卡片集合。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | ------------- | ------------------- | -------------------------- |
|
||||
| --------------- | ----------------- | ------------------- | -------------------------- |
|
||||
| type | `string` | | `"cards"` 指定为卡片集合。 |
|
||||
| title | `string` | | 标题 |
|
||||
| source | `string` | `${items}` | 数据源, 绑定当前环境变量 |
|
||||
@ -12,7 +12,7 @@
|
||||
| headerClassName | `string` | `amis-grid-header` | 顶部外层 CSS 类名 |
|
||||
| footerClassName | `string` | `amis-grid-footer` | 底部外层 CSS 类名 |
|
||||
| itemClassName | `string` | `col-sm-4 col-md-3` | 卡片 CSS 类名 |
|
||||
| card | [Card](#card) | | 配置卡片信息 |
|
||||
| card | [Card](./Card.md) | | 配置卡片信息 |
|
||||
|
||||
```schema:height="450" scope="body"
|
||||
{
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
表格中的列配置
|
||||
|
||||
- `type` 默认为 `text`，支持： `text`、`html`、`tpl`、`image`、`progress`、`status`、`date`、`datetime`、`time`、`json`、`mapping`参考 [Field 说明](#field)和[Operation](#operation)。
|
||||
- `type` 默认为 `text`，支持： `text`、`html`、`tpl`、`image`、`progress`、`status`、`date`、`datetime`、`time`、`json`、`mapping`参考 [Field 说明](./Field.md)和[Operation](./Operation.md)。
|
||||
- `name` 用来关联列表数据中的变量 `key`。
|
||||
- `label` 列标题。
|
||||
- `copyable` 开启后，会支持内容点击复制。
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
Dialog 由 [Action](#action) 触发。他是一个类似于 [Page](#page) 的容器模型。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | ------------------------------------- | ------------ | ------------------------------------------------ |
|
||||
| ------------- | ----------------------------------------------- | ------------ | ------------------------------------------------ |
|
||||
| type | `string` | | `"dialog"` 指定为 Dialog 渲染器 |
|
||||
| title | `string` 或者 [Container](#Container) | | 弹出层标题 |
|
||||
| body | [Container](#Container) | | 往 Dialog 内容区加内容 |
|
||||
| title | `string` 或者 [Container](./Types.md#Container) | | 弹出层标题 |
|
||||
| body | [Container](./Types.md#Container) | | 往 Dialog 内容区加内容 |
|
||||
| size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` |
|
||||
| bodyClassName | `string` | `modal-body` | Dialog body 区域的样式类名 |
|
||||
| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Dialog |
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
Drawer 由 [Action](#action) 触发。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | ------------------------------------- | ------------ | ------------------------------------------------ |
|
||||
| ------------- | ----------------------------------------------- | ------------ | ------------------------------------------------ |
|
||||
| type | `string` | | `"drawer"` 指定为 Drawer 渲染器 |
|
||||
| title | `string` 或者 [Container](#Container) | | 弹出层标题 |
|
||||
| body | [Container](#Container) | | 往 Dialog 内容区加内容 |
|
||||
| title | `string` 或者 [Container](./Types.md#Container) | | 弹出层标题 |
|
||||
| body | [Container](./Types.md#Container) | | 往 Dialog 内容区加内容 |
|
||||
| size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` |
|
||||
| bodyClassName | `string` | `modal-body` | Dialog body 区域的样式类名 |
|
||||
| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Dialog |
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
## Grid
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------- | ----------------------- | -------- | ----------------------- |
|
||||
| ------------------- | --------------------------------- | -------- | ----------------------- |
|
||||
| type | `string` | `"grid"` | 指定为 Grid 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| columns | `Array` | | 列集合 |
|
||||
| columns[x] | [Container](#Container) | | 成员可以是其他渲染器 |
|
||||
| columns[x] | [Container](./Types.md#Container) | | 成员可以是其他渲染器 |
|
||||
| columns[x].xs | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].xsHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].xsOffset | `int` | | 偏移量 1 - 12 |
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
## HBox
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------------------------- | ----------------------- | -------------- | -------------------- |
|
||||
| -------------------------- | --------------------------------- | -------------- | -------------------- |
|
||||
| type | `string` | `"hbox"` | 指定为 HBox 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| columns | `Array` | | 列集合 |
|
||||
| columns[x] | [Container](#Container) | | 成员可以是其他渲染器 |
|
||||
| columns[x] | [Container](./Types.md#Container) | | 成员可以是其他渲染器 |
|
||||
| columns[x].columnClassName | `string` | `"wrapper-xs"` | 列上类名 |
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
列表展示。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------------ | ---------------------------- | --------------------- | -------------------------------------- |
|
||||
| ------------------------ | -------------------------------- | --------------------- | ------------------------------------------ |
|
||||
| type | `string` | | `"list"` 指定为列表展示。 |
|
||||
| title | `string` | | 标题 |
|
||||
| source | `string` | `${items}` | 数据源, 绑定当前环境变量 |
|
||||
@ -18,8 +18,8 @@
|
||||
| listItem.avatar | `string` | | 图片地址，支持模板语法如： \${xxx} |
|
||||
| listItem.avatarClassName | `string` | `thumb-sm avatar m-r` | 图片 CSS 类名 |
|
||||
| listItem.desc | `string` | | 描述，支持模板语法如： \${xxx} |
|
||||
| listItem.body | `Array` 或者 [Field](#field) | | 内容容器，主要用来放置 [Field](#field) |
|
||||
| listItem.actions | Array Of [Button](#button) | | 按钮区域 |
|
||||
| listItem.body | `Array` 或者 [Field](./Field.md) | | 内容容器，主要用来放置 [Field](./Field.md) |
|
||||
| listItem.actions | Array Of [Button](./Button.md) | | 按钮区域 |
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
|
||||
@ -4,4 +4,4 @@
|
||||
|
||||
- `type` 请设置成 `operation`。
|
||||
- `label` 列标题。
|
||||
- `buttons` 按钮集合，请参考[Button](#button) 按钮配置说明。
|
||||
- `buttons` 按钮集合，请参考[Button](./Button.md) 按钮配置说明。
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
可以把相关信息以盒子的形式展示到一块。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | -------------------------- | -------------------------------------- | ------------------- |
|
||||
| ---------------- | ------------------------------ | -------------------------------------- | ------------------- |
|
||||
| type | `string` | `"panel"` | 指定为 Panel 渲染器 |
|
||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||
| headerClassName | `string` | `"panel-heading"` | header 区域的类名 |
|
||||
@ -14,7 +14,7 @@
|
||||
| header | [Container](#container) | | 顶部容器 |
|
||||
| body | [Container](#container) | | 内容容器 |
|
||||
| footer | [Container](#container) | | 底部容器 |
|
||||
| actions | Array Of [Button](#button) | | 按钮区域 |
|
||||
| actions | Array Of [Button](./Button.md) | | 按钮区域 |
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
- `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 功能。
|
||||
纯用来展示数据的，用法跟 crud 里面的[Column](.Column.md)一样, 且支持 quickEdit 和 popOver 功能。
|
||||
|
||||
```schema:height="250" scope="form-item"
|
||||
{
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
表格展示。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | -------------------------- | ------------------------ | ------------------------------------------------------- |
|
||||
| ---------------- | ----------------------------- | ------------------------ | ------------------------------------------------------- |
|
||||
| type | `string` | | `"table"` 指定为 table 渲染器 |
|
||||
| title | `string` | | 标题 |
|
||||
| source | `string` | `${items}` | 数据源, 绑定当前环境变量 |
|
||||
@ -15,7 +15,7 @@
|
||||
| headerClassName | `string` | `crud-table-header` | 顶部外层 CSS 类名 |
|
||||
| footerClassName | `string` | `crud-table-footer` | 底部外层 CSS 类名 |
|
||||
| toolbarClassName | `string` | `crud-table-toolbar` | 工具栏 CSS 类名 |
|
||||
| columns | Array of [Column](#column) | | 用来设置列信息 |
|
||||
| columns | Array of [Column](.Column.md) | | 用来设置列信息 |
|
||||
|
||||
```schema:height="700" scope="body"
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user