<div class="buttons-demo">
<div class="buttons-header">
<div></div>
<div>Normal</div>
<div>Success</div>
<div>Default</div>
<div>Danger</div>
</div>
<div class="types">
<div>Contained</div>
<div>Outlined</div>
<div>Text</div>
</div>
<div class="buttons">
@foreach(var mode in new[] { ButtonStylingMode.Contained, ButtonStylingMode.Outlined, ButtonStylingMode.Text }) {
foreach(var type in new[] { ButtonType.Normal, ButtonType.Success, ButtonType.Default, ButtonType.Danger }) {
var text = "OK";
switch(type) {
case ButtonType.Success:
text = "Apply";
break;
case ButtonType.Default:
text = "Done";
break;
case ButtonType.Danger:
text = "Delete";
break;
}
<div>
@(Html.DevExtreme().Button()
.Text(text)
.Type(type)
.StylingMode(mode)
.Width(90)
.OnClick("notify")
)
</div>
}
}
</div>
</div>
<script>
function notify(e) {
var buttonText = e.component.option("text");
DevExpress.ui.notify("The " + buttonText + " button was clicked");
}
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ButtonController : Controller {
public ActionResult PredefinedTypes() {
return View();
}
}
}
.demo-container {
display: flex;
justify-content: center;
height: 450px;
}
.buttons-demo {
width: 600px;
align-self: center;
}
.buttons-header {
display: flex;
flex-wrap: nowrap;
}
.buttons-header > div {
flex-grow: 0;
flex-basis: 120px;
height: 30px;
}
.types {
width: 120px;
display: flex;
flex-direction: column;
float: left;
}
.types > div {
flex-grow: 1;
padding: 10px;
height: 30px;
line-height: 20px;
font-weight: bold;
opacity: 0.7;
}
.buttons {
display: flex;
flex-wrap: wrap;
margin-left: 120px;
}
.buttons > div {
flex-basis: 120px;
height: 50px;
}