mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] Button: add demo of image icon (#3516)
This commit is contained in:
neverland
GitHub
parent
09707479eb
commit
da514e100d
@ -58,7 +58,11 @@
|
||||
/>
|
||||
<van-button
|
||||
loading
|
||||
type="primary"
|
||||
loading-type="spinner"
|
||||
/>
|
||||
<van-button
|
||||
loading
|
||||
:loading-text="$t('loadingText')"
|
||||
type="danger"
|
||||
/>
|
||||
@ -83,10 +87,16 @@
|
||||
icon="star-o"
|
||||
/>
|
||||
<van-button
|
||||
type="danger"
|
||||
type="primary"
|
||||
icon="star-o"
|
||||
:text="$t('button')"
|
||||
/>
|
||||
<van-button
|
||||
plain
|
||||
type="primary"
|
||||
icon="https://img.yzcdn.cn/vant/logo.png"
|
||||
:text="$t('button')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('size')">
|
||||
|
||||
@ -45,12 +45,8 @@ Vue.use(Button);
|
||||
|
||||
```html
|
||||
<van-button loading type="primary" />
|
||||
<van-button
|
||||
loading
|
||||
type="danger"
|
||||
loading-type="spinner"
|
||||
loading-text="Loading..."
|
||||
/>
|
||||
<van-button loading type="primary" loading-type="spinner" />
|
||||
<van-button loading type="danger" loading-text="Loading..." />
|
||||
```
|
||||
|
||||
### Shape
|
||||
@ -64,7 +60,8 @@ Vue.use(Button);
|
||||
|
||||
```html
|
||||
<van-button icon="star-o" type="primary" />
|
||||
<van-button icon="star-o" type="danger">Button</van-button>
|
||||
<van-button icon="star-o" type="primary">Button</van-button>
|
||||
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="danger">Button</van-button>
|
||||
```
|
||||
|
||||
### Size
|
||||
|
||||
@ -10,13 +10,21 @@ exports[`renders demo correctly 1`] = `
|
||||
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
|
||||
</button> <button class="van-button van-button--danger van-button--normal">
|
||||
<div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div><span class="van-button__text">加载中...</span>
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__text">加载中...</span>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i></button> <button class="van-button van-button--danger van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i><span class="van-button__text">按钮</span></button></div>
|
||||
<!----></i></button> <button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i><span class="van-button__text">按钮</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><i class="van-icon van-button__icon">
|
||||
<div class="van-image van-icon__image"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-image__img">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<!---->
|
||||
</i><span class="van-button__text">按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">
|
||||
大号按钮
|
||||
</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
|
||||
@ -42,7 +42,7 @@ Vue.use(Button);
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过`disabled`属性来禁用按钮，此时按钮不可点击
|
||||
通过`disabled`属性来禁用按钮，禁用状态下按钮不可点击
|
||||
|
||||
```html
|
||||
<van-button disabled type="primary">禁用状态</van-button>
|
||||
@ -51,18 +51,18 @@ Vue.use(Button);
|
||||
|
||||
### 加载状态
|
||||
|
||||
通过`loading`属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过`loading-text`设置加载状态下的文字
|
||||
|
||||
```html
|
||||
<van-button loading type="primary" />
|
||||
<van-button
|
||||
loading
|
||||
type="danger"
|
||||
loading-type="spinner"
|
||||
loading-text="加载中..."
|
||||
/>
|
||||
<van-button loading type="primary" loading-type="spinner" />
|
||||
<van-button loading type="danger" loading-text="加载中..." />
|
||||
```
|
||||
|
||||
### 按钮形状
|
||||
|
||||
通过`square`设置方形按钮，通过`round`设置圆形按钮
|
||||
|
||||
```html
|
||||
<van-button square type="primary">方形按钮</van-button>
|
||||
<van-button round type="danger">圆形按钮</van-button>
|
||||
@ -70,9 +70,12 @@ Vue.use(Button);
|
||||
|
||||
### 图标按钮
|
||||
|
||||
通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
|
||||
|
||||
```html
|
||||
<van-button icon="star-o" type="primary" />
|
||||
<van-button icon="star-o" type="danger">按钮</van-button>
|
||||
<van-button icon="star-o" type="primary">按钮</van-button>
|
||||
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="danger">按钮</van-button>
|
||||
```
|
||||
|
||||
### 按钮尺寸
|
||||
@ -117,4 +120,4 @@ Vue.use(Button);
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击按钮，且按钮状态不为加载或禁用时触发 | event: Event |
|
||||
| touchstart | 原生 touchstart 事件 | event: TouchEvent |
|
||||
| touchstart | 开始触摸按钮时触发 | event: TouchEvent |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user