VEUI

VEUI on GitHub
中文

CheckButtonGroup

Demos

Size variants

Available values for the ui prop: s / m.

Normal size

Checked: -

Small size

Checked: -

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

API

Props

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
sSmall.
mMedium.
simpleSimple style.
stableStable width layout. Every button will have a minimal width so that it'll be easier to align buttons across multiple rows.
itemsArray<Object>[]

The datasource of items with the item type being {label, value, disabled, exclusive ...}.

NameTypeDescription
labelstringThe descriptive label of the item.
value*The value of the item.
disabledboolean=Whether the item is disabled.
valueArray[]

v-model

The values of the selected items.

disabledboolean=falseWhether the check button group is disabled.
readonlyboolean=falseWhether the check button group is read-only.
empty-value*-The value to be selected when all selected values are deselected. Used when exclusive items are present.

Slots

NameDescription
item

The label content of each button. Displays the value of the label property by default.

NameTypeDescription
labelstringThe descriptive label of the item.
value*The value of the item.
indexnumberThe index of the item within items.
disabledboolean=Whether the item is disabled.

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

Events

NameDescription
change

v-model

Triggers when the selected item changed. The callback parameter list is (value: Array) and value is the value array of the selected items.

Icons

NameDescription
checkThe loading spinner.
Edit this page on GitHubEdit
© Baidu, Inc. 2023