Color Box
Documentation
The ColorBox is a widget that allows an end user to enter a color or pick it out from the drop-down editor.
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
<div class="form">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Default mode</div>
<div class="dx-field-value">
@(Html.DevExtreme().ColorBox()
.Value("#f05b41")
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Disabled</div>
<div class="dx-field-value">
@(Html.DevExtreme().ColorBox()
.Value("#f05b41")
.Disabled(true)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Read only</div>
<div class="dx-field-value">
@(Html.DevExtreme().ColorBox()
.Value("#f05b41")
.ReadOnly(true)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Custom button captions</div>
<div class="dx-field-value">
@(Html.DevExtreme().ColorBox()
.Value("#f05b41")
.ApplyButtonText("Apply")
.CancelButtonText("Decline")
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">With alpha channel editing</div>
<div class="dx-field-value">
@(Html.DevExtreme().ColorBox()
.Value("#f05b41")
.EditAlphaChannel(true)
)
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">Event Handling</div>
<div class="hero-block">
<div class="color-block">
<div class="superhero"></div>
</div>
<div class="hero-color-box">
@(Html.DevExtreme().ColorBox()
.Value("#f05b41")
.ApplyValueMode(EditorApplyValueMode.Instantly)
.OnValueChanged("colorBox_valueChanged")
.OnInput("colorBox_inputChanged")
)
</div>
</div>
</div>
</div>
<script>
function colorBox_valueChanged(e) {
$(".color-block").css("background-color", e.component.option("value"));
}
function colorBox_inputChanged(e) {
$(".color-block").css("background-color", e.jQueryEvent.target.value);
}
</script>
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ColorBoxController : Controller {
public ActionResult Overview() {
return View();
}
}
}
.form {
min-height: 690px;
}
.form .dx-field-value {
text-align: right;
}
.dx-fieldset-header {
padding: 10px 0;
}
.color-block {
width: 360px;
height: 254px;
background-color: #f05b41;
position: relative;
}
.hero-color-box{
position: absolute;
right: 0;
left: 400px;
top: 110px;
}
.color-block .superhero{
position: absolute;
height: 100%;
width: 100%;
}
.hero-block {
position: relative;
}
.superhero {
background-image: url(../../images/colorbox/hero_white.png);
}
.dx-color-scheme-dark .superhero {
background-image: url(../../images/colorbox/hero_black.png);
}
.dx-color-scheme-darkmoon .superhero {
background-image: url(../../images/colorbox/hero_darkmoon.png);
}
.dx-color-scheme-darkviolet .superhero {
background-image: url(../../images/colorbox/hero_darkviolet.png);
}
.dx-color-scheme-greenmist .superhero {
background-image: url(../../images/colorbox/hero_greenmist.png);
}
.dx-color-scheme-contrast .superhero {
background-image: url(../../images/colorbox/hero_contrast.png);
}