ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 18:54:24 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

docs: prettier all markdown files

Browse Source
This commit is contained in:
chenjiahan
2020-04-11 09:09:00 +08:00
committed by neverland
parent 48067f79db
commit 7f84f8a487
140 changed files with 4441 additions and 4723 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/button/README.md
View File

@@ -44,7 +44,7 @@ Vue.use(Button);
### Loading
```html
```html
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="info" loading-text="Loading..." />
@@ -52,22 +52,24 @@ Vue.use(Button);
### Shape
```html
```html
<van-button square type="primary">Square</van-button>
<van-button round type="info">Round</van-button>
```
### Icon
```html
```html
<van-button icon="star-o" type="primary" />
<van-button icon="star-o" type="primary">Button</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">Button</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info"
>Button</van-button
>
```
### Size
```html
```html
<van-button type="primary" size="large">Large</van-button>
<van-button type="primary" size="normal">Normal</van-button>
<van-button type="primary" size="small">Small</van-button>
@@ -92,7 +94,9 @@ Vue.use(Button);
```html
<van-button color="#7232dd">Pure</van-button>
<van-button color="#7232dd" plain>Pure</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">Gradient</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)"
>Gradient</van-button
>
```
## API
@@ -100,31 +104,31 @@ Vue.use(Button);
### Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| type | Can be set to `primary` `info` `warning` `danger` | *string* | `default` |
| size | Can be set to `large` `small` `mini` | *string* | `normal` |
| text | Text | *string* | - |
| color `v2.1.8` | Color, support linear-gradient | *string* | - |
| icon | Left Icon | *string* | - |
| icon-prefix `v2.6.0` | Icon className prefix | *string* | `van-icon` |
| tag | HTML Tag | *string* | `button` |
| native-type | Native Type Attribute | *string* | `''` |
| plain | Whether to be plain button | *boolean* | `false` |
| block | Whether to set display block | *boolean* | `false` |
| round | Whether to be round button | *boolean* | `false` |
| square | Whether to be square button | *boolean* | `false` |
| disabled | Whether to disable button | *boolean* | `false` |
| loading | Whether show loading status | *boolean* | `false` |
| loading-text | Loading text | *string* | - |
| loading-type | Loading type, can be set to `spinner` | *string* | `circular` |
| loading-size | Loading icon size | *string* | `20px` |
| url | Link URL | *string* | - |
| to | Target route of the link, same as to of vue-router | *string \| object* | - |
| replace | If true, the navigation will not leave a history record | *boolean* | `false` |
| --- | --- | --- | --- |
| type | Can be set to `primary` `info` `warning` `danger` | _string_ | `default` |
| size | Can be set to `large` `small` `mini` | _string_ | `normal` |
| text | Text | _string_ | - |
| color `v2.1.8` | Color, support linear-gradient | _string_ | - |
| icon | Left Icon | _string_ | - |
| icon-prefix `v2.6.0` | Icon className prefix | _string_ | `van-icon` |
| tag | HTML Tag | _string_ | `button` |
| native-type | Native Type Attribute | _string_ | `''` |
| plain | Whether to be plain button | _boolean_ | `false` |
| block | Whether to set display block | _boolean_ | `false` |
| round | Whether to be round button | _boolean_ | `false` |
| square | Whether to be square button | _boolean_ | `false` |
| disabled | Whether to disable button | _boolean_ | `false` |
| loading | Whether show loading status | _boolean_ | `false` |
| loading-text | Loading text | _string_ | - |
| loading-type | Loading type, can be set to `spinner` | _string_ | `circular` |
| loading-size | Loading icon size | _string_ | `20px` |
| url | Link URL | _string_ | - |
| to | Target route of the link, same as to of vue-router | _string \| object_ | - |
| replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
### Events
| Event | Description | Arguments |
|------|------|------|
| click | Triggered when click button and not disabled or loading | *event: Event* |
| touchstart | Triggered when touch start | *event: TouchEvent* |
| --- | --- | --- |
| click | Triggered when click button and not disabled or loading | _event: Event_ |
| touchstart | Triggered when touch start | _event: TouchEvent_ |

