vant/docs/examples/button.md
2017-02-06 10:30:43 +08:00

58 lines
1.4 KiB
Markdown

<style lang="css">
@component-namespace page {
@component button {
padding: 0 15px 15px;
@descendent group {
margin-bottom: 15px;
& > * {
margin-bottom: 15px;
}
}
}
}
</style>
## Button组件
### 基础用法
:::demo 样例代码
```html
<div class="page-button">
<h1 class="page-title">Button</h1>
<div class="page-button-group">
<o2-button size="large">default</o2-button>
<o2-button size="large" type="primary">primary</o2-button>
<o2-button size="large" type="danger">danger</o2-button>
</div>
<div class="page-button-group">
<o2-button>default</o2-button>
<o2-button type="primary">primary</o2-button>
<o2-button type="danger">danger</o2-button>
</div>
<div class="page-button-group">
<o2-button size="small">default</o2-button>
<o2-button size="small" type="primary">primary</o2-button>
<o2-button size="small" type="danger">danger</o2-button>
</div>
<div class="page-button-group">
<o2-button disabled size="large">default</o2-button>
<o2-button disabled size="large" type="primary">primary</o2-button>
<o2-button disabled size="large" type="danger" class="aaa">danger</o2-button>
</div>
</div>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |