Your search did not match any results.
Button Group

Button Group

Documentation

ButtonGroup is a UI component 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 ButtonGroup to enable single and multiple selection.

Backend API
Copy to CodePen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.singleButtonGroupOptions = { items: alignments, keyExpr: "alignment", stylingMode: "outlined", selectedItemKeys: ["left"], onItemClick: function(e){ DevExpress.ui.notify({ message: 'The "' + e.itemData.hint + '" button was clicked', width: 320 }, "success", 1000); } }; $scope.multipleButtonGroupOptions = { items: fontStyles, keyExpr: "style", stylingMode: "outlined", selectionMode: "multiple", onItemClick: function(e){ DevExpress.ui.notify({ message: 'The "' + e.itemData.hint + '" button was clicked', width: 320 }, "success", 1000); } }; $scope.singleStylingModeButtonGroupOptions = { items: alignments, keyExpr: "alignment", stylingMode: "text", selectedItemKeys: ["left"], onItemClick: function(e){ DevExpress.ui.notify({ message: 'The "' + e.itemData.hint + '" button was clicked', width: 320 }, "success", 1000); } }; $scope.multipleStylingModeButtonGroupOptions = { items: fontStyles, keyExpr: "style", stylingMode: "text", selectionMode: "multiple", onItemClick: function(e){ DevExpress.ui.notify({ message: 'The "' + e.itemData.hint + '" button was clicked', width: 320 }, "success", 1000); } }; });
<!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.5.1/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/21.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/21.1.6/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" ng-app="DemoApp" ng-controller="DemoController"> <div class="buttongroups-container"> <div dx-button-group="singleButtonGroupOptions"></div> <div dx-button-group="multipleButtonGroupOptions"></div> </div> <div class="buttongroups-container"> <div dx-button-group="singleStylingModeButtonGroupOptions"></div> <div id="multiple-selection-styling-mode" dx-button-group="multipleStylingModeButtonGroupOptions"></div> </div> </div> </body> </html>
.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; }
var 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" } ]; var 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" } ];