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="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>
|
||||||
|
@ -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">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user