vant/button.md at ccf868c239de511d86ae7368e080d9137523c67d

ui/vant

mirror of https://github.com/youzan/vant.git synced 2025-10-24 11:05:28 +00:00

Files

neverland d8b6ad7d54 [new feature] add i18n support (#310 )

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [new feature] add i18n support

* feat: Extract demos from markdown

* feat: Base components demos

* [new feature] complete demo extract & translate

* [fix] text cases

* fix: add deepAssign test cases

* fix: changelog detail

* [new feature] AddressEdit support i18n

2017-11-15 20:08:51 -06:00

2.1 KiB

Raw Blame History

Button 按钮

使用指南

import { Button } from 'vant';

Vue.component(Button.name, Button);

代码演示

按钮类型

支持default、primary、danger三种类型，默认为default

<van-button type="default">Default</van-button>
<van-button type="primary">Primary</van-button>
<van-button type="danger">Danger</van-button>

按钮尺寸

支持large、normal、small、mini四种尺寸，默认为normal

<van-button size="large">Large</van-button>
<van-button size="normal">Normal</van-button>
<van-button size="small">Small</van-button>
<van-button size="mini">Mini</van-button>

禁用状态

通过disabled属性来禁用按钮，此时按钮不可点击

<van-button disabled>Diabled</van-button>

加载状态

<van-button loading></van-button>
<van-button loading type="primary"></van-button>

自定义按钮标签

按钮标签默认为button，可以使用tag属性来修改按钮标签

<van-button tag="a" href="https://www.youzan.com" target="_blank">
  按钮
</van-button>

页面底部操作按钮

<van-button type="primary" bottom-action>按钮</van-button>

<van-row>
  <van-col span="12">
    <van-button bottom-action>按钮</van-button>
  </van-col>
  <van-col span="12">
    <van-button type="primary" bottom-action>按钮</van-button>
  </van-col>
</van-row>

API

参数	说明	类型	默认值	可选值
type	按钮类型	`String`	`default`	`primary` `danger`
size	按钮尺寸	`String`	`normal`	`large` `small` `mini`
tag	按钮标签	`String`	`button`	任意`HTML`标签
nativeType	按钮类型（原生）	`String`	`''`	-
diabled	是否禁用	`Boolean`	`false`	-
loading	是否显示为加载状态	`Boolean`	`false`	-
block	是否为块级元素	`Boolean`	`false`	-
bottomAction	是否为底部行动按钮	`Boolean`	`false`	-

2.1 KiB Raw Blame History