Button Group

按钮组，可以把一系列按钮放到一个组里，可以水平排列，可以垂直排列，默认水平排列

总览

nly-button-group 按钮组默认水平布局，子组件中的 nly-button 边角会发生变化

<nly-button-group>
    <nly-button variant="info">按钮1</nly-button>
    <nly-button variant="info">按钮2</nly-button>
    <nly-button variant="info">按钮3</nly-button>
</nly-button-group>

<nly-button-group>
    <nly-button variant="outlineInfo">按钮1</nly-button>
    <nly-button variant="outlineInfo">按钮2</nly-button>
    <nly-button variant="outlineInfo">按钮3</nly-button>
</nly-button-group>

<nly-button-group>
    <nly-button variant="outlineInfo" disabled>按钮1</nly-button>
    <nly-button variant="outlineInfo" disabled>按钮2</nly-button>
    <nly-button variant="outlineInfo" disabled>按钮3</nly-button>
</nly-button-group>

<nly-button-group>
    <nly-button variant="danger">按钮1</nly-button>
    <nly-button variant="warning">按钮2</nly-button>
    <nly-button variant="primary">按钮3</nly-button>
</nly-button-group>

<!-- 总览.name -->
<!-- nly-button-group.vue -->

vertical

按钮组垂直布局

<nly-button-group vertical>
    <nly-button variant="danger">按钮1</nly-button>
    <nly-button variant="warning">按钮2</nly-button>
    <nly-button variant="primary">按钮3</nly-button>
</nly-button-group>

<!-- vertical.name -->
<!-- nly-button-group.vue -->

roundedFlat

<nly-button-group vertical>
    <nly-button variant="danger" shape="roundedFlat">按钮1</nly-button>
    <nly-button variant="warning" shape="roundedFlat">按钮2</nly-button>
    <nly-button variant="primary" shape="roundedFlat">按钮3</nly-button>
</nly-button-group>

<!-- vertical.name -->
<!-- nly-button-group.vue -->

roundedPill

<nly-button-group vertical>
    <nly-button variant="danger" shape="roundedPill">按钮1</nly-button>
    <nly-button variant="warning" shape="roundedPill">按钮2</nly-button>
    <nly-button variant="primary" shape="roundedPill">按钮3</nly-button>
</nly-button-group>

<!-- vertical.name -->
<!-- nly-button-group.vue -->

size

按钮组大小

<nly-button-group size="sm">
    <nly-button variant="danger">sm</nly-button>
    <nly-button variant="warning">sm</nly-button>
    <nly-button variant="primary">sm</nly-button>
</nly-button-group>

<nly-button-group>
    <nly-button variant="danger">按钮1</nly-button>
    <nly-button variant="warning">按钮2</nly-button>
    <nly-button variant="primary">按钮3</nly-button>
</nly-button-group>

<nly-button-group size="lg">
    <nly-button variant="danger">lg</nly-button>
    <nly-button variant="warning">lg</nly-button>
    <nly-button variant="primary">lg</nly-button>
</nly-button-group>

<!-- size.name -->
<!-- nly-button-group.vue -->

<nly-button-group size="sm" vertical>
    <nly-button variant="danger">sm</nly-button>
    <nly-button variant="warning">sm</nly-button>
    <nly-button variant="primary">sm</nly-button>
</nly-button-group>

<nly-button-group vertical>
    <nly-button variant="danger">按钮1</nly-button>
    <nly-button variant="warning">按钮2</nly-button>
    <nly-button variant="primary">按钮3</nly-button>
</nly-button-group>

<nly-button-group size="lg" vertical>
    <nly-button variant="danger">lg</nly-button>
    <nly-button variant="warning">lg</nly-button>
    <nly-button variant="primary">lg</nly-button>
</nly-button-group>

<!-- size.name -->
<!-- nly-button-group.vue -->

nly-button-group 的 size 会覆盖 nly-button 的 size 失效

<nly-button-group size="sm">
    <nly-button variant="danger" size="lg">sm</nly-button>
    <nly-button variant="warning" size="lg">sm</nly-button>
    <nly-button variant="primary" size="lg">sm</nly-button>
</nly-button-group>

<!-- size.name -->
<!-- nly-button-group.vue -->

组件参数

查看源码

`<nly-button-group>`

函数式组件（Functional component）

<nly-button-group> 组件简写
<nly-button-group> props 参数

组件简写

<nly-button-group> 组件可以用以下简写

<nly-btn-group>

注意: 组件简写只有在导出为插件的时候才可以用

props 参数

props	类型	默认值	描述
`vertical`	`Boolean`	`false`	设置true时，按钮组垂直排列
`size`	`String`		btn-group类，可选sm，lg
`tag`	`String`	`'div'`	标签
`button-group-class`	`String`		自定义css类

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件	导出名称	导出路径
`<nly-button-group>`	`NlyButtonGroup`	`nly-adminlte-vue`

例子

import { NlyButtonGroup } from 'nly-adminlte-vue'
Vue.component('nly-button-group', NlyButtonGroup)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称	导出路径
`ButtonGroupPlugin`	`nly-adminlte-vue`

例子

import { ButtonGroupPlugin } from 'nly-adminlte-vue'
Vue.use(ButtonGroupPlugin)