Button Group
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.
jQuery
AngularJS
Angular
Vue
React
ASP.NET MVC
ASP.NET Core
$(function() {
$("#single-selection").dxButtonGroup({
items: alignments,
keyExpr: "alignment",
stylingMode: "outlined"
});
$("#multiple-selection").dxButtonGroup({
items: fontStyles,
keyExpr: "style",
stylingMode: "outlined",
selectionMode: "multiple"
});
$("#single-selection-styling-mode").dxButtonGroup({
items: alignments,
keyExpr: "alignment",
stylingMode: "text"
});
$("#multiple-selection-styling-mode").dxButtonGroup({
items: fontStyles,
keyExpr: "style",
stylingMode: "text",
selectionMode: "multiple"
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.common.css"/>
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.light.css"/>
<link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.android5.light.css"/>
<link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.ios7.default.css"/>
<link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.win10.black.css"/>
<link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.win10.white.css"/>
<script src="https://cdn3.devexpress.com/jslib/18.2.7/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="data.js"></script>
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-value">
<div id="single-selection"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-value">
<div id="multiple-selection"></div>
</div>
</div>
</div>
<div class="dx-fieldset dx-buttongroup-mode-text">
<div class="dx-field dx-theme-border-color dx-demo-separator">
<div class="dx-field-value">
<div id="single-selection-styling-mode"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-value">
<div id="multiple-selection-styling-mode"></div>
</div>
</div>
</div>
</div>
</body>
</html>
.dx-viewport:not(.dx-theme-ios7) .dx-fieldset {
width: 420px;
margin: 30px auto;
}
.dx-viewport:not(.dx-theme-ios7) .dx-fieldset:first-child {
margin-top: 120px;
}
.dx-viewport:not(.dx-theme-ios7) {
font-size: 16px;
}
.dx-viewport:not(.dx-theme-ios7) .dx-field {
display: inline-block;
}
.dx-viewport:not(.dx-theme-ios7) .dx-field-value:not(.dx-widget) > .dx-button {
float: none;
}
.dx-viewport:not(.dx-theme-ios7) .dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button),
.dx-viewport:not(.dx-theme-ios7) {
float: none;
width: 100%;
}
.dx-viewport:not(.dx-theme-ios7) {
padding-left: 0;
}
.dx-field:first-child {
padding-right: 10px;
}
.dx-field:last-child {
padding-left: 10px;
}
.dx-buttongroup-mode-text .dx-field:first-child {
padding-right: 11px;
}
.dx-buttongroup-mode-text .dx-field:last-child {
padding-left: 9px;
}
.dx-demo-separator {
border-right-width: 1px;
border-right-style: solid;
}
var alignments = [
{
icon: "alignleft",
alignment: "left"
},
{
icon: "aligncenter",
alignment: "center"
},
{
icon: "alignright",
alignment: "right"
},
{
icon: "alignjustify",
alignment: "justify"
}
];
var fontStyles = [
{
icon: "bold",
style: "bold"
},
{
icon: "italic",
style: "italic"
},
{
icon: "underline",
style: "underline"
},
{
icon: "strike",
style: "strike"
}
];