Material Checkbox Style in MVC

-Material Checkbox Style in MVC

MVC projenizin genelinde kullanılan tüm Boolean(bool) tipli model property leri için 
otomatik uygulanabilecek material checkbox tasarımıdır. 

@Html.EditorFor ile kullanılması gerekmektedir.

1. Boolean.cshtml

@model bool?

@* "Views/Shared/EditorTemplates/Boolean.cshtml" konumunda ve dosya isminde oluşturulması gerekiyor. 
  Böylece Modeliniz ile EditorFor kullandığınız yerlerde otomatik kullanılır.  *@
  
<div class="material-switch">
  @Html.CheckBox("", Model.HasValue ? Model.Value : false, new { data_dependent_control_id =
          ViewData.ContainsKey("dependentControlId") ? ViewData["dependentControlId"] : "" })
  @Html.LabelFor(x => x, " ", new { @class = ViewData.ContainsKey("class") ? ViewData["class"] : "label-default", tabindex = "0" })
</div>

2. index.cshtml

@* Checkbox renklendirmesi için class="label-[success|danger|warning|default|info|primary]" verebilirsiniz.
  "dependentControlId" attribute ile bağımlı olduğu kontrolün enabled/disabled edilmesi sağlanır.(zorunlu değildir) *@

<div class="form-group">
  @Html.LabelFor(model => model.IsComparative, new { @class = "control-label col-md-4" })
  <div class="col-md-8">
    @Html.EditorFor(model => model.IsComparative, 
          new { @class = "label-success", dependentControlId = nameof(Model.ComparativeReportId) })
  </div>
</div>

3. script.js

$(function () {

  $(".material-switch").keydown(function (event) {
    
    // Klavyenizden 32 : space , 39 : right arrow , 37 : left arrow tuşlarına basıldığında
    // çalışması sağlanır. Böylece klavye desteği gelir.
    
    if (event.keyCode == 32 || event.keyCode == 39 || event.keyCode == 37) {
      var checked = $(this).parent().find("input:checkbox").prop('checked');
      $(this).parent().find("input:checkbox").prop('checked', !checked);
    }
    
  });

});

4. style.css

  .material-switch > input[type="checkbox"] {
    display: none;
  }

  .material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative;
    width: 40px;
  }

  .material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position: absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
  }

  .material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
  }

  .material-switch > input[type="checkbox"]:checked + input[type="hidden"] + label::before {
    background: inherit;
    opacity: 0.5;
  }

  .material-switch > input[type="checkbox"]:checked + input[type="hidden"] + label::after {
    background: inherit;
    left: 20px;
  }

Güzel bir özellik. Teşekkürler hocam.