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

修改文档

Browse Source 
Former-commit-id: edd9508dd4ea2e3cacae729ee154a44e5ad7bef4 [formerly edd9508dd4ea2e3cacae729ee154a44e5ad7bef4 [formerly edd9508dd4ea2e3cacae729ee154a44e5ad7bef4 [formerly edd9508dd4ea2e3cacae729ee154a44e5ad7bef4 [formerly fddabeee0d8e10f2eba15fa501c08d293b92b1fb [formerly 98d9bab87141373a7da7e7197242376f8326dfc6]]]]]
Former-commit-id: 1554a4a75d3c8d04269a2c702c810f14c956d058
Former-commit-id: 537f5148a1ae0b9e454b4e6e82efada5e9086181
Former-commit-id: 30f36236c6e27385e85cc83264b9d85c9c91eb01 [formerly 57f1072da69969a18be9e757ca086d030fae8dc4]
Former-commit-id: d56dc8a2e39ba7fd380dd887ba0f5f9b548eabac
Former-commit-id: 15d9368f35197f6f20a615d382a619f7c1e5d17c
Former-commit-id: cf3e4dfa69c36c23209b29295c38407fbccc6ac0
Former-commit-id: f8444e2f52271a684daf90947b7b229090ff6b00
Former-commit-id: 37ddf26c726207755e0711db83d38a2800fed0f1
This commit is contained in:
liyang
2018-07-22 16:01:09 +08:00
parent d19334b1ac
commit c473e5d1e5
26 changed files with 184 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,6 +17,14 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
页面内容较少时，container 也会填满主区域：
``` vue
<template>
<d2-container>
内容
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_normal_short@2x.png)
页面有较多内容时会在侧面产生滚动条
@@ -25,6 +33,16 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
支持 header 和 footer 插槽，两个区域分别会固定在主体区域的顶部和底部，内容压缩至中间
``` vue
<template>
<d2-container>
<template slot="header">Header</template>
内容
<template slot="footer">Footer</template>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_slot_short@2x.png)
如果使用插槽后内容超出一屏，滚动条会出现在 header 和 footer 之间
@@ -33,6 +51,14 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
设置 scroll 属性可以启用自定义滚动条，自定义滚动条在内容不满一屏时不会显示
``` vue
<template>
<d2-container scroll>
内容
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_bs_short@2x.png)
超出一屏后在滚动时显示自定义滚动条
@@ -41,12 +67,30 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会出现在 header 和 footer 之间
``` vue
<template>
<d2-container scroll>
<template slot="header">Header</template>
内容
<template slot="footer">Header</template>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_full_bs_long-slot@2x.png)
## card
卡片模式适用于简单的小页面，可以方便地实现下面的布局效果：
``` vue
<template>
<d2-container type="card">
内容
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_normal_short@2x.png)
如果内容超出一屏长度，会在右侧显示滚动条
@@ -59,6 +103,16 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
支持 header 和 footer 插槽，header 区域会固定在顶部，footer 区域会固定在底部
``` vue
<template>
<d2-container type="card">
<template slot="header">Header</template>
<d2-demo-article/>
<template slot="footer">Footer</template>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_slot_short@2x.png)
如果使用插槽后内容超出一屏，滚动条会在 header 和 footer 之间显示
@@ -71,6 +125,14 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
设置 scroll 属性可以启用自定义滚动条，滚动条在内容不满一屏时不会显示
``` vue
<template>
<d2-container type="card" scroll>
内容
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_card_bs_short@2x.png)
超出一屏后在滚动时显示自定义滚动条
@@ -79,6 +141,16 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会在 header 和 footer 之间显示
``` vue
<template>
<d2-container type="card" scroll>
<template slot="header">Header</template>
内容
<template slot="footer">Footer</template>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/2018-07-22-autorename-1-2018-07-22-12-03-45-long-slot@2x.png)
如果使用插槽后内容超出一屏，自定义滚动条滚动到底部后主体区域依然会距离底部 20px 距离
@@ -89,6 +161,26 @@ full 模式会生成一个无论内容多少，都会填满主区域的页面容
ghost 模式适合对页面有定制需求的用户，此模式生成一个没有背景颜色的页面区域
``` vue
<template>
<d2-container type="ghost">
内容
</d2-container>
</template>
```
该模式默认没有内边距，示例中的内边距样式需要自行添加，比如可以在组件内嵌添加一层带有 .d2-pt 和 .d2-pb class 的 div，像下面这样
``` vue
<template>
<d2-container type="ghost">
<div class="d2-pt d2-pb">
内容
</div>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_normal_short@2x.png)
如果内容超出一屏长度，会在右侧显示滚动条
@@ -97,6 +189,30 @@ ghost 模式适合对页面有定制需求的用户，此模式生成一个没
支持 header 和 footer 插槽，header 区域会固定在顶部，footer 区域会固定在底部
``` vue
<template>
<d2-container type="ghost">
<template slot="header">Header</template>
内容
<template slot="footer">Footer</template>
</d2-container>
</template>
```
如果你希望有内边距：
``` vue
<template>
<d2-container type="ghost">
<template slot="header">Header</template>
<div class="d2-pt d2-pb">
内容
</div>
<template slot="footer">Footer</template>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_slot_short@2x.png)
如果使用插槽后内容超出一屏，滚动条会出现在 header 和 footer 之间
@@ -105,6 +221,26 @@ ghost 模式适合对页面有定制需求的用户，此模式生成一个没
设置 scroll 属性可以启用自定义滚动条，自定义滚动条在内容不满一屏时不会显示
``` vue
<template>
<d2-container type="ghost" scroll>
内容
</d2-container>
</template>
```
同样，如果你希望有内边距：
``` vue
<template>
<d2-container type="ghost" scroll>
<div class="d2-pt d2-pb">
内容
</div>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_bs_short@2x.png)
超出一屏后在滚动时显示自定义滚动条
@@ -113,6 +249,30 @@ ghost 模式适合对页面有定制需求的用户，此模式生成一个没
如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会在 header 和 footer 之间显示
``` vue
<template>
<d2-container type="ghost" scroll>
<template slot="header">Header</template>
内容
<template slot="footer">Footer</template>
</d2-container>
</template>
```
有内边距：
``` vue
<template>
<d2-container type="ghost" scroll>
<template slot="header">Header</template>
<div class="d2-pt d2-pb">
内容
</div>
<template slot="footer">Footer</template>
</d2-container>
</template>
```
![](http://fairyever.qiniudn.com/d2-container-guide-201807221232AM_ghost_bs_long-slot@2x.png)
## 注