sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

页面容器参数改变

Browse Source 
Former-commit-id: 584a9329d7868d9e9aac27af8bb8548899f6bb6a [formerly 584a9329d7868d9e9aac27af8bb8548899f6bb6a [formerly 584a9329d7868d9e9aac27af8bb8548899f6bb6a [formerly 584a9329d7868d9e9aac27af8bb8548899f6bb6a [formerly d9f7b6d61f9bca4dd01d9bdeaa3e05689a4c957b [formerly 685176322dd7a7c07d9adc1afe718ac8769c6e2b]]]]]
Former-commit-id: 88308a03ec90c920658d225ca92d3d44329ae488
Former-commit-id: 658fe4466da6dfac5fca7f4d4f587300c297a6f4
Former-commit-id: e2f583b6a7c845b26d5713ab54427c1a30eae7c0 [formerly 7f060c7800831c725cce856ac0b97e64e8dc7df3]
Former-commit-id: b4a0e21cd492e0c91637c94e9ab9cbf7e896c52d
Former-commit-id: 52a1a9c80a6951a0341fbfe6ca6c748dae876747
Former-commit-id: 508b9083504c48c021f3664bd2f398aacce556f3
Former-commit-id: 5885f81448c937e04528c45ea8bd74f72dac37a9
Former-commit-id: e0337459e2f83705c4cf519840fd9532ed2a43e0
This commit is contained in:
liyang
2018-07-18 08:30:51 +08:00
parent 04f9ef1a19
commit 1f313f18cd
108 changed files with 142 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
docs/zh/components/container.md
View File

@@ -6,13 +6,8 @@
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| type | 容器类型 | 非 | String | card ghost full | card |
| type | 容器类型 | 非 | String | card ghost full | full |
| scroll | 滚动优化 | 非 | Boolean | | false |
| responsive | 响应式宽度 | 非 | Boolean | | false |
::: tip
`responsive` 参数设置只在 `type` 等于 `card` 或 `ghost` 时生效
:::
## 使用方法
@@ -40,25 +35,6 @@ export default {
</style>
```
### 基础页面容器
高度根据内容适应
``` vue
<d2-container>
主体内容
</d2-container>
```
使用 `slot`
``` vue
<d2-container>
<template slot="header">我是插入到 header 中的内容</template>
主体内容
</d2-container>
```
### 自适应填充页面容器
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽
@@ -101,6 +77,27 @@ export default {
</template>
```
### 卡片型页面容器
高度根据内容适应
``` vue
<d2-container type="card">
主体内容
</d2-container>
```
使用 `slot`
> 卡片型容器只有 header 插槽
``` vue
<d2-container type="card">
<template slot="header">我是插入到 header 中的内容</template>
主体内容
</d2-container>
```
### 隐形页面容器
不显示任何背景色和边框，通常这个模式只有在极少情况下会使用
@@ -111,4 +108,15 @@ export default {
</d2-container>
```
使用 `slot`
> 隐形页面容器只有 header 插槽
``` vue
<d2-container type="ghost">
<template slot="header">我是插入到 header 中的内容</template>
主体内容
</d2-container>
```
如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`