mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 05:42:44 +08:00
docs(Button): add english description (#12069)
This commit is contained in:
neverland
GitHub
parent
4ebc7bbb0e
commit
871d1ed3a1
@ -26,7 +26,7 @@
|
||||
## Features
|
||||
|
||||
- 🚀 1KB Component average size (min+gzip)
|
||||
- 🚀 70+ High quality components
|
||||
- 🚀 80+ High quality components
|
||||
- 🚀 Zero third-party dependencies
|
||||
- 💪 90%+ Unit test coverage
|
||||
- 💪 Written in TypeScript
|
||||
|
||||
@ -30,7 +30,7 @@ Vant 是一个**轻量、可定制的移动端组件库**，于 2017 年开源
|
||||
## 特性
|
||||
|
||||
- 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
|
||||
- 🚀 70+ 个高质量组件，覆盖移动端主流场景
|
||||
- 🚀 80+ 个高质量组件，覆盖移动端主流场景
|
||||
- 🚀 零外部依赖，不依赖三方 npm 包
|
||||
- 💪 使用 TypeScript 编写，提供完整的类型定义
|
||||
- 💪 单元测试覆盖率超过 90%，提供稳定性保障
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
### Features
|
||||
|
||||
- 🚀 1KB Component average size (min+gzip)
|
||||
- 🚀 70+ High quality components
|
||||
- 🚀 80+ High quality components
|
||||
- 🚀 Zero third-party dependencies
|
||||
- 💪 90%+ Unit test coverage
|
||||
- 💪 Written in TypeScript
|
||||
|
||||
@ -15,7 +15,7 @@ Vant 是一个**轻量、可定制的移动端组件库**，于 2017 年开源
|
||||
### 特性
|
||||
|
||||
- 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
|
||||
- 🚀 70+ 个高质量组件，覆盖移动端主流场景
|
||||
- 🚀 80+ 个高质量组件，覆盖移动端主流场景
|
||||
- 🚀 零外部依赖，不依赖三方 npm 包
|
||||
- 💪 使用 TypeScript 编写，提供完整的类型定义
|
||||
- 💪 单元测试覆盖率超过 90%，提供稳定性保障
|
||||
|
||||
@ -20,6 +20,8 @@ app.use(Button);
|
||||
|
||||
### Type
|
||||
|
||||
The Button supports five types: `default`, `primary`, `success`, `warning`, and `danger`. The default type is `default`.
|
||||
|
||||
```html
|
||||
<van-button type="primary">Primary</van-button>
|
||||
<van-button type="success">Success</van-button>
|
||||
@ -30,6 +32,8 @@ app.use(Button);
|
||||
|
||||
### Plain
|
||||
|
||||
Use the `plain` prop to set the button as a plain button. The text color of a plain button is the same as the button color, and the background is white.
|
||||
|
||||
```html
|
||||
<van-button plain type="primary">Plain</van-button>
|
||||
<van-button plain type="success">Plain</van-button>
|
||||
@ -37,6 +41,8 @@ app.use(Button);
|
||||
|
||||
### Hairline
|
||||
|
||||
Setting the `hairline` prop to display a border with a thickness of 0.5px.
|
||||
|
||||
```html
|
||||
<van-button plain hairline type="primary">Hairline</van-button>
|
||||
<van-button plain hairline type="success">Hairline</van-button>
|
||||
@ -44,6 +50,8 @@ app.use(Button);
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable the button. In the disabled state, the button cannot be clicked.
|
||||
|
||||
```html
|
||||
<van-button disabled type="primary">Disabled</van-button>
|
||||
<van-button disabled type="success">Disabled</van-button>
|
||||
@ -51,6 +59,8 @@ app.use(Button);
|
||||
|
||||
### Loading
|
||||
|
||||
Set the button as a loading state using the `loading` prop. In the loading state, the button text is hidden by default. You can set the text for the loading state using the `loading-text` property.
|
||||
|
||||
```html
|
||||
<van-button loading type="primary" />
|
||||
<van-button loading type="primary" loading-type="spinner" />
|
||||
@ -59,6 +69,8 @@ app.use(Button);
|
||||
|
||||
### Shape
|
||||
|
||||
Use the `square` prop to set the button as square-shaped and the `round` prop to set it as round-shaped.
|
||||
|
||||
```html
|
||||
<van-button square type="primary">Square</van-button>
|
||||
<van-button round type="success">Round</van-button>
|
||||
@ -66,6 +78,8 @@ app.use(Button);
|
||||
|
||||
### Icon
|
||||
|
||||
Use the `icon` prop to set the button icon. It supports all icons from the Icon component or you can pass a custom icon URL.
|
||||
|
||||
```html
|
||||
<van-button icon="plus" type="primary" />
|
||||
<van-button icon="plus" type="primary">Button</van-button>
|
||||
@ -79,6 +93,8 @@ app.use(Button);
|
||||
|
||||
### Size
|
||||
|
||||
Four sizes are supported: `large`, `normal`, `small`, and `mini`. The default size is `normal`.
|
||||
|
||||
```html
|
||||
<van-button type="primary" size="large">Large</van-button>
|
||||
<van-button type="primary" size="normal">Normal</van-button>
|
||||
@ -88,12 +104,16 @@ app.use(Button);
|
||||
|
||||
### Block Element
|
||||
|
||||
By default, the button is an inline-block element. Use the `block` prop to change the button element type to a block-level element.
|
||||
|
||||
```html
|
||||
<van-button type="primary" block>Block Element</van-button>
|
||||
```
|
||||
|
||||
### Route
|
||||
|
||||
You can use the `url` prop for URL redirection or the `to` prop for route navigation.
|
||||
|
||||
```html
|
||||
<van-button type="primary" url="https://github.com">URL</van-button>
|
||||
<van-button type="primary" to="index">Vue Router</van-button>
|
||||
@ -101,6 +121,8 @@ app.use(Button);
|
||||
|
||||
### Custom Color
|
||||
|
||||
Customize the button color using the `color` prop.
|
||||
|
||||
```html
|
||||
<van-button color="#7232dd">Pure</van-button>
|
||||
<van-button color="#7232dd" plain>Pure</van-button>
|
||||
@ -111,6 +133,8 @@ app.use(Button);
|
||||
|
||||
### Animated Button
|
||||
|
||||
With the combination of the Button and [Swipe component](<(/#/en-US/swipe)>), you can create an animated button effect with vertical scrolling.
|
||||
|
||||
```html
|
||||
<van-button type="danger" round>
|
||||
<van-swipe
|
||||
|
||||
@ -133,7 +133,7 @@ app.use(Button);
|
||||
|
||||
### 动画按钮
|
||||
|
||||
搭配 Button 和 Swipe 组件，可以实现垂直滚动的动画按钮效果。
|
||||
搭配 Button 和 [Swipe 组件](/#/zh-CN/swipe)，可以实现垂直滚动的动画按钮效果。
|
||||
|
||||
```html
|
||||
<van-button type="danger" round>
|
||||
|
||||
@ -317,10 +317,10 @@ Use `label-align` prop to align the input value, can be set to `center`, `right`
|
||||
| icon-prefix | Icon className prefix | _string_ | `van-icon` |
|
||||
| rules | Form validation rules | _FieldRule[]_ | - |
|
||||
| autocomplete | HTML native attribute, see [MDN - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - |
|
||||
| autocapitalize | HTML native attribute, see [MDN - autocapitalize](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize)<br> | _string_ | - |
|
||||
| autocapitalize `v4.6.2` | HTML native attribute, see [MDN - autocapitalize](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize)<br> | _string_ | - |
|
||||
| enterkeyhint | HTML native attribute, see [MDN - enterkeyhint](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)<br> | _string_ | - |
|
||||
| spellcheck | HTML native attribute, see [MDN - spellcheck](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)<br> | _boolean_ | - |
|
||||
| autocorrect | Safari only, see [MDN - autocorrect](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocorrect)<br> | _string_ | - |
|
||||
| spellcheck `v4.6.2` | HTML native attribute, see [MDN - spellcheck](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)<br> | _boolean_ | - |
|
||||
| autocorrect `v4.6.2` | Safari only, see [MDN - autocorrect](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocorrect)<br> | _string_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -336,10 +336,10 @@ export default {
|
||||
| icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
|
||||
| rules | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | _FieldRule[]_ | - |
|
||||
| autocomplete | HTML 原生属性，用于控制自动完成功能，详见 [MDN - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - |
|
||||
| autocapitalize | HTML 原生属性，用于控制文本输入时是否自动大写，此 API 仅在部分浏览器支持，详见 [MDN - autocapitalize](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize) | _string_ | - |
|
||||
| autocapitalize `v4.6.2` | HTML 原生属性，用于控制文本输入时是否自动大写，此 API 仅在部分浏览器支持，详见 [MDN - autocapitalize](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize) | _string_ | - |
|
||||
| enterkeyhint | HTML 原生属性，用于控制回车键样式，此 API 仅在部分浏览器支持，详见 [MDN - enterkeyhint](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)<br> | _string_ | - |
|
||||
| spellcheck | HTML 原生属性，用于检查元素的拼写错误，此 API 仅在部分浏览器支持，详见 [MDN - spellcheck](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)<br> | _boolean_ | - |
|
||||
| autocorrect | 仅 Safari 适用，用于自动更正输入的文本，详见 [MDN - autocorrect](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocorrect)<br> | _string_ | - |
|
||||
| spellcheck `v4.6.2` | HTML 原生属性，用于检查元素的拼写错误，此 API 仅在部分浏览器支持，详见 [MDN - spellcheck](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)<br> | _boolean_ | - |
|
||||
| autocorrect `v4.6.2` | 仅 Safari 适用，用于自动更正输入的文本，详见 [MDN - autocorrect](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocorrect)<br> | _string_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user