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

    At its core, the IgbSwitch component allows for toggling between on/off states. The default styling is done according to the selection controls specification in the Material Design guidelines.

    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>

    You can specify if the label should be positioned before or after the switch toggle by setting the LabelPosition attribute of the switch. Allowed values are before and after(default):

    <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

    You can use the checked attribute to toggle on the switch.

    <IgbSwitch Checked="true" />

    Required

    You can use the required attribute to mark the switch as required.

    <IgbSwitch Required="true" />

    Invalid

    You can use the invalid attribute to mark the switch as invalid.

    <IgbSwitch Invalid="true" />

    Disabled

    You can use the disabled attribute to disable the switch.

    <IgbSwitch Disabled="true" />

    Forms

    You can use the name and value attributes when using the switch with 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