amis/docs/components/wrapper.md
2020-07-29 16:20:21 +08:00

90 lines
1.7 KiB
Markdown
Executable File

---
title: Wrapper 包裹容器
description:
type: 0
group: ⚙ 组件
menuName: Wrapper
icon:
order: 72
---
简单的一个包裹容器组件
## 基本用法
```schema:height="200" scope="body"
{
"type": "wrapper",
"body": "内容",
"className": "b"
}
```
## 不同内边距
通过配置`size`属性,可以调整内边距
```schema:height="550" scope="body"
[
{
"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"
}
]
```
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| --------- | --------------------------------- | ----------- | ---------------------------- |
| type | `string` | `"wrapper"` | 指定为 Wrapper 渲染器 |
| className | `string` | | 外层 Dom 的类名 |
| size | `string` | | 支持: `xs`、`sm`、`md`和`lg` |
| body | [SchemaNode](../types/schemanode) | | 内容容器 |