blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Button): update demo (#6871)

Browse Source
This commit is contained in:
neverland 2020-07-25 14:28:29 +08:00 committed by GitHub
parent 2328983afa
commit cdf3bebfab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/button/README.md
View File

@ -14,9 +14,9 @@ Vue.use(Button);
### Type
```html
<van-button type="default">Default</van-button>
<van-button type="primary">Primary</van-button>
<van-button type="info">Info</van-button>
<van-button type="default">Default</van-button>
<van-button type="danger">Danger</van-button>
<van-button type="warning">Warning</van-button>
```
@ -60,11 +60,11 @@ Vue.use(Button);
### Icon
```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="plus" type="primary" />
<van-button icon="plus" type="primary">Button</van-button>
<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="info">
Button
</van-button>
```
### Size
@ -94,9 +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, #ff6034, #ee0a24)">
Gradient
</van-button>
```
## API

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

@ -13,19 +13,19 @@ Vue.use(Button);
### 按钮类型
支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`
按钮支持 `default`、`primary`、`info`、`warning`、`danger` 五种类型，默认为 `default`。
```html
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
```
### 朴素按钮
通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
通过 `plain` 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
```html
<van-button plain type="primary">朴素按钮</van-button>
@ -34,7 +34,7 @@ Vue.use(Button);
### 细边框
设置`hairline`属性可以开启 0.5px 边框，基于伪类实现
设置 `hairline` 属性可以展示 0.5px 的细边框。
```html
<van-button plain hairline type="primary">细边框按钮</van-button>
@ -43,7 +43,7 @@ Vue.use(Button);
### 禁用状态
通过`disabled`属性来禁用按钮，禁用状态下按钮不可点击
通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
```html
<van-button disabled type="primary">禁用状态</van-button>
@ -52,7 +52,7 @@ Vue.use(Button);
### 加载状态
通过`loading`属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过`loading-text`设置加载状态下的文字
通过 `loading` 属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 `loading-text` 设置加载状态下的文字。
```html
<van-button loading type="primary" />
@ -62,7 +62,7 @@ Vue.use(Button);
### 按钮形状
通过`square`设置方形按钮，通过`round`设置圆形按钮
通过 `square` 设置方形按钮，通过 `round` 设置圆形按钮。
```html
<van-button square type="primary">方形按钮</van-button>
@ -71,19 +71,19 @@ Vue.use(Button);
### 图标按钮
通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
通过 `icon` 属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。
```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="plus" type="primary" />
<van-button icon="plus" type="primary">按钮</van-button>
<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="info">
按钮
</van-button>
```
### 按钮尺寸
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
支持 `large`、`normal`、`small`、`mini` 四种尺寸，默认为 `normal`。
```html
<van-button type="primary" size="large">大号按钮</van-button>
@ -94,7 +94,7 @@ Vue.use(Button);
### 块级元素
按钮在默认情况下为行内块级元素，通过`block`属性可以将按钮的元素类型设置为块级元素
按钮在默认情况下为行内块级元素，通过 `block` 属性可以将按钮的元素类型设置为块级元素。
```html
<van-button type="primary" block>块级元素</van-button>
@ -102,7 +102,7 @@ Vue.use(Button);
### 页面导航
可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转
可以通过 `url` 属性进行 URL 跳转，或通过 `to` 属性进行路由跳转。
```html
<van-button type="primary" url="/vant/mobile.html">URL 跳转</van-button>
@ -111,14 +111,14 @@ Vue.use(Button);
### 自定义颜色
通过`color`属性可以自定义按钮的颜色
通过 `color` 属性可以自定义按钮的颜色。
```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, #ff6034, #ee0a24)">
渐变色按钮
</van-button>
```
## API

12
src/button/demo/index.vue
View File

@ -2,9 +2,9 @@
<demo-section>
<demo-block :title="t('type')">
<div class="demo-button-row">
<van-button type="default">{{ t('default') }}</van-button>
<van-button type="primary">{{ t('primary') }}</van-button>
<van-button type="info">{{ t('info') }}</van-button>
<van-button type="default">{{ t('default') }}</van-button>
</div>
<van-button type="danger">{{ t('danger') }}</van-button>
<van-button type="warning">{{ t('warning') }}</van-button>
@ -37,12 +37,12 @@
</demo-block>
<demo-block :title="t('icon')">
<van-button type="primary" icon="star-o" />
<van-button type="primary" icon="star-o" :text="t('button')" />
<van-button type="primary" icon="plus" />
<van-button type="primary" icon="plus" :text="t('button')" />
<van-button
plain
type="primary"
icon="https://img.yzcdn.cn/vant/logo.png"
type="info"
icon="https://img.yzcdn.cn/vant/user-active.png"
:text="t('button')"
/>
</demo-block>
@ -71,7 +71,7 @@
<van-button color="#7232dd" :text="t('pure')" />
<van-button plain color="#7232dd" :text="t('pure')" />
<van-button
color="linear-gradient(to right, #4bb0ff, #6149f6)"
color="linear-gradient(to right, #ff6034, #ee0a24)"
:text="t('gradient')"
/>
</demo-block>

14
src/button/test/__snapshots__/demo.spec.js.snap
View File

@ -3,12 +3,12 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="demo-button-row"><button class="van-button van-button--default van-button--normal">
<div class="van-button__content"><span class="van-button__text">默认按钮</span></div>
</button> <button class="van-button van-button--primary van-button--normal">
<div class="demo-button-row"><button class="van-button van-button--primary van-button--normal">
<div class="van-button__content"><span class="van-button__text">主要按钮</span></div>
</button> <button class="van-button van-button--info van-button--normal">
<div class="van-button__content"><span class="van-button__text">信息按钮</span></div>
</button> <button class="van-button van-button--default van-button--normal">
<div class="van-button__content"><span class="van-button__text">默认按钮</span></div>
</button></div> <button class="van-button van-button--danger van-button--normal">
<div class="van-button__content"><span class="van-button__text">危险按钮</span></div>
</button> <button class="van-button van-button--warning van-button--normal">
@ -49,13 +49,13 @@ exports[`renders demo correctly 1`] = `
<div class="van-button__content"><span class="van-button__text">圆形按钮</span></div>
</button></div>
<div><button class="van-button van-button--primary van-button--normal">
<div class="van-button__content"><i class="van-icon van-icon-star-o van-button__icon">
<div class="van-button__content"><i class="van-icon van-icon-plus van-button__icon">
<!----></i></div>
</button> <button class="van-button van-button--primary van-button--normal">
<div class="van-button__content"><i class="van-icon van-icon-star-o van-button__icon">
<div class="van-button__content"><i class="van-icon van-icon-plus van-button__icon">
<!----></i><span class="van-button__text">按钮</span></div>
</button> <button class="van-button van-button--primary van-button--normal van-button--plain">
<div class="van-button__content"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-icon__image">
</button> <button class="van-button van-button--info van-button--normal van-button--plain">
<div class="van-button__content"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/user-active.png" class="van-icon__image">
<!----></i><span class="van-button__text">按钮</span></div>
</button></div>
<div><button class="van-button van-button--primary van-button--large">