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

clear

Browse Source 
Former-commit-id: e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly 5793d72d458b7eeaf28a097d026168cebc9fc256 [formerly 9c8de3644bd40a55711e618742e29cce390e4c5f]]]]]
Former-commit-id: 05ca3c8da65f8583c142720628aa6ea71d2dbf45
Former-commit-id: 7a4d2fba696e901db86071ea2810e9c932c976ad
Former-commit-id: c18d3689200ca0e528fbf9bf171f6e1b50131bc3 [formerly 455e9952ca890cd8ad882250cfb9eabd944d44ee]
Former-commit-id: 021fa8191681fe4f22e9a9f40389831a847e9066
Former-commit-id: 1022b7792417ce366901b9d5284762a015dd6d26
Former-commit-id: bed799410be508713cac76b7c8cf02d4457fe996
Former-commit-id: f6787cfaac3404132ad1011e2707e08484708ca9
Former-commit-id: 7a8a3baca9ef30393744fd56def6d608b51dcddd
This commit is contained in:
liyang
2018-07-16 10:43:14 +08:00
parent c53973a35f
commit 1d310c9c7d
496 changed files with 3 additions and 23673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,114 +0,0 @@
# 页面容器
页面容器组件是每个页面的基础，为了在整个项目中统一效果，它应该是 `<template>` 组件的直接子组件
## 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| type | 容器类型 | 非 | String | card ghost full | card |
| scroll | 滚动优化 | 非 | Boolean | | false |
| responsive | 响应式宽度 | 非 | Boolean | | false |
::: tip
`responsive` 参数设置只在 `type` 等于 `card` 或 `ghost` 时生效
:::
## 使用方法
一个基础单文件页面组件的示例
``` vue
<template>
<d2-container>
<template slot="header">
可选的 header 内容 ...
</template>
主体内容 ...
</d2-container>
</template>
<script>
export default {
name: 'your-component-name'
}
</script>
<style lang="scss">
// 需要的话引入
@import '~@/assets/style/public.scss';
</style>
```
### 基础页面容器
高度根据内容适应
``` vue
<d2-container>
主体内容
</d2-container>
```
使用 `slot`
``` vue
<d2-container>
<template slot="header">我是插入到 header 中的内容</template>
主体内容
</d2-container>
```
### 自适应填充页面容器
无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽
示例：
``` vue
<template>
<d2-container type="full">
<template slot="header">
可选的 header 内容 ...
</template>
主体内容 ...
<template slot="footer">
可选的 footer 内容 ...
</template>
</d2-container>
</template>
```
`v1.1.4` 新增
你可以通过设置 `scroll` 来启用自定义滚动条，看起来更美观一些
> 有些情况下使用滚动优化模式会有意外影响，例如页面内含有可拖拽的元素，这时候最好不要使用此模式
示例：
``` vue
<template>
<d2-container type="full" scroll>
<template slot="header">
可选的 header 内容 ...
</template>
主体内容 ...
<template slot="footer">
可选的 footer 内容 ...
</template>
</d2-container>
</template>
```
### 隐形页面容器
不显示任何背景色和边框，通常这个模式只有在极少情况下会使用
``` vue
<d2-container type="ghost">
主体内容
</d2-container>
```
如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`