Interruptor Web Components

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

    Web Components Switch Example

    Usage

    Básicamente, el componente IgcSwitchComponent 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.

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    A continuación, tendrás que importar el IgcSwitchComponent y el CSS necesario, de la siguiente manera:

    import { defineComponents, IgcSwitchComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSwitchComponent);

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

    La forma más sencilla de empezar a utilizarlo IgcSwitchComponent es la siguiente:

    <igc-switch></igc-switch>

    [!WARNING] The IgcSwitchComponent 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:

    <igc-switch>Label</igc-switch>

    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):

    <igc-switch label-position="before">Label</igc-switch>

    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>
<igc-switch aria-labelledby="switch-label"></igc-switch>

    Checked

    Puede utilizar el atributo checked para activar el interruptor.

    <igc-switch checked></igc-switch>

    Required

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

    <igc-switch required></igc-switch>

    Invalid

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

    <igc-switch invalid></igc-switch>

    Disabled

    Puede utilizar el atributo disabled para deshabilitar el interruptor.

    <igc-switch disabled></igc-switch>

    Forms

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

    <igc-switch name="wifi" value="enabled"></igc-switch>

    Styling

    El IgcSwitchComponent componente expone varias partes CSS para darle 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