mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
fix docs
This commit is contained in:
parent
c9f4b1dd0b
commit
d7af07d838
@ -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>
|
||||
|
@ -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">
|
||||
|
Loading…
x
Reference in New Issue
Block a user