Checkbox Switch Button Razor

BS6: el mismo código para check normal, sólo cambia form-switch en el div contenedor

<div class="col-auto text-end form-check form-switch">
    <input id="checkPositive" type="checkbox" class="form-check-input" @bind="ShowNuevoFabricante"/>
    <label class="form-check-label" for="checkPositive"> Nuevo</label>
</div>

Para que se visualice como un switch necesitamos:

• crear un div que lo contenga como custom-control custom-switch
• Crear una label con el atributo for (aunque no se quiera poner nada, es imprescindible crearla con nbsp dentro)
• Aplicar la clase custom-control-input

En código funciona como un checkbox normal, se puede enlazar con una propiedad y detectar cambios en el SET

<div class="col-4">
   <p class="formLabel">Ocultar Negativos</p>
   <div class="custom-control custom-switch" >
      <input id="checkPositive" type="checkbox" class="custom-control-input"    @bind="ViewOnlyPositiveTrend" />
      <label class="custom-control-label" for="checkPositive"> Modificar</label>
   </div>
</div>

bool ViewOnlyPositiveTrend
{
   get
   {
       return _viewOnlyPositiveTrend;
   }
   set
   {
      _viewOnlyPositiveTrend = value;
      RefreshFromMemory();
   }
}

Anuncio publicitario