MatrixRoomUtils

ToggleSlider.razor (1314B)

---

 <input type="checkbox"/><span>@ChildContent</span>
 
 <div class="container">
     <label class="switch" for="checkbox">
         <input type="checkbox" id="checkbox" @bind="Value"/>
         <div class="slider round"></div>
     </label>
 </div>
 
 <style>
     .switch {
       display: inline-block;
       height: 16px;
       position: relative;
       width: 32px;
     }
     
     .switch input {
       display:none;
     }
     
     .slider {
       background-color: #ccc;
       bottom: 0;
       cursor: pointer;
       left: 0;
       position: absolute;
       right: 0;
       top: 0;
       transition: .4s;
     }
     
     .slider:before {
       background-color: #fff;
       bottom: -5px;
       content: "";
       height: 26px;
       left: -8px;
       position: absolute;
       transition: .4s;
       width: 26px;
     }
     
     input:checked + .slider {
       background-color: #66bb6a;
     }
     
     input:checked + .slider:before {
       transform: translateX(24px);
     }
     
     .slider.round {
       border-radius: 24px;
     }
     
     .slider.round:before {
       border-radius: 50%;
     }
 </style>
 
 @code {
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
     
     [Parameter]
     public bool Value { get; set; }
     [Parameter]
     public EventCallback<bool> ValueChanged { get; set; }
     
 }