React Interruptor

    O componente Ignite UI for React Switch é um componente de seleção de escolha binária que se comporta de forma semelhante ao componente switch no iOS.

    React Switch Example

    Usage

    At its core, the IgrSwitch component allows for toggling between on/off states. The default styling is done according to the selection controls specification in the Material Design guidelines.

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Você então precisará importar oIgrSwitch CSS necessário e o necessário, assim:

    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 fornecer um rótulo significativo para o switch, basta colocar algum texto entre as tags de abertura e fechamento:

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

    You can specify if the label should be positioned before or after the switch toggle by setting the labelPosition attribute of the switch. Allowed values are before and after(default):

    <IgrSwitch aria-labelledby="switchLabel" labelPosition="before" ><span id="switch-label">Label</span></IgrSwitch>

    O switch também pode ser rotulado por elementos externos ao switch. Neste caso, o usuário tem controle total para posicionar e estilizar o rótulo de acordo com suas necessidades.

    <span id="switch-label">Label</span>
<IgrSwitch aria-labelledby="switchLabel"></IgrSwitch>

    Checked

    You can use the checked attribute to toggle on the switch.

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

    Required

    You can use the required attribute to mark the switch as required.

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

    Invalid

    You can use the invalid attribute to mark the switch as invalid.

    Disabled

    You can use the disabled attribute to disable the switch.

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

    Forms

    You can use the name and value attributes when using the switch with Form.

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

    Styling

    OIgrSwitch componente expõe várias partes CSS para te dar controle total sobre seu estilo:

    Nome Descrição
    base O invólucro base do switch.
    control O elemento de entrada do interruptor.
    thumb O indicador de posição do interruptor.
    label O rótulo do 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