mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-06 05:58:25 +08:00
37c2b42773
* feat: wrapper组件 style 支持动态获取 * feat: wrapper组件 style 支持动态获取
2.6 KiB
Executable File
2.6 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Wrapper 包裹容器 | 0 | ⚙ 组件 | Wrapper | 72 |
简单的一个包裹容器组件,相当于用 div 包含起来,最大的用处是用来配合 css 进行布局。
基本用法
{
"type": "wrapper",
"body": "内容",
"className": "b"
}
上面例子中的
"className": "b"
是为了增加边框,不然看不出来。
动态获取
直接返回一个对象
{
"type": "page",
"data": {
"style": {
"color": "#aaa"
}
},
"body": [
{
"type": "wrapper",
"body": "内容",
"className": "b",
"style": "${style}"
}
]
}
返回变量
{
"type": "page",
"data": {
"color": "#aaa"
},
"body": [
{
"type": "wrapper",
"body": "内容",
"className": "b",
"style": {
"color": "${color}",
"fontSize": "30px"
}
}
]
}
不同内边距
通过配置size
属性,可以调整内边距
[
{
"type": "wrapper",
"body": "默认内边距",
"className": "b"
},
{
"type": "divider"
},
{
"type": "wrapper",
"body": "极小的内边距",
"size": "xs",
"className": "b"
},
{
"type": "divider"
},
{
"type": "wrapper",
"body": "小的内边距",
"size": "sm",
"className": "b"
},
{
"type": "divider"
},
{
"type": "wrapper",
"body": "中等的内边距",
"size": "md",
"className": "b"
},
{
"type": "divider"
},
{
"type": "wrapper",
"body": "大的内边距",
"size": "lg",
"className": "b"
},
{
"type": "divider"
},
{
"type": "wrapper",
"body": "无内边距",
"size": "none",
"className": "b"
}
]
style
1.1.5 版本
wrapper 可以设置 style,当成一个 div
标签来用
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
"wrapper" |
指定为 Wrapper 渲染器 |
className | string |
外层 Dom 的类名 | |
size | string |
支持: xs 、sm 、md 和lg |
|
style | Object | string |
自定义样式 | |
body | SchemaNode | 内容容器 |