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.

    Ejemplo de Web Components Switch

    EXAMPLE
    TS
    HTML
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

    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
    cmd

    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);
    ts

    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>
    html

    El componente IgcSwitchComponent no funciona con el elemento estándar <form>. En su lugar, utilice Formulario.

    Ignite UI for Web Components | CTA Banner

    Ejemplos

    Etiqueta

    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>
    html

    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>
    html

    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>
    html

    EXAMPLE
    TS
    HTML
    index.css
    SwitchLabelStyles.css

    Comprobado

    Puede utilizar el atributo checked para activar el interruptor.

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

    EXAMPLE
    TS
    HTML
    CSS

    Requerido

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

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

    Inválido

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

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

    Desactivado

    Puede utilizar el atributo disabled para deshabilitar el interruptor.

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

    EXAMPLE
    TS
    HTML
    CSS

    Formularios

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

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

    Estilo

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

    Referencias de API

    Recursos adicionales