This commit is contained in:
cookfront 2017-03-22 18:28:20 +08:00
parent c9f4b1dd0b
commit d7af07d838
2 changed files with 22 additions and 56 deletions

View File

@ -3,19 +3,8 @@
class="demo-block" class="demo-block"
:class="blockClass"> :class="blockClass">
<slot name="examples"></slot> <slot name="examples"></slot>
<div class="highlight-wrapper"> <slot name="highlight">
<div class="highlight-toggle"> </slot>
<span v-text="description"></span>
<i class="zan-icon zan-icon-arrow" @click="showCode = !showCode" :class="{
'zan-icon-arrow-close': !showCode
}">
</i>
</div>
<div class="highlight-code" v-show="showCode">
<slot name="highlight">
</slot>
</div>
</div>
</div> </div>
</template> </template>
@ -25,12 +14,6 @@ export default {
description: String description: String
}, },
data() {
return {
showCode: true
};
},
computed: { computed: {
blockClass() { blockClass() {
return `demo-${this.$route.path.split('/').pop()}`; return `demo-${this.$route.path.split('/').pop()}`;
@ -59,8 +42,6 @@ export default {
.examples { .examples {
width: 320px; width: 320px;
height: 568px;
background: url(https://b.yzcdn.cn/v2/image/wap/zanui-mobile-demo.png) no-repeat;
float: right; float: right;
box-sizing: border-box; box-sizing: border-box;
padding: 74px 0 0; padding: 74px 0 0;
@ -69,7 +50,7 @@ export default {
overflow: auto; overflow: auto;
} }
.highlight-wrapper { .highlight {
margin-right: 345px; margin-right: 345px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #E5E5E5; border: 1px solid #E5E5E5;
@ -92,32 +73,5 @@ export default {
} }
} }
} }
.highlight-toggle {
padding: 20px;
border-bottom: 1px solid #e5e5e5;
color: #666;
position: relative;
.zan-icon {
position: absolute;
top: 20px;
right: 20px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 12px;
color: #888;
transform: rotate(-90deg);
border: 2px solid #888;
border-radius: 50%;
cursor: pointer;
&.zan-icon-arrow-close {
transform: rotate(90deg);
}
}
}
} }
</style> </style>

View File

@ -17,13 +17,11 @@
## Button 按钮 ## Button 按钮
### 使用指南 ### 按钮功能
一些使用指南 只接受`primary`, `default`, `danger`三种类型,默认`default`
### 代码示例 :::demo 按钮功能
:::demo 按钮功能只接受primary, default, danger三种类型默认default。
```html ```html
<zan-row> <zan-row>
<zan-col span="24"> <zan-col span="24">
@ -39,6 +37,8 @@
``` ```
::: :::
### 禁用状态
:::demo 禁用状态 :::demo 禁用状态
```html ```html
<zan-row> <zan-row>
@ -49,7 +49,11 @@
``` ```
::: :::
:::demo 按钮尺寸,只接受`large`, `normal`, `small`, `mini`四种尺寸,默认`normal` ### 按钮尺寸
只接受`large`, `normal`, `small`, `mini`四种尺寸,默认`normal`
:::demo 按钮尺寸
```html ```html
<zan-row> <zan-row>
<zan-col span="24"> <zan-col span="24">
@ -70,7 +74,11 @@
``` ```
::: :::
:::demo 自定义按钮标签,按钮默认是`button`标签,可以使用`tag`属性修改为一个`a`标签。 ### 自定义按钮标签
按钮默认是`button`标签,可以使用`tag`属性修改为一个`a`标签。
:::demo 自定义按钮标签
```html ```html
<zan-row> <zan-row>
<zan-col span="24"> <zan-col span="24">
@ -80,6 +88,8 @@
``` ```
::: :::
### loading按钮
:::demo loading按钮 :::demo loading按钮
```html ```html
<zan-row> <zan-row>
@ -93,6 +103,8 @@
``` ```
::: :::
### button group
:::demo button group :::demo button group
```html ```html
<div class="button-group"> <div class="button-group">