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

    No seu cerne, oIgrSwitch O componente permite alternar entre estados ligado e desligado. O estilo padrão é feito de acordo com a especificação de controles de seleção nas diretrizes de Design de Material.

    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>

    Você pode especificar se a etiqueta deve ser posicionada antes ou depois do interruptor definindo olabelPosition atributo do interruptor. Os valores permitidos sãobefore eafter (padrão):

    <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

    Você pode usar ochecked atributo ao toggle no interruptor.

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

    Required

    Você pode usar orequired atribua marcar o interruptor conforme necessário.

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

    Invalid

    Você pode usar oinvalid atributo para marcar a mudança como inválida.

    Disabled

    Você pode usar odisabled atributo para desativar o interruptor.

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

    Forms

    Você pode usar oname evalue Atributos ao usar o switch comForm.

    <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