ButtonGroup

Examples

Style variants

Available ui prop values: primary / strong / basic.

<template>
<article>
  <section>
    <veui-button-group
      class="group"
      ui="primary"
    >
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
  <section>
    <veui-button-group class="group">
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
  <section>
    <veui-button-group
      class="group"
      ui="strong"
    >
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
  <section>
    <veui-button-group
      class="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;
}

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

Size variants

Available ui prop values: xs / s / m / l / xl.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-button-group
    class="group"
    ui="xl"
  >
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group
    class="group"
    ui="l"
  >
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group
    class="group"
    ui="m"
  >
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group
    class="group"
    ui="s"
  >
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group
    class="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>
.group {
  margin-right: 1em;
}
</style>

Using datasource

You can use the items prop to specify button content via a data source.

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 demo on GitHubEdit

<template>
<article>
  <veui-button-group
    class="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>
.group {
  margin-right: 1em;
}
</style>

Disabled

Set the disabled prop to disable the button.

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 demo 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

A set of enumerated values separated by spaces.

Value	Description
`primary`	Primary button, background displayed as theme color.
`strong`	Enhanced style.
`basic`	Basic style.
`xs`	Extra small size style.
`s`	Small size style.
`m`	Medium size style.
`l`	Large size style.
`xl`	Extra large size style.

items

Array<Object>

An array of button data items, with the format {label, value}.

Name	Type	Description
`label`	`string`	Button text.
`value`	`*`	If passed a `string` value, the event with the same name will be triggered when the button is clicked.

disabled boolean false Whether the button is disabled.

Slots

Name Description

default Button group content area.

item

Used to customize the content of each button.

Default content: label prop value.

Name	Type	Description
`label`	`string`	Button text.
`value`	`*`	The `value` of the button item.
`index`	`number`	The index of the button in `items`.
`disabled`	`boolean`	Whether the button is disabled.

In addition, any properties in the items data item other than those described above will also be automatically bound to the slot props via v-bind.

Events

Name Description

click

Triggered after clicking, with callback parameters (item, index).

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

<value> If the corresponding data item has a value field of type string, an event with the name of the value value will be triggered after clicking, with the same parameters as the click event.

Edit this page on GitHubEdit