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-groupsize 会覆盖 nly-buttonsize 失效

<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> 组件可以用以下简写

  • <nly-btn-group>

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

props 参数

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

单个组件导入

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

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

例子

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

导出作为插件

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

导出名称导出路径
ButtonGroupPluginnly-adminlte-vue

例子

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