CheckButtonGroup

Examples

Size

Available ui prop values: s / m.

Normal size

Checked: -

Small size

Checked: -

<template>
<article>
  <section>
    <h4>Normal size</h4>
    <veui-check-button-group
      v-model="selected"
      :items="licenses"
    />
    <p>Checked: {{ readable }}</p>
  </section>
  <section>
    <h4>Small size</h4>
    <veui-check-button-group
      v-model="selected"
      ui="s"
      :items="licenses"
    />
    <p>Checked: {{ readable }}</p>
  </section>
</article>
</template>

<script>
import { CheckButtonGroup } from 'veui'

export default {
  components: {
    'veui-check-button-group': CheckButtonGroup
  },
  data () {
    return {
      selected: null,
      licenses: [
        {
          label: 'MIT License',
          value: 'mit'
        },
        {
          label: 'BSD License',
          value: 'bsd'
        },
        {
          label: 'Apache License 2.0',
          value: 'apache2'
        }
      ]
    }
  },
  computed: {
    readable () {
      return (this.selected || []).join(', ') || '-'
    }
  }
}
</script>

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

h4 {
  margin-top: 0;
}
</style>

Simple style

Set ui prop value to simple for a simple style.

Checked: any

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-check-button-group
      v-model="selected"
      ui="simple"
      :items="sizes"
    />
    <p>Checked: {{ readable }}</p>
  </section>
</article>
</template>

<script>
import { CheckButtonGroup } from 'veui'

export default {
  components: {
    'veui-check-button-group': CheckButtonGroup
  },
  data () {
    return {
      selected: ['any'],
      sizes: [
        {
          label: 'Any',
          value: 'any'
        },
        {
          label: 'Small',
          value: 'sm'
        },
        {
          label: 'Medium',
          value: 'md'
        },
        {
          label: 'Large',
          value: 'lg'
        }
      ]
    }
  },
  computed: {
    readable () {
      return (this.selected || []).join(', ') || '-'
    }
  }
}
</script>

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

h4 {
  margin-top: 0;
}
</style>

Mixed selection

Use the exclusive and empty-value props to achieve some scenarios where single and multiple selections coexist.

Select size

Checked: any

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>Select size</h4>
    <veui-check-button-group
      v-model="selected"
      :items="licenses"
      empty-value="any"
    />
    <p>Checked: {{ readable }}</p>
  </section>
</article>
</template>

<script>
import { CheckButtonGroup } from 'veui'

export default {
  components: {
    'veui-check-button-group': CheckButtonGroup
  },
  data () {
    return {
      selected: ['any'],
      licenses: [
        {
          label: 'Any',
          value: 'any',
          exclusive: true
        },
        {
          label: 'Small',
          value: 'sm'
        },
        {
          label: 'Medium',
          value: 'md'
        },
        {
          label: 'Large',
          value: 'lg'
        }
      ]
    }
  },
  computed: {
    readable () {
      return (this.selected || []).join(', ') || '-'
    }
  }
}
</script>

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

h4 {
  margin-top: 0;
}
</style>

Additional description

Set the desc field in the data source items or specify the additional description through the desc slot. The additional description will be displayed when hovering.

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-check-button-group
      v-model="flavor"
      :items="flavors"
    />
  </section>
  <section>
    <veui-check-button-group
      v-model="flavor"
      :items="flavors"
    >
      <template #desc="{ desc, label }">
        {{ desc || `a description for ${label}` }}
      </template>
    </veui-check-button-group>
  </section>
</article>
</template>

<script>
import { CheckButtonGroup } from 'veui'

export default {
  components: {
    'veui-check-button-group': CheckButtonGroup
  },
  data () {
    return {
      flavor: null,
      flavors: [
        { value: 'LATTE', label: 'Latte', desc: 'a description for latte.' },
        { value: 'MOCHA', label: 'Mocha', desc: 'a description for mocha.' },
        { value: 'AMERICANO', label: 'Americano' }
      ]
    }
  }
}
</script>

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

h4 {
  margin-top: 0;
}
</style>

Minimum width

Set the ui prop value to stable to enable a minimum width for options, making the layout more stable in multi-line scenarios.

Stable layout

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="isStable">
      Stable layout
    </veui-checkbox>
  </section>
  <veui-check-button-group
    v-model="flavor"
    :items="flavors"
    :ui="isStable ? 'stable' : ''"
  />
</article>
</template>

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

export default {
  components: {
    'veui-check-button-group': CheckButtonGroup,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      isStable: true,
      flavor: null,
      flavors: [
        { value: 'LATTE', label: 'Latte' },
        { value: 'MOCHA', label: 'Mocha' },
        { value: 'AMERICANO', label: 'Americano' }
      ]
    }
  }
}
</script>

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

API

Props

Name Type Default Description

ui

string

Preset styles.

Value	Description
`s`	Small size style.
`m`	Medium size style.
`simple`	Simple style.
`stable`	Stable style. Adds a minimum width to all buttons to make the layout more stable, making it easier to align between multiple lines.

items

Array<Object>

[]

Check button group data source, item type: { label, value, disabled, exclusive, desc, ... }.

Name	Type	Description
`label`	`string`	Text description of the option.
`value`	`*`	The value corresponding to the option.
`disabled`	`boolean`	Whether the option is disabled.
`exclusive`	`boolean`	Whether the option is exclusive. When the option is exclusive, selecting it will deselect all other options.
`desc`	`string`	Additional description information of the option.

value

Array

[]

v-model

List of value properties of selected items in items.

disabled boolean false Whether the component is in a disabled state.

readonly boolean false Whether the component is in a read-only state.

empty-value * - The default selected value when all selections are canceled, usually used in scenarios with the exclusive prop.

Slots

Name Description

item

Text area inside the button.

Default content: label prop value.

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

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

desc Additional description information of the button, with the same slot props as item.

Events

Name	Description
`change`	`v-model` Triggered when the selection state changes, callback parameter is `(value: Array)`. `value` is an array of `value` properties of the currently selected options in the button group.

Icons

Name	Description
`check`	Selected icon.

CSS

Name	Type	Default	Description
`--dls-checkbox-button-min-width`	`<length>`	-	The minimum width of the option when the `ui` prop is set to `stable`.

Edit this page on GitHubEdit