ButtonGroup

Demos

Stylistic variants

Available style variants for the ui prop: primary / strong / basic.

<template>
<article>
  <section>
    <veui-button-group ui="primary">
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
  <section>
    <veui-button-group>
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
  <section>
    <veui-button-group ui="strong">
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
  <section>
    <veui-button-group ui="basic">
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
</article>
</template>

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

export default {
  components: {
    'veui-button': Button,
    'veui-button-group': ButtonGroup
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}

.veui-button-group {
  margin-right: 1em;
}
</style>

Size variants

Available size variants for the ui prop: xs / s / m / l / xl.

Edit this page on GitHubEdit

<template>
<article>
  <veui-button-group ui="xl">
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group ui="l">
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group ui="m">
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group ui="s">
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group ui="xs">
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
</article>
</template>

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

export default {
  components: {
    'veui-button': Button,
    'veui-button-group': ButtonGroup
  }
}
</script>

<style lang="less" scoped>
.veui-button-group {
  margin-right: 1em;
}
</style>

Using datasource

Use the items prop to provide content with a datasource.

When given a string value property on an item, clicking the corresponding button will emit an event with the same name on ButtonGroup.

Edit this page on GitHubEdit

<template>
<article>
  <veui-button-group :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>

<style lang="less" scoped>
.veui-button-group {
  margin-right: 1em;
}
</style>

Disabled state

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

Disabled

The disabled prop of ButtonGroup only takes effect when the content is specified using items, and if inline Button components are used, you need to specify the disabled prop for each button.

Edit this page on GitHubEdit

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

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

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

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

API

Props

Name Type Default Description

ui

string=

Style variants. A space-separated list of enum values.

Value	Description
`primary`	Primary buttons.
`strong`	Strong buttons.
`basic`	Basic buttons.
`xs`	Extra small.
`s`	Small.
`m`	Medium.
`l`	Large.
`xl`	Extra large.

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`	`*=`	Will emit an event with the same name when given a string value.

disabled boolean= false Whether the button is disabled.

Slots

Name Description

default Button group's content.

item

The content of each button.

Shows the text specified by the label property by default.

Name	Type	Description
`label`	`string`	The label text of the button.
`value`	`*=`	The value of button item.
`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: *=, ...}`	Datasource item.
`index`	`number`	The index of the button within `items`.

<value>

If the corresponding item has a string 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.

Edit this page on GitHubEdit