React interruptor

    El componente Switch Ignite UI for React es un componente de selección de opciones binarias que se comporta de manera similar al componente Switch en iOS.

    Ejemplo de cambio React

    EXAMPLE
    TSX
    CSS

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

    En esencia, el componente IgrSwitch 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, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react
    cmd

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

    import { IgrSwitchModule, IgrSwitch } from 'igniteui-react';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    IgrSwitchModule.register();
    tsx
    <IgrSwitch></IgrSwitch>
    tsx

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

    Ignite UI for React | CTA Banner

    Ejemplos

    Etiqueta

    Para proporcionar una etiqueta significativa para el cambio, simplemente coloque algo de texto entre las etiquetas de apertura y cierre:

    <IgrSwitch><span>Label</span></IgrSwitch>
    tsx

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

    <IgrSwitch ariaLabelledby="switchLabel" labelPosition="Before" ><span id="switch-label">Label</span></IgrSwitch>
    tsx

    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>
    <IgrSwitch ariaLabelledby="switchLabel"></IgrSwitch>
    tsx

    EXAMPLE
    TSX
    CSS

    Comprobado

    Puede utilizar el atributo checked para activar el interruptor.

    <IgrSwitch checked="true"></IgrSwitch>
    tsx

    EXAMPLE
    TSX
    CSS

    Requerido

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

    <IgrSwitch required="true"></IgrSwitch>
    tsx

    Inválido

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

    Desactivado

    Puede utilizar el atributo disabled para deshabilitar el interruptor.

    <IgrSwitch disabled="true"></IgrSwitch>
    tsx

    EXAMPLE
    TSX
    CSS

    Formularios

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

    <IgrSwitch name="wifi" value="enabled"></IgrSwitch>
    tsx

    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