Interruptor Blazor

    El componente Ignite UI for Blazor Switch es un componente de selección de elección binaria que se comporta de forma similar al componente switch de iOS.

    Ejemplo de Blazor Switch

    EXAMPLE
    MODULES
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

    En esencia, el componente IgbSwitch permite alternar entre estados de encendido y apagado. El estilo predeterminado se realiza de acuerdo con la especificación de controles de selección en las pautas de Material Design.

    Antes de utilizar el IgbSwitch, debe registrarlo de la siguiente manera:

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));
    razor

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbSwitch componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
    razor
    <IgbSwitch />
    razor

    El componente IgbSwitch no funciona con el elemento <form> estándar. En su lugar, utilice Formulario.

    Ejemplos

    Etiqueta

    Para proporcionar una etiqueta significativa para el cambio, simplemente coloque algo de texto entre las etiquetas de apertura y cierre:

    <IgbSwitch>Label</IgbSwitch>
    razor

    Puede especificar si la etiqueta debe colocarse antes o después del interruptor configurando el atributo LabelPosition del interruptor. Los valores permitidos son before y after (predeterminado):

    <IgbSwitch LabelPosition="@CheckboxBaseLabelPosition.Before">Label</IgbSwitch>
    razor

    El interruptor también puede estar etiquetado por elementos externos al interruptor. En este caso, el usuario tiene control total para colocar y diseñar la etiqueta de acuerdo con sus necesidades.

    <span id="switch-label>Label</span>
    <IgbSwitch AriaLabelledBy="switch-label" />
    razor

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Comprobado

    Puede utilizar el atributo checked para activar el interruptor.

    <IgbSwitch Checked="true" />
    razor

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Requerido

    Puede utilizar el atributo required para marcar el cambio como requerido.

    <IgbSwitch Required="true" />
    razor

    Inválido

    Puede utilizar el atributo invalid para marcar el cambio como no válido.

    <IgbSwitch Invalid="true" />
    razor

    Desactivado

    Puede utilizar el atributo disabled para deshabilitar el interruptor.

    <IgbSwitch Disabled="true" />
    razor

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Formularios

    Puede utilizar los name atributos y value cuando utilice el modificador con Form.

    <IgbSwitch Name="wifi" Value="enabled" />
    razor

    Estilo

    El componente de cambio expone varias partes CSS (base, control, thumb y label) para brindarle control total sobre su estilo.

    igc-switch::part(control) {
      background: beige;
      border-radius: 0;
    }
    
    igc-switch::part(thumb) {
      background: olive;
      border-radius: 2px;
      box-shadow: none;
    }
    css

    Referencias de API

    Recursos adicionales