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
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-value">
<dx-button-group [items]="alignments" keyExpr="alignment" stylingMode="outlined"></dx-button-group>
</div>
</div>
<div class="dx-field">
<div class="dx-field-value">
<dx-button-group [items]="fontStyles" keyExpr="style" stylingMode="outlined" selectionMode="multiple"></dx-button-group>
</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">
<dx-button-group [items]="alignments" keyExpr="alignment" stylingMode="text"></dx-button-group>
</div>
</div>
<div class="dx-field">
<div class="dx-field-value">
<dx-button-group [items]="fontStyles" keyExpr="style" stylingMode="text" selectionMode="multiple"></dx-button-group>
</div>
</div>
</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 { 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();
}
}
@NgModule({
imports: [
BrowserModule,
DxButtonGroupModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .dx-viewport:not(.dx-theme-ios7) .dx-fieldset {
width: 420px;
margin: 30px auto;
}
::ng-deep .dx-viewport:not(.dx-theme-ios7) .dx-fieldset:first-child {
margin-top: 120px;
}
::ng-deep .dx-viewport:not(.dx-theme-ios7) {
font-size: 16px;
}
::ng-deep .dx-viewport:not(.dx-theme-ios7) .dx-field {
display: inline-block;
}
::ng-deep .dx-viewport:not(.dx-theme-ios7) .dx-field-value:not(.dx-widget) > .dx-button {
float: none;
}
::ng-deep .dx-viewport:not(.dx-theme-ios7) .dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button),
::ng-deep .dx-viewport:not(.dx-theme-ios7) {
float: none;
width: 100%;
}
::ng-deep .dx-viewport:not(.dx-theme-ios7) {
padding-left: 0;
}
::ng-deep .dx-field:first-child {
padding-right: 10px;
}
::ng-deep .dx-field:last-child {
padding-left: 10px;
}
::ng-deep .dx-buttongroup-mode-text .dx-field:first-child {
padding-right: 11px;
}
::ng-deep .dx-buttongroup-mode-text .dx-field:last-child {
padding-left: 9px;
}
::ng-deep .dx-demo-separator {
border-right-width: 1px;
border-right-style: solid;
}
import { Injectable } from '@angular/core';
export class Alignment {
icon: string;
alignment: string;
}
export class FontStyle {
icon: string;
style: string;
}
let alignments: Alignment[] = [
{
icon: "alignleft",
alignment: "left"
},
{
icon: "aligncenter",
alignment: "center"
},
{
icon: "alignright",
alignment: "right"
},
{
icon: "alignjustify",
alignment: "justify"
}
];
let fontStyle: FontStyle[] = [
{
icon: "bold",
style: "bold"
},
{
icon: "italic",
style: "italic"
},
{
icon: "underline",
style: "underline"
},
{
icon: "strike",
style: "strike"
}
];
@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://github.com/DevExpress/devextreme-angular/blob/master/README.md
System.config({
transpiler: 'ts',
typescriptOptions: {
module: "commonjs",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js',
'typescript': 'npm:typescript@2.2.2/lib/typescript.js',
'@angular/core': 'npm:@angular/core@7.1.3/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@7.1.3/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@7.1.3/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@7.1.3/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@7.1.3/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'npm:@angular/router@7.1.3/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@7.1.3/bundles/forms.umd.js',
'@angular/common/http': 'npm:@angular/common@7.1.3/bundles/common-http.umd.js',
'tslib': 'npm:tslib/tslib.js',
'rxjs': 'npm:rxjs@6.3.3',
'rxjs/operators': 'npm:rxjs@6.3.3/operators',
'devextreme': 'npm:devextreme@18.2',
'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.6/dist/quill.js',
'devextreme-angular': 'npm:devextreme-angular@18.2'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'rxjs': { main: 'index.js', defaultExtension: 'js' },
'rxjs/operators': { main: 'index.js', defaultExtension: 'js' },
'devextreme-angular': {
main: 'index.js',
defaultExtension: 'js'
}
}
});
<!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/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://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/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>