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

92 lines
1.3 KiB
Markdown
Raw Normal View History

2019-09-22 22:59:29 +08:00
# Button Group
Button can be grouped.
```html
<n-button-group>
<n-button
type="default"
round
>
2019-10-24 18:04:31 +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-10-24 18:04:31 +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-10-24 18:04:31 +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-10-24 18:04:31 +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-10-24 18:04:31 +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-10-24 18:04:31 +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-10-24 18:04:31 +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-10-24 18:04:31 +08:00
<template v-slot:icon>
<md-save />
</template>
2019-09-22 22:59:29 +08:00
Warning
</n-button>
</n-button-group>
```
2019-10-24 18:04:31 +08:00
```js
2019-10-25 12:48:10 +08:00
import mdSave from 'naive-ui/lib/icons/md-save'
2019-10-24 18:04:31 +08:00
export default {
components: {
mdSave
}
}
```
2019-09-22 22:59:29 +08:00
```css
.n-button {
margin: 0 8px 8px 0;
}
```