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.
window.onload = function() {
var viewModel = {
singleButtonGroupOptions: {
items: alignments,
keyExpr: "alignment",
stylingMode: "outlined"
},
multipleButtonGroupOptions: {
items: fontStyles,
keyExpr: "style",
stylingMode: "outlined",
selectionMode: "multiple"
},
singleStylingModeButtonGroupOptions: {
items: alignments,
keyExpr: "alignment",
stylingMode: "text"
},
multipleStylingModeButtonGroupOptions: {
items: fontStyles,
keyExpr: "style",
stylingMode: "text",
selectionMode: "multiple"
}
};
ko.applyBindings(viewModel, document.getElementById("demo"));
};
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></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 id="demo">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-value">
<div data-bind="dxButtonGroup: singleButtonGroupOptions"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-value">
<div data-bind="dxButtonGroup: multipleButtonGroupOptions"></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 data-bind="dxButtonGroup: singleStylingModeButtonGroupOptions"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-value">
<div data-bind="dxButtonGroup: multipleStylingModeButtonGroupOptions"></div>
</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"
}
];