mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-11 05:38:32 +08:00
6.1 KiB
Executable File
6.1 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
配置与组件 | 配置与组件 | 0 | 💡 概念 | 配置与组件 | 9 |
最简单的 amis 配置
一个最简单的 amis 配置看起来是这样的:
{
"type": "page",
"body": "Hello World!"
}
请观察上面的代码,这是一段 JSON,它的含义是:
type
是 amis 节点中最重要的字段,它告诉 amis 当前节点需要渲染的是Page
组件。- 而
body
字段会作为Page
组件的属性,Page
组件根据这个值来渲染页面内容。
这段配置的效果如下所示:
{
"type": "page",
"body": "Hello World!"
}
上面这个配置是可以实时修改预览的,尝试改一下 Hello World!
的值。
不过这个实时预览功能对于某些属性不生效,如果发现不符合预期,需要复制 JSON,打开另一个页面后粘贴。
组件
上面提到,type
字段会告诉 amis 当前节点渲染的组件为Page
,组件节点的配置永远都是由 type
字段 (用于标识当前是哪个组件)和 属性 构成的。
{
"type": "xxx",
...其它属性
}
组件树
这次我们看一个稍微复杂一点的配置:
{
"type": "page",
"body": {
"type": "tpl",
"tpl": "Hello World!"
}
}
该配置渲染页面如下:
{
"type": "page",
"body": {
"type": "tpl",
"tpl": "Hello World!"
}
}
最终效果和前面的示例一样,但这次 Page
组件的 body
属性值配置了一个对象,通过type
指明body
内容区内会渲染一个叫Tpl
的组件,它是一个模板渲染组件。
在 body
中除了配置对象,还可以是数组,比如下面的例子:
[
{
"type": "tpl",
"tpl": "Hello World!"
},
{
"type": "divider"
},
{
"type": "form",
"body": [
{
"type": "input-text",
"name": "name",
"label": "姓名"
}
]
}
]
可以看到通过数组的形式,增加了 divider
和 form
组件。
除了 Page
之外,还有很多容器型的组件都有 body
属性,通过这种树形结构,amis 就能实现复杂页面制作。
注意:
Page
是 amis 页面配置中 必须也是唯一的顶级节点
通过树形来实现布局
下面这个页面就是通过树形组合出来的,大体结构是这样:
Page
├── Toolbar
│ └─ Form 顶部表单项
├── Grid // 用于水平布局
│ ├─ Panel
│ │ └─ Tabs
│ │ └─ Chart
│ └─ Panel
│ └─ Chart
└── CRUD
{
"type": "page",
"toolbar": [{
"type": "form",
"panelClassName": "mb-0",
"title": "",
"body": [{
"type": "select",
"label": "区域",
"name": "businessLineId",
"selectFirst": true,
"mode": "inline",
"options": ["北京", "上海"],
"checkAll": false
}, {
"label": "时间范围",
"type": "input-date-range",
"name": "dateRange",
"inline": true,
"value": "-1month,+0month",
"inputFormat": "YYYY-MM-DD",
"format": "YYYY-MM-DD",
"closeOnSelect": true,
"clearable": false
}],
"actions": [],
"mode": "inline",
"target": "mainPage",
"submitOnChange": true,
"submitOnInit": true
}],
"body": [{
"type": "grid",
"columns": [
{
"type": "panel",
"className": "h-full",
"body": {
"type": "tabs",
"tabs": [{
"title": "消费趋势",
"tab": [{
"type": "chart",
"config": {
"title": {
"text": "消费趋势"
},
"tooltip": {},
"xAxis": {
"type": "category",
"boundaryGap": false,
"data": ["一月", "二月", "三月", "四月", "五月", "六月"]
},
"yAxis": {},
"series": [{
"name": "销量",
"type": "line",
"areaStyle": {
"color": {
"type": "linear",
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"colorStops": [{
"offset": 0,
"color": "rgba(84, 112, 197, 1)"
}, {
"offset": 1,
"color": "rgba(84, 112, 197, 0)"
}],
"global": false
}
},
"data": [5, 20, 36, 10, 10, 20]
}]
}
}]
}, {
"title": "账户余额",
"tab": "0"
}]
}
}, {
"type": "panel",
"className": "h-full",
"body": [{
"type": "chart",
"config": {
"title": {
"text": "使用资源占比"
},
"series": [{
"type": "pie",
"data": [{
"name": "BOS",
"value": 70
}, {
"name": "CDN",
"value": 68
}, {
"name": "BCC",
"value": 48
}, {
"name": "DCC",
"value": 40
}, {
"name": "RDS",
"value": 32
}]
}]
}
}]
}]
}, {
"type": "crud",
"className": "m-t-sm",
"api": "/api/mock2/sample",
"columns": [{
"name": "id",
"label": "ID"
}, {
"name": "engine",
"label": "Rendering engine"
}, {
"name": "browser",
"label": "Browser"
}, {
"name": "platform",
"label": "Platform(s)"
}, {
"name": "version",
"label": "Engine version"
}, {
"name": "grade",
"label": "CSS grade"
}]
}]
}
amis 后续将会实现新的布局模式,将更容易实现复杂布局效果