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.

To get started with the DevExtreme ButtonGroup component, refer to the following tutorial for step-by-step instructions: Getting Started with ButtonGroup.

Backend API
Copy to CodeSandBox
Apply
Reset
<div class="buttongroups-container"> <dx-button-group [items]="alignments" keyExpr="alignment" stylingMode="outlined" [selectedItemKeys]="['left']" (onItemClick)="itemClick($event)" > </dx-button-group> <dx-button-group [items]="fontStyles" keyExpr="style" stylingMode="outlined" selectionMode="multiple" (onItemClick)="itemClick($event)" > </dx-button-group> </div> <div class="buttongroups-container"> <dx-button-group [items]="alignments" keyExpr="alignment" stylingMode="text" [selectedItemKeys]="['left']" (onItemClick)="itemClick($event)" > </dx-button-group> <dx-button-group class="multiple-selection-styling-mode" [items]="fontStyles" keyExpr="style" stylingMode="text" selectionMode="multiple" (onItemClick)="itemClick($event)" > </dx-button-group> </div>
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxButtonGroupModule } from 'devextreme-angular'; import notify from 'devextreme/ui/notify'; import { Alignment, FontStyle, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], preserveWhitespaces: true, }) export class AppComponent { alignments: Alignment[]; fontStyles: FontStyle[]; constructor(service: Service) { this.alignments = service.getAlignments(); this.fontStyles = service.getFontStyles(); } itemClick(e) { notify({ message: `The "${e.itemData.hint}" button was clicked`, width: 320 }, 'success', 1000); } } @NgModule({ imports: [ BrowserModule, DxButtonGroupModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
.buttongroups-container { display: flex; justify-content: center; font-size: 16px; } .dx-buttongroup { 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: #ddd; }
import { Injectable } from '@angular/core'; export class Alignment { icon: string; alignment: string; hint: string; } export class FontStyle { icon: string; style: string; hint: string; } const alignments: Alignment[] = [ { 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', }, ]; const fontStyle: FontStyle[] = [ { icon: 'bold', style: 'bold', hint: 'Bold', }, { icon: 'italic', style: 'italic', hint: 'Italic', }, { icon: 'underline', style: 'underline', hint: 'Underlined', }, { icon: 'strike', style: 'strike', hint: 'Strikethrough', }, ]; @Injectable() export class Service { getAlignments() : Alignment[] { return alignments; } getFontStyles() : FontStyle[] { return fontStyle; } }
// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.5.3/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.13', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.13', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.13', '@angular/forms': 'npm:@angular/forms@12.2.13', '@angular/common/http': 'npm:@angular/common@12.2.13/bundles/common-http.umd.js', '@angular/common': 'npm:@angular/common@12.2.13', '@angular/compiler': 'npm:@angular/compiler@12.2.13', 'tslib': 'npm:tslib@2.3.1/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.2.3/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@21.2.3/bundles/dx.all.js', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.5/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.37', 'devexpress-gantt': 'npm:devexpress-gantt@3.1.24', 'devextreme-angular': 'npm:devextreme-angular@21.2.3', '@devextreme/vdom': 'npm:@devextreme/vdom@2.2.3', '@devextreme/runtime': 'npm:@devextreme/runtime@2.3.8', 'inferno': 'npm:inferno@7.4.10/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.10/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.10/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.10/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.10/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.10/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.10/dist/inferno-extras.min.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, '@devextreme/vdom': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@2.3.8/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common/*/package.json', 'npm:rxjs@6.4.0/package.json', 'npm:rxjs@6.4.0/operators/package.json', 'npm:devextreme-angular/*/package.json', 'npm:devextreme-angular@21.2.3/ui/*/package.json', 'npm:devextreme-angular@21.2.3/package.json', 'npm:devexpress-diagram@2.1.37/package.json', 'npm:devexpress-gantt@3.1.24/package.json', ], }; System.config(window.config);
<!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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.11.4/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>