Button Group
Documentation
ButtonGroup is a widget that displays a set of toggleable buttons and allows a user to select one or several of them. This demo illustrates how to configure the widget to enable single and multiple selection.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<div>
<div class="buttongroups-container">
<dx-button-group
:items="alignments"
:selected-item-keys="['left']"
key-expr="alignment"
styling-mode="outlined"
@item-click="itemClick"
/>
<dx-button-group
:items="fontStyles"
key-expr="style"
styling-mode="outlined"
selection-mode="multiple"
@item-click="itemClick"
/>
</div>
<div class="buttongroups-container">
<dx-button-group
:items="alignments"
:selected-item-keys="['left']"
key-expr="alignment"
styling-mode="text"
@item-click="itemClick"
/>
<dx-button-group
:items="fontStyles"
class="multiple-selection-styling-mode"
key-expr="style"
styling-mode="text"
selection-mode="multiple"
@item-click="itemClick"
/>
</div>
</div>
</template>
<script>
import { DxButtonGroup } from 'devextreme-vue';
import { alignments, fontStyles } from './data.js';
import notify from 'devextreme/ui/notify';
export default {
components: {
DxButtonGroup
},
data() {
return {
alignments,
fontStyles
};
},
methods: {
itemClick(e) {
notify({ message: `The "${ e.itemData.hint }" button was clicked`, width: 320 }, 'success', 1000);
}
}
};
</script>
<style scoped>
.buttongroups-container {
display: flex;
justify-content: center;
font-size: 16px;
}
.buttongroups-container > div {
padding: 0 12px;
}
.buttongroups-container:first-child {
margin-top: 120px;
margin-bottom: 40px;
}
.multiple-selection-styling-mode {
border-left-width: 1px;
border-left-style: solid;
border-color: #dddddd;
}
</style>
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('./index.js');
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app">
<span v-if="false">Loading...</span>
</div>
</div>
</body>
</html>
export const alignments = [
{
icon: 'alignleft',
alignment: 'left',
hint: 'Align left'
},
{
icon: 'aligncenter',
alignment: 'center',
hint: 'Center'
},
{
icon: 'alignright',
alignment: 'right',
hint: 'Align right'
},
{
icon: 'alignjustify',
alignment: 'justify',
hint: 'Justify'
}
];
export const fontStyles = [
{
icon: 'bold',
style: 'bold',
hint: 'Bold'
},
{
icon: 'italic',
style: 'italic',
hint: 'Italic'
},
{
icon: 'underline',
style: 'underline',
hint: 'Underlined'
},
{
icon: 'strike',
style: 'strike',
hint: 'Strikethrough'
}
];
System.config({
transpiler: 'plugin-babel',
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js',
'vue-loader': 'npm:systemjs-vue-browser@latest/index.js',
'devextreme': 'npm:devextreme@19.1',
'devextreme-vue': 'npm:devextreme-vue@19.1',
jszip: 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.6/dist/quill.js',
'devexpress-diagram': 'npm:devexpress-diagram',
'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js'
},
meta: {
'*.vue': {
loader: 'vue-loader'
}
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true
}
});