Interruptor Web Components

    El componente Switch Ignite UI for Web Components es un componente de selección de opciones binarias que se comporta de manera similar al componente Switch en 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.

    Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    Luego necesitarás importar IgcSwitchComponent, su CSS necesario y registrar su módulo, así:

    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 Introducción.

    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 IgcFormComponent 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 atributos de name y value cuando utilice el modificador con IgcFormComponent.

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

    Styling

    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;
}

    API References

    Additional Resources