naive-ui/demo/documentation/components/button/zhCN/group.md

92 lines
1.3 KiB
Markdown
Raw Normal View History

2019-09-22 22:59:29 +08:00
# 按钮组
可以把几个按钮结合成按钮组。
```html
2020-02-08 16:21:09 +08:00
<n-button-group size="small">
2019-09-22 22:59:29 +08:00
<n-button
type="default"
round
>
2019-12-04 18:17:25 +08:00
<template v-slot:icon>
<md-save />
</template>
2019-09-22 22:59:29 +08:00
Default
</n-button>
<n-button
type="primary"
disabled
>
2019-12-04 18:17:25 +08:00
<template v-slot:icon>
<md-save />
</template>
2019-09-22 22:59:29 +08:00
Primary
</n-button>
<n-button
type="info"
2020-01-27 19:43:56 +08:00
icon-placement="right"
2019-09-22 22:59:29 +08:00
>
2019-12-04 18:17:25 +08:00
<template v-slot:icon>
<md-save />
</template>
2019-09-22 22:59:29 +08:00
Info
</n-button>
<n-button
type="warning"
>
2019-12-04 18:17:25 +08:00
<template v-slot:icon>
<md-save />
</template>
2019-09-22 22:59:29 +08:00
Warning
</n-button>
</n-button-group>
<n-button-group vertical>
<n-button
type="default"
round
>
2019-12-04 18:17:25 +08:00
<template v-slot:icon>
<md-save />
</template>
2019-09-22 22:59:29 +08:00
Default
</n-button>
<n-button
type="primary"
disabled
>
2019-12-04 18:17:25 +08:00
<template v-slot:icon>
<md-save />
</template>
2019-09-22 22:59:29 +08:00
Primary
</n-button>
<n-button
type="info"
2020-01-27 19:43:56 +08:00
icon-placement="right"
2019-09-22 22:59:29 +08:00
>
2019-12-04 18:17:25 +08:00
<template v-slot:icon>
<md-save />
</template>
2019-09-22 22:59:29 +08:00
Info
</n-button>
<n-button
type="warning"
>
2019-12-04 18:17:25 +08:00
<template v-slot:icon>
<md-save />
</template>
2019-09-22 22:59:29 +08:00
Warning
</n-button>
</n-button-group>
```
2019-12-04 18:17:25 +08:00
```js
import mdSave from 'naive-ui/lib/icons/md-save'
export default {
components: {
mdSave
}
}
```
2019-09-22 22:59:29 +08:00
```css
.n-button {
margin: 0 8px 8px 0;
}
```