VEUI

VEUI on GitHub
中文

ButtonGroup

Demos

Stylistic variants

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

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

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

NameTypeDefaultDescription
uistring=-

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

ValueDescription
primaryPrimary buttons.
strongStrong buttons.
basicBasic buttons.
xsExtra small.
sSmall.
mMedium.
lLarge.
xlExtra large.
itemsArray<Object>-

The datasource array for buttons in the group. The type of each item is {label, value}.

NameTypeDescription
labelstringThe label text of the button.
value*=Will emit an event with the same name when given a string value.
disabledboolean=falseWhether the button is disabled.

Slots

NameDescription
defaultButton group's content.
item

The content of each button.

Shows the text specified by the label property by default.

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

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

Events

NameDescription
click

Triggered upon clicks. The callback parameter list is (item, index).

NameTypeDescription
item{label: string, value: *=, ...}Datasource item.
indexnumberThe 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
© Baidu, Inc. 2023