[Doc] new theme
This commit is contained in:
@@ -1,15 +1,16 @@
|
||||
## Button
|
||||
# Button
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Button } from 'vant';
|
||||
|
||||
Vue.use(Button);
|
||||
```
|
||||
|
||||
### Usage
|
||||
## Usage
|
||||
|
||||
#### Type
|
||||
### Type
|
||||
|
||||
```html
|
||||
<van-button type="default">Default</van-button>
|
||||
@@ -19,28 +20,28 @@ Vue.use(Button);
|
||||
<van-button type="warning">Warning</van-button>
|
||||
```
|
||||
|
||||
#### Plain
|
||||
### Plain
|
||||
|
||||
```html
|
||||
<van-button plain type="primary">Primary</van-button>
|
||||
<van-button plain type="danger">Danger</van-button>
|
||||
```
|
||||
|
||||
#### Hairline
|
||||
### Hairline
|
||||
|
||||
```html
|
||||
<van-button plain hairline type="primary">Hairline</van-button>
|
||||
<van-button plain hairline type="danger">Hairline</van-button>
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
### Disabled
|
||||
|
||||
```html
|
||||
<van-button disabled type="primary">Diabled</van-button>
|
||||
<van-button disabled type="danger">Diabled</van-button>
|
||||
```
|
||||
|
||||
#### Loading
|
||||
### Loading
|
||||
|
||||
```html
|
||||
<van-button loading type="primary" />
|
||||
@@ -52,14 +53,14 @@ Vue.use(Button);
|
||||
/>
|
||||
```
|
||||
|
||||
#### Shape
|
||||
### Shape
|
||||
|
||||
```html
|
||||
<van-button square type="primary">Square</van-button>
|
||||
<van-button round type="danger">Round</van-button>
|
||||
```
|
||||
|
||||
#### Size
|
||||
### Size
|
||||
|
||||
```html
|
||||
<van-button size="large">Large</van-button>
|
||||
@@ -68,6 +69,8 @@ Vue.use(Button);
|
||||
<van-button size="mini">Mini</van-button>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|
||||
+13
-10
@@ -1,15 +1,16 @@
|
||||
## Button 按钮
|
||||
# Button 按钮
|
||||
|
||||
### 引入
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Button } from 'vant';
|
||||
|
||||
Vue.use(Button);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
## 代码演示
|
||||
|
||||
#### 按钮类型
|
||||
### 按钮类型
|
||||
|
||||
支持`default`、`primary`、`info`、`warning`、`danger`五种类型,默认为`default`
|
||||
|
||||
@@ -21,7 +22,7 @@ Vue.use(Button);
|
||||
<van-button type="danger">危险按钮</van-button>
|
||||
```
|
||||
|
||||
#### 朴素按钮
|
||||
### 朴素按钮
|
||||
|
||||
通过`plain`属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。
|
||||
|
||||
@@ -30,7 +31,7 @@ Vue.use(Button);
|
||||
<van-button plain type="danger">朴素按钮</van-button>
|
||||
```
|
||||
|
||||
#### 细边框
|
||||
### 细边框
|
||||
|
||||
设置`hairline`属性可以开启 0.5px 边框,基于伪类实现
|
||||
|
||||
@@ -39,7 +40,7 @@ Vue.use(Button);
|
||||
<van-button plain hairline type="danger">细边框按钮</van-button>
|
||||
```
|
||||
|
||||
#### 禁用状态
|
||||
### 禁用状态
|
||||
|
||||
通过`disabled`属性来禁用按钮,此时按钮不可点击
|
||||
|
||||
@@ -48,7 +49,7 @@ Vue.use(Button);
|
||||
<van-button disabled type="danger">禁用状态</van-button>
|
||||
```
|
||||
|
||||
#### 加载状态
|
||||
### 加载状态
|
||||
|
||||
```html
|
||||
<van-button loading type="primary" />
|
||||
@@ -60,14 +61,14 @@ Vue.use(Button);
|
||||
/>
|
||||
```
|
||||
|
||||
#### 按钮形状
|
||||
### 按钮形状
|
||||
|
||||
```html
|
||||
<van-button square type="primary">方形按钮</van-button>
|
||||
<van-button round type="danger">圆形按钮</van-button>
|
||||
```
|
||||
|
||||
#### 按钮尺寸
|
||||
### 按钮尺寸
|
||||
|
||||
支持`large`、`normal`、`small`、`mini`四种尺寸,默认为`normal`
|
||||
|
||||
@@ -78,6 +79,8 @@ Vue.use(Button);
|
||||
<van-button size="mini">迷你按钮</van-button>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|
||||
Reference in New Issue
Block a user