68
src/button/README.zh-CN.md
View File

@@ -54,7 +54,7 @@ Vue.use(Button);
通过`loading`属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过`loading-text`设置加载状态下的文字
```html
```html
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="info" loading-text="加载中..." />
@@ -64,7 +64,7 @@ Vue.use(Button);
通过`square`设置方形按钮，通过`round`设置圆形按钮
```html
```html
<van-button square type="primary">方形按钮</van-button>
<van-button round type="info">圆形按钮</van-button>
```
@@ -73,17 +73,19 @@ Vue.use(Button);
通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
```html
```html
<van-button icon="star-o" type="primary" />
<van-button icon="star-o" type="primary">按钮</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">按钮</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info"
>按钮</van-button
>
```
### 按钮尺寸
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
```html
```html
<van-button type="primary" size="large">大号按钮</van-button>
<van-button type="primary" size="normal">普通按钮</van-button>
<van-button type="primary" size="small">小型按钮</van-button>
@@ -114,7 +116,9 @@ Vue.use(Button);
```html
<van-button color="#7232dd">单色按钮</van-button>
<van-button color="#7232dd" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)"
>渐变色按钮</van-button
>
```
## API
@@ -122,32 +126,32 @@ Vue.use(Button);
### Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| type | 类型，可选值为 `primary` `info` `warning` `danger` | *string* | `default` |
| size | 尺寸，可选值为 `large` `small` `mini` | *string* | `normal` |
| text | 按钮文字 | *string* | - |
| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - |
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
| icon-prefix `v2.6.0` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
| tag | 根节点的 HTML 标签 | *string* | `button` |
| native-type | 原生 button 标签的 type 属性 | *string* | - |
| block | 是否为块级元素 | *boolean* | `false` |
| plain | 是否为朴素按钮 | *boolean* | `false` |
| square | 是否为方形按钮 | *boolean* | `false` |
| round | 是否为圆形按钮 | *boolean* | `false` |
| disabled | 是否禁用按钮 | *boolean* | `false` |
| hairline | 是否使用 0.5px 边框 | *boolean* | `false` |
| loading | 是否显示为加载状态 | *boolean* | `false` |
| loading-text | 加载状态提示文字 | *string* | - |
| loading-type | [加载图标类型](#/zh-CN/loading)，可选值为`spinner` | *string* | `circular` |
| loading-size | 加载图标大小 | *string* | `20px` |
| url | 点击后跳转的链接地址 | *string* | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` |
| --- | --- | --- | --- |
| type | 类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
| size | 尺寸，可选值为 `large` `small` `mini` | _string_ | `normal` |
| text | 按钮文字 | _string_ | - |
| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - |
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| icon-prefix `v2.6.0` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
| tag | 根节点的 HTML 标签 | _string_ | `button` |
| native-type | 原生 button 标签的 type 属性 | _string_ | - |
| block | 是否为块级元素 | _boolean_ | `false` |
| plain | 是否为朴素按钮 | _boolean_ | `false` |
| square | 是否为方形按钮 | _boolean_ | `false` |
| round | 是否为圆形按钮 | _boolean_ | `false` |
| disabled | 是否禁用按钮 | _boolean_ | `false` |
| hairline | 是否使用 0.5px 边框 | _boolean_ | `false` |
| loading | 是否显示为加载状态 | _boolean_ | `false` |
| loading-text | 加载状态提示文字 | _string_ | - |
| loading-type | [加载图标类型](#/zh-CN/loading)，可选值为`spinner` | _string_ | `circular` |
| loading-size | 加载图标大小 | _string_ | `20px` |
| url | 点击后跳转的链接地址 | _string_ | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| click | 点击按钮，且按钮状态不为加载或禁用时触发 | *event: Event* |
| touchstart | 开始触摸按钮时触发 | *event: TouchEvent* |
| 事件名 | 说明 | 回调参数 |
| ---------- | ---------------------------------------- | ------------------- |
| click | 点击按钮，且按钮状态不为加载或禁用时触发 | _event: Event_ |
| touchstart | 开始触摸按钮时触发 | _event: TouchEvent_ |