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, elIgrSwitch 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.

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

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

    import { IgrSwitch } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

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

    <IgrSwitch aria-labelledby="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 aria-labelledby="switchLabel"></IgrSwitch>

    Checked

    Puedes usar elchecked atributo para activar el interruptor.

    <IgrSwitch checked={true}></IgrSwitch>

    Required

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

    <IgrSwitch required={true}></IgrSwitch>

    Invalid

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

    Disabled

    Puedes usar eldisabled atributo para desactivar el interruptor.

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

    Forms

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

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

    Styling

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