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

    Em sua essência, o componente permite alternar entre os IgrSwitch estados ligado/desligado. O estilo padrão é feito de acordo com a especificação de controles de seleção nas diretrizes do Material Design.

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

    npm install igniteui-react

    Você precisará importar o IgrSwitch CSS necessário e registrar seu módulo, assim:

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

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

    Você pode especificar se o rótulo deve ser posicionado antes ou depois do switch toggle definindo o atributo labelPosition do switch. Os valores permitidos são before e after (padrão):

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

    Checked

    Você pode usar o atributo checked para ativar o interruptor.

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

    Required

    Você pode usar o atributo required para marcar a opção como necessária.

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

    Invalid

    Você pode usar o atributo invalid para marcar a opção como inválida.

    Disabled

    Você pode usar o atributo disabled para desabilitar a opção.

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

    Forms

    Você pode usar os atributos name e value ao usar o switch com Form.

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

    Styling

    O IgrSwitch componente expõe várias partes CSS para dar a você 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