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.

    React Switch Example

    Usage

    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

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

    <IgrSwitch></IgrSwitch>

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

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

    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>

    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>

    Checked

    Puede utilizar el atributo checked para activar el interruptor.

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

    Required

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

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

    Invalid

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

    Disabled

    Puede utilizar el atributo disabled para deshabilitar el interruptor.

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

    Forms

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

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

    Styling

    The IgrSwitch component exposes several CSS parts to give you full control over its styling:

    Nombre Descripción
    base The base wrapper of the switch.
    control The switch input element.
    thumb The position indicator of the switch.
    label The switch label. 
    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