Vue ButtonGroup - items

Configures buttons in the group.

Selector: DxItem

The items array can contain:

  • Objects with fields described in this section
  • Objects with any other fields. In this case, specify the buttonTemplate.

If you need to update the UI component items, reassign the entire items[] array as shown in the following example:

JavaScript
  • buttonGroupInstance.option('items', newItems);
See Also

disabled

Specifies whether the UI component item responds to user interaction.

Type:

Boolean

Default Value: false

elementAttr

Specifies the global attributes to be attached to the button group item's container element.

Selector: DxElementAttr
Type:

Object

App.vue
  • <template>
  • <DxButtonGroup ...
  • :items="buttonGroupItems"
  • />
  • </template>
  •  
  • <script>
  • import DxButtonGroup from 'devextreme-vue/button-group';
  •  
  • const buttonGroupItems = [{
  • // ...
  • elementAttr: {
  • class: "class-name"
  • }
  • }, // ...
  • ];
  •  
  • export default {
  • components: {
  • DxButtonGroup,
  • },
  • data() {
  • return {
  • buttonGroupItems
  • }
  • }
  • }
  • </script>

hint

Specifies a text for the hint that appears when the button is hovered over or long-pressed.

Type:

String

icon

Specifies the icon to be displayed on the button.

Type:

String

This property accepts one of the following:

View Demo

template

Specifies a template that should be used to render this item only.

Type:

template

Template Data:

CollectionWidgetItem

The item object to be rendered.

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a DOM Node of the template's container.

The following example adds a custom item to the component. Note that Vue uses custom templates instead of the template property.

App.vue
  • <template>
  • <DxButtonGroup ... >
  • <dxItem ... >
  • <div>Custom Item</div>
  • </dxItem>
  • </DxButtonGroup>
  • </template>
  •  
  • <script>
  •  
  • import DxButtonGroup, {
  • DxItem
  • } from 'devextreme-vue/button-group';
  •  
  • export default {
  • components: {
  • DxButtonGroup,
  • DxItem
  • },
  • // ...
  • }
  • </script>
See Also

text

Specifies text displayed for the UI component item.

Type:

String

If you use both this property and a template, the template overrides the text.

type

Specifies the button type.

Type:

ButtonType

Default Value: 'normal'

DevExtreme supplies the following button types:

Button types

visible

Specifies whether or not a UI component item must be displayed.

Type:

Boolean

Default Value: true