ButtonGroup

Demos

Stylistic variants

Available style variants for the ui prop: primary/alt.

<template>
<article>
  <section>
    <veui-button-group
      ui="primary"
      :items="group"
    />
  </section>
  <section>
    <veui-button-group :items="group"/>
  </section>
  <section>
    <veui-button-group
      ui="alt"
      :items="group"
    />
  </section>
</article>
</template>

<script>
import { ButtonGroup } from 'veui'

export default {
  components: {
    'veui-button-group': ButtonGroup
  },
  data () {
    return {
      group: [
        {
          label: 'Undo',
          value: 'undo'
        },
        {
          label: 'Redo',
          value: 'redo'
        }
      ]
    }
  }
}
</script>

Size variants

Available size variants for the ui prop: large/small/tiny/micro.

<template>
<article>
  <veui-button-group
    ui="large"
    :items="group"
  />
  <veui-button-group :items="group"/>
  <veui-button-group
    ui="small"
    :items="group"
  />
  <veui-button-group
    ui="tiny"
    :items="group"
  />
  <veui-button-group
    ui="micro"
    :items="group"
  />
</article>
</template>

<script>
import { ButtonGroup } from 'veui'

export default {
  components: {
    'veui-button-group': ButtonGroup
  },
  data () {
    return {
      group: [
        {
          label: 'Undo',
          value: 'undo'
        },
        {
          label: 'Redo',
          value: 'redo'
        }
      ]
    }
  }
}
</script>

Disabled state

Use disabled prop to set the button group to disabled state.

Disabled

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <veui-button-group
      ui="primary"
      :items="group"
      :disabled="disabled"
    />
  </section>
  <section>
    <veui-button-group
      :items="group"
      :disabled="disabled"
    />
  </section>
  <section>
    <veui-button-group
      ui="alt"
      :items="group"
      :disabled="disabled"
    />
  </section>
</article>
</template>

<script>
import { ButtonGroup, Checkbox } from 'veui'

export default {
  components: {
    'veui-button-group': ButtonGroup,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      disabled: true,
      group: [
        {
          label: 'Undo',
          value: 'undo'
        },
        {
          label: 'Redo',
          value: 'redo'
        }
      ]
    }
  }
}
</script>

API

Props

Name Type Default Description

ui

string

Style variants. No support Button's link/dark/round/square variants.

Value	Description
`primary`	Primary button.
`alt`	Alternative styled button.
`dark`	Button used on dark background.
`link`	Link button.
`large`	Large button.
`small`	Small button.
`tiny`	Tiny button.
`micro`	Micro button.
`round`	Round button.
`square`	Square button.

items

Array<Object>

The datasource array for buttons in the group. The type of each item is {label, value}.

Name	Type	Description
`label`	`string`	The label text of the button.
`value`	`string=`	Will emit an event with the same name when specified.

disabled boolean false Whether the button is disabled.

Slots

Name Description

default

The content of each button.

Shows the text specified by the label prop by default.

Name	Type	Description
`label`	`string`	The label text of the button.
`value`	`string=`	The name of event when clicked.
`index`	`number`	The index of the button within `items`.
`disabled`	`boolean`	Whether the button is disabled.

Additionally, custom properties apart from the listed ones will also be passes into the scope object via v-bind.

Events

Name Description

click

Triggered upon clicks. The callback parameter list is (item, index).

Name	Type	Description
`item`	`{label: string, value: string=, ...}`	Datasource item.
`index`	`number`	The index of the button within `items`.

<value>

If the corresponding item has a value property, an event with the name of value value will be emitted each time the button is clicked. It shares the same parameters with the click event.