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.
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-value">
@(Html.DevExtreme().ButtonGroup()
.KeyExpr("alignment")
.StylingMode(ButtonStylingMode.Outlined)
.Items(items => {
items.Add().Icon("alignleft").Option("alignment", "left");
items.Add().Icon("aligncenter").Option("alignment", "center");
items.Add().Icon("alignright").Option("alignment", "right");
items.Add().Icon("alignjustify").Option("alignment", "justify");
})
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-value">
@(Html.DevExtreme().ButtonGroup()
.KeyExpr("style")
.StylingMode(ButtonStylingMode.Outlined)
.SelectionMode(ButtonGroupSelectionMode.Multiple)
.Items(items => {
items.Add().Icon("bold").Option("style", "bold");
items.Add().Icon("italic").Option("style", "italic");
items.Add().Icon("underline").Option("style", "underline");
items.Add().Icon("strike").Option("style", "strike");
})
)
</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 class="dx-field-value">
@(Html.DevExtreme().ButtonGroup()
.KeyExpr("alignment")
.StylingMode(ButtonStylingMode.Text)
.Items(items => {
items.Add().Icon("alignleft").Option("alignment", "left");
items.Add().Icon("aligncenter").Option("alignment", "center");
items.Add().Icon("alignright").Option("alignment", "right");
items.Add().Icon("alignjustify").Option("alignment", "justify");
})
)
</div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-value">
@(Html.DevExtreme().ButtonGroup()
.KeyExpr("style")
.StylingMode(ButtonStylingMode.Text)
.SelectionMode(ButtonGroupSelectionMode.Multiple)
.Items(items => {
items.Add().Icon("bold").Option("style", "bold");
items.Add().Icon("italic").Option("style", "italic");
items.Add().Icon("underline").Option("style", "underline");
items.Add().Icon("strike").Option("style", "strike");
})
)
</div>
</div>
</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ButtonGroupController : Controller {
public IActionResult Overview() {
return View();
}
}
}
.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;
}