From 871d1ed3a19d6c7d6eaa5378d86585d646cb18b7 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 9 Jul 2023 16:31:39 +0800 Subject: [PATCH] docs(Button): add english description (#12069) --- README.md | 2 +- README.zh-CN.md | 2 +- packages/vant/docs/markdown/home.en-US.md | 2 +- packages/vant/docs/markdown/home.zh-CN.md | 2 +- packages/vant/src/button/README.md | 24 +++++++++++++++++++++++ packages/vant/src/button/README.zh-CN.md | 2 +- packages/vant/src/field/README.md | 6 +++--- packages/vant/src/field/README.zh-CN.md | 6 +++--- 8 files changed, 35 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 26eb482f9..a51f83a6f 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/README.zh-CN.md b/README.zh-CN.md index 66cd522e9..aaddd19f7 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -30,7 +30,7 @@ Vant 是一个**轻量、可定制的移动端组件库**，于 2017 年开源 ## 特性 - 🚀 性能极佳，组件平均体积小于 1KB（min+gzip） -- 🚀 70+ 个高质量组件，覆盖移动端主流场景 +- 🚀 80+ 个高质量组件，覆盖移动端主流场景 - 🚀 零外部依赖，不依赖三方 npm 包 - 💪 使用 TypeScript 编写，提供完整的类型定义 - 💪 单元测试覆盖率超过 90%，提供稳定性保障 diff --git a/packages/vant/docs/markdown/home.en-US.md b/packages/vant/docs/markdown/home.en-US.md index c23c31fdb..aaacfe6be 100644 --- a/packages/vant/docs/markdown/home.en-US.md +++ b/packages/vant/docs/markdown/home.en-US.md @@ -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 diff --git a/packages/vant/docs/markdown/home.zh-CN.md b/packages/vant/docs/markdown/home.zh-CN.md index 13beacf5f..511b5cdb4 100644 --- a/packages/vant/docs/markdown/home.zh-CN.md +++ b/packages/vant/docs/markdown/home.zh-CN.md @@ -15,7 +15,7 @@ Vant 是一个**轻量、可定制的移动端组件库**，于 2017 年开源 ### 特性 - 🚀 性能极佳，组件平均体积小于 1KB（min+gzip） -- 🚀 70+ 个高质量组件，覆盖移动端主流场景 +- 🚀 80+ 个高质量组件，覆盖移动端主流场景 - 🚀 零外部依赖，不依赖三方 npm 包 - 💪 使用 TypeScript 编写，提供完整的类型定义 - 💪 单元测试覆盖率超过 90%，提供稳定性保障 diff --git a/packages/vant/src/button/README.md b/packages/vant/src/button/README.md index 638d72c31..20a4f234c 100644 --- a/packages/vant/src/button/README.md +++ b/packages/vant/src/button/README.md @@ -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 Primary Success @@ -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 Plain Plain @@ -37,6 +41,8 @@ app.use(Button); ### Hairline +Setting the `hairline` prop to display a border with a thickness of 0.5px. + ```html Hairline Hairline @@ -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 Disabled Disabled @@ -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 @@ -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 Square Round @@ -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 Button @@ -79,6 +93,8 @@ app.use(Button); ### Size +Four sizes are supported: `large`, `normal`, `small`, and `mini`. The default size is `normal`. + ```html Large Normal @@ -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 Block Element ``` ### Route +You can use the `url` prop for URL redirection or the `to` prop for route navigation. + ```html URL Vue Router @@ -101,6 +121,8 @@ app.use(Button); ### Custom Color +Customize the button color using the `color` prop. + ```html Pure Pure @@ -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 diff --git a/packages/vant/src/field/README.md b/packages/vant/src/field/README.md index 210f98ac0..6533288e8 100644 --- a/packages/vant/src/field/README.md +++ b/packages/vant/src/field/README.md @@ -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)
| _string_ | - | +| autocapitalize `v4.6.2` | HTML native attribute, see [MDN - autocapitalize](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize)
| _string_ | - | | enterkeyhint | HTML native attribute, see [MDN - enterkeyhint](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
| _string_ | - | -| spellcheck | HTML native attribute, see [MDN - spellcheck](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)
| _boolean_ | - | -| autocorrect | Safari only, see [MDN - autocorrect](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocorrect)
| _string_ | - | +| spellcheck `v4.6.2` | HTML native attribute, see [MDN - spellcheck](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)
| _boolean_ | - | +| autocorrect `v4.6.2` | Safari only, see [MDN - autocorrect](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocorrect)
| _string_ | - | ### Events diff --git a/packages/vant/src/field/README.zh-CN.md b/packages/vant/src/field/README.zh-CN.md index 538d75fc2..6da653d6a 100644 --- a/packages/vant/src/field/README.zh-CN.md +++ b/packages/vant/src/field/README.zh-CN.md @@ -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)
| _string_ | - | -| spellcheck | HTML 原生属性，用于检查元素的拼写错误，此 API 仅在部分浏览器支持，详见 [MDN - spellcheck](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)
| _boolean_ | - | -| autocorrect | 仅 Safari 适用，用于自动更正输入的文本，详见 [MDN - autocorrect](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocorrect)
| _string_ | - | +| spellcheck `v4.6.2` | HTML 原生属性，用于检查元素的拼写错误，此 API 仅在部分浏览器支持，详见 [MDN - spellcheck](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)
| _boolean_ | - | +| autocorrect `v4.6.2` | 仅 Safari 适用，用于自动更正输入的文本，详见 [MDN - autocorrect](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocorrect)
| _string_ | - | ### Events