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="blockClass">
<slot name="examples"></slot>
<div class="highlight-wrapper">
<div class="highlight-toggle">
<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>
<slot name="highlight">
</slot>
</div>
</template>
@ -25,12 +14,6 @@ export default {
description: String
},
data() {
return {
showCode: true
};
},
computed: {
blockClass() {
return `demo-${this.$route.path.split('/').pop()}`;
@ -59,8 +42,6 @@ export default {
.examples {
width: 320px;
height: 568px;
background: url(https://b.yzcdn.cn/v2/image/wap/zanui-mobile-demo.png) no-repeat;
float: right;
box-sizing: border-box;
padding: 74px 0 0;
@ -69,7 +50,7 @@ export default {
overflow: auto;
}
.highlight-wrapper {
.highlight {
margin-right: 345px;
box-sizing: border-box;
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>

View File

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