VEUI

VEUI on GitHub
Play!中文中
⌘ K | Full-text search...

RadioButtonGroup

Examples

Size variants

Available ui prop values: s / m.

Normal size

Selected: -

Small size & Square shape

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <h4>Normal size</h4>
    <veui-radio-button-group
      v-model="flavor"
      :items="flavors"
    />
    <p>Selected: {{ readable }}</p>
  </section>
  <section>
    <h4>Small size &amp; Square shape</h4>
    <veui-radio-button-group
      ui="s"
      :items="actions"
    >
      <template #item="{ value }">
        <veui-icon :name="value"/>
      </template>
    </veui-radio-button-group>
  </section>
</article>
</template>

<script>
import { RadioButtonGroup, Icon } from 'veui'
import 'veui-theme-dls-icons/clockwise'
import 'veui-theme-dls-icons/search'

export default {
  components: {
    'veui-radio-button-group': RadioButtonGroup,
    'veui-icon': Icon
  },
  data () {
    return {
      flavor: null,
      flavors: [
        { value: 'LATTE', label: 'Latte' },
        { value: 'MOCHA', label: 'Mocha' },
        { value: 'AMERICANO', label: 'Americano' }
      ],
      actions: [
        {
          label: '刷新',
          value: 'clockwise'
        },
        {
          label: '搜索',
          value: 'search'
        }
      ]
    }
  },
  computed: {
    flavorLabelMap () {
      return this.flavors.reduce((map, { value, label }) => {
        map[value] = label
        return map
      }, {})
    },
    readable () {
      return this.flavorLabelMap[this.flavor] || '-'
    }
  }
}
</script>

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

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

Simple style

Set ui prop value to simple to apply the style variant.

Selected: -

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-radio-button-group
      v-model="flavor"
      ui="simple"
      :items="flavors"
    />
    <p>Selected: {{ readable }}</p>
  </section>
</article>
</template>

<script>
import { RadioButtonGroup } from 'veui'

export default {
  components: {
    'veui-radio-button-group': RadioButtonGroup
  },
  data () {
    return {
      flavor: null,
      flavors: [
        { value: 'LATTE', label: 'Latte' },
        { value: 'MOCHA', label: 'Mocha' },
        { value: 'AMERICANO', label: 'Americano' }
      ]
    }
  },
  computed: {
    flavorLabelMap () {
      return this.flavors.reduce((map, { value, label }) => {
        map[value] = label
        return map
      }, {})
    },
    readable () {
      return this.flavorLabelMap[this.flavor] || '-'
    }
  }
}
</script>

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

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

Additional description

Set the desc field in the data source or use the desc slot to specify additional description. The additional description will be displayed on hover.

desc field

desc slot

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <h4><code>desc</code> field</h4>
    <veui-radio-button-group
      v-model="flavor"
      :items="flavors"
    />
  </section>
  <section>
    <h4><code>desc</code> slot</h4>
    <veui-radio-button-group
      v-model="flavor"
      :items="flavors"
    >
      <template #desc="{ desc, label }">
        {{ desc || `A description for ${label}` }}
      </template>
    </veui-radio-button-group>
  </section>
</article>
</template>

<script>
import { RadioButtonGroup } from 'veui'

export default {
  components: {
    'veui-radio-button-group': RadioButtonGroup
  },
  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 ui prop value to stable to enable minimum width for options, making the layout more stable in multi-line scenarios.

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-checkbox v-model="isStable">
      Stable layout
    </veui-checkbox>
  </section>
  <veui-radio-button-group
    v-model="flavor"
    :items="flavors"
    :ui="isStable ? 'stable' : ''"
  />
</article>
</template>

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

export default {
  components: {
    'veui-radio-button-group': RadioButtonGroup,
    '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;
}

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

API

Props

NameTypeDefaultDescription
uistring-

Predefined styles.

ValueDescription
sSmall size.
mMedium size.
simpleSimple style.
stableStable style. Adds a minimum width to all buttons to make the layout more stable and easier to align between multiple lines.
itemsArray<Object>[]

Data source of radio buttons. The type of each item is { label, value, disabled, desc, ... }.

NameTypeDescription
labelstringText description of the option.
value*Value corresponding to the option.
disabledbooleanWhether the option is disabled.
descstringAdditional description information for the option.
value*-

v-model

The list of value of selected options in items.

disabledbooleanfalseWhether the component is disabled.
readonlybooleanfalseWhether the component is read-only.

Slots

NameDescription
item

Text area inside the button.

Default content: label attribute value.

NameTypeDescription
labelstringOption text.
valuestringOption value.
indexnumberOption index in items.
disabledbooleanWhether the option is disabled.
descstringAdditional description information for the option.

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

descAdditional description information for the button. Slot parameters are the same as those of the item slot.

Events

NameDescription
change

v-model

Triggered after the selection status changes. The callback parameter is (value: *). value is the value of the value field of the currently selected option in the button group.

CSS

NameTypeDefaultDescription
--dls-checkbox-button-min-width<length>-Minimum width of options when ui is set to stable.
Edit this page on GitHubEdit
© Baidu, Inc. 2024