ToggleSlider.razor (1314B)
1 <input type="checkbox"/><span>@ChildContent</span> 2 3 <div class="container"> 4 <label class="switch" for="checkbox"> 5 <input type="checkbox" id="checkbox" @bind="Value"/> 6 <div class="slider round"></div> 7 </label> 8 </div> 9 10 <style> 11 .switch { 12 display: inline-block; 13 height: 16px; 14 position: relative; 15 width: 32px; 16 } 17 18 .switch input { 19 display:none; 20 } 21 22 .slider { 23 background-color: #ccc; 24 bottom: 0; 25 cursor: pointer; 26 left: 0; 27 position: absolute; 28 right: 0; 29 top: 0; 30 transition: .4s; 31 } 32 33 .slider:before { 34 background-color: #fff; 35 bottom: -5px; 36 content: ""; 37 height: 26px; 38 left: -8px; 39 position: absolute; 40 transition: .4s; 41 width: 26px; 42 } 43 44 input:checked + .slider { 45 background-color: #66bb6a; 46 } 47 48 input:checked + .slider:before { 49 transform: translateX(24px); 50 } 51 52 .slider.round { 53 border-radius: 24px; 54 } 55 56 .slider.round:before { 57 border-radius: 50%; 58 } 59 </style> 60 61 @code { 62 [Parameter] 63 public RenderFragment? ChildContent { get; set; } 64 65 [Parameter] 66 public bool Value { get; set; } 67 [Parameter] 68 public EventCallback<bool> ValueChanged { get; set; } 69 70 }