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.

    Blazor Switch Example

    Usage

    En esencia, elIgbSwitch componente permite alternar entre estados encendido y apagado. El diseño por defecto se realiza según la especificación de controles de selección en las directrices de Diseño de Materiales.

    Antes de usarlosIgbSwitch, debes registrarlo de la siguiente manera:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbSwitch componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

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

    <IgbSwitch />

    [!WARNING] The IgbSwitch component doesn't work with the standard <form> element. Use Form instead.

    Examples

    Label

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

    <IgbSwitch>Label</IgbSwitch>

    Puedes especificar si la etiqueta debe colocarse antes o después del interruptor configurando elLabelPosition atributo del interruptor. Los valores permitidos sonbefore yafter (por defecto):

    <IgbSwitch LabelPosition="@ToggleLabelPosition.Before">Label</IgbSwitch>

    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" />

    Checked

    Puedes usar elchecked atributo para activar el interruptor.

    <IgbSwitch Checked="true" />

    Required

    Puedes usar elrequired atributo para marcar el interruptor según sea necesario.

    <IgbSwitch Required="true" />

    Invalid

    Puedes usar elinvalid atributo para marcar el interruptor como inválido.

    <IgbSwitch Invalid="true" />

    Disabled

    Puedes usar eldisabled atributo para desactivar el interruptor.

    <IgbSwitch Disabled="true" />

    Forms

    Puedes usar losname atributos yvalue cuando usas el switch con.Form​

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

    Styling

    ElIgbSwitch componente expone varias partes CSS para darte control total sobre su estilo:

    Nombre Descripción
    base El envoltorio base del switch.
    control El elemento de entrada del interruptor.
    thumb El indicador de posición del interruptor.
    label La etiqueta del interruptor. 
    igc-switch::part(thumb) {
  background-color: var(--ig-success-500);
  box-shadow: none;
}

igc-switch::part(thumb checked) {
  background-color: var(--ig-gray-50);
}

igc-switch::part(control checked) {
  background-color: var(--ig-success-500);
}

    API References

    Additional Resources