mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
fix doc
This commit is contained in:
parent
c611ca527a
commit
a3c03e1b65
@ -1,17 +1,20 @@
|
||||
---
|
||||
title: Json
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Json
|
||||
icon:
|
||||
icon:
|
||||
order: 54
|
||||
---
|
||||
|
||||
JSON 展示组件
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="300"
|
||||
可以配置 `value` 展示 `json` 格式数据
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"type": "page",
|
||||
"body": {
|
||||
@ -27,6 +30,108 @@ JSON 展示组件
|
||||
}
|
||||
```
|
||||
|
||||
## 获取数据链值
|
||||
|
||||
也可以通过配置 `source` 获取数据链中的值
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"type": "page",
|
||||
"data":{
|
||||
"json":{
|
||||
"a": "a",
|
||||
"b": {
|
||||
"c": "c"
|
||||
}
|
||||
}
|
||||
},
|
||||
"body": {
|
||||
"type": "json",
|
||||
"source": "${json}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 用作 Field 时
|
||||
|
||||
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时,可以设置`name`属性,映射同名变量
|
||||
|
||||
### Table 中的列类型
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
"type": "table",
|
||||
"data": {
|
||||
"items": [
|
||||
{
|
||||
"id": "1",
|
||||
"json": {
|
||||
"a": "a1",
|
||||
"b": {
|
||||
"c": "c1"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"json": {
|
||||
"a": "a2",
|
||||
"b": {
|
||||
"c": "c2"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"json": {
|
||||
"a": "a3",
|
||||
"b": {
|
||||
"c": "c3"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "Id"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "json",
|
||||
"label": "颜色",
|
||||
"type": "json"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
List 的内容、Card 卡片的内容配置同上
|
||||
|
||||
### Form 中静态展示
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"data": {
|
||||
"json": {
|
||||
"a": "a",
|
||||
"b": {
|
||||
"c": "c"
|
||||
}
|
||||
}
|
||||
},
|
||||
"controls": [
|
||||
{
|
||||
"type": "static-json",
|
||||
"name": "json",
|
||||
"label": "颜色"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 主题
|
||||
|
||||
可配置`jsonTheme`,指定显示主题,可选`twilight`和`eighties`,默认为`twilight`。
|
||||
@ -60,7 +165,6 @@ JSON 展示组件
|
||||
]
|
||||
```
|
||||
|
||||
|
||||
## 配置默认展开层级
|
||||
|
||||
```schema:height="300"
|
||||
@ -82,19 +186,15 @@ JSON 展示组件
|
||||
|
||||
如上,`levelExpand`配置为`0`,则默认不展开。
|
||||
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | -------- | ---------- | ------------------------------------------------------------------------------------ |
|
||||
| type | `string` | | 如果在 Table、Card 和 List 中,为`"json"`;在 Form 中用作静态展示,为`"static-json"` |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| placeholder | `string` | `-` | 占位文本 |
|
||||
| levelExpand | `number` | `1` | 默认展开的层级 |
|
||||
| jsonTheme | `string` | `twilight` | 主题,可选`twilight`和`eighties` |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | --------- | ---------- | ------------------------------------------------------------------------------------ |
|
||||
| type | `string` | | 如果在 Table、Card 和 List 中,为`"json"`;在 Form 中用作静态展示,为`"static-json"` |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| value | `object` | | json 值 |
|
||||
| source | `string` | `''` | 通过数据映射获取数据链中的值 |
|
||||
| placeholder | `string` | `-` | 占位文本 |
|
||||
| levelExpand | `number` | `1` | 默认展开的层级 |
|
||||
| hideRoot | `boolean` | `false` | 是否隐藏根节点 |
|
||||
| jsonTheme | `string` | `twilight` | 主题,可选`twilight`和`eighties` |
|
||||
|
Loading…
Reference in New Issue
Block a user