Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    Color Box

    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    <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">With alpha channel editing</div> <div class="dx-field-value"> @(Html.DevExtreme().ColorBox() .Value("#f05b41") .EditAlphaChannel(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">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">Disabled</div> <div class="dx-field-value"> @(Html.DevExtreme().ColorBox() .Value("#f05b41") .Disabled(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); } .dx-color-scheme-blue-dark .superhero, .dx-color-scheme-orange-dark .superhero, .dx-color-scheme-teal-dark .superhero, .dx-color-scheme-lime-dark .superhero, .dx-color-scheme-purple-dark .superhero { background-image: url(../../images/colorbox/hero_material_dark.png); }