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
vant/docs/markdown/en-US/button.md
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

1.7 KiB
Raw Blame History

Button

Install

import { Button } from 'vant';

Vue.component(Button.name, Button);

Usage

Type

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

Size

<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>

Loading

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

Custom Tag

Use tag prop to custom button tag

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

Action Button

<van-button type="primary" bottomAction>Button</van-button>

<van-row>
  <van-col span="12">
    <van-button bottomAction>Button</van-button>
  </van-col>
  <van-col span="12">
    <van-button type="primary" bottomAction>Button</van-button>
  </van-col>
</van-row>

API

Attribute Description Type Default Accepted Values
type Type String default primary danger
size Size String normal large small mini
tag Tag String button -
nativeType Native Type Attribute String '' -
diabled Whether disable button Boolean false -
loading Whether show loading status Boolean false -
block Whether to set display block Boolean false -
bottomAction Whether to be action button Boolean false -