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

    En esencia, elIgcSwitchComponent 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.

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

    npm install igniteui-webcomponents

    Entonces tendrás que importar elIgcSwitchComponent CSS necesario y su contenido, así:

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

defineComponents(IgcSwitchComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    La forma más sencilla de empezar a usar elIgcSwitchComponent uso 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>

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

    <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

    Puedes usar elchecked atributo para activar el interruptor.

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

    Required

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

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

    Invalid

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

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

    Disabled

    Puedes usar eldisabled atributo para desactivar el interruptor.

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

    Forms

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

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

    Styling

    ElIgcSwitchComponent 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 {
    --thumb-on-color: white;
    --thumb-off-color: var(--ig-success-500);
    --track-on-color: var(--ig-success-500); /* Background color when checked */
    --track-off-color: white; /* Background color when unchecked */
    --track-on-hover-color: var(--ig-success-500); /* Background hover color when checked */
  }

    API References

    Additional Resources