Troca Web Components

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

    Web Components Switch Example

    Usage

    Em seu núcleo, o componente IgcSwitchComponent permite alternar entre estados on/off. 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 Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

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

    import { defineComponents, IgcSwitchComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSwitchComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

    A maneira mais simples de começar a usar o IgcSwitchComponent é a seguinte:

    <igc-switch></igc-switch>

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

    <igc-switch>Label</igc-switch>

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

    <igc-switch label-position="before">Label</igc-switch>

    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>
<igc-switch aria-labelledby="switch-label"></igc-switch>

    Checked

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

    <igc-switch checked></igc-switch>

    Required

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

    <igc-switch required></igc-switch>

    Invalid

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

    <igc-switch invalid></igc-switch>

    Disabled

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

    <igc-switch disabled></igc-switch>

    Forms

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

    <igc-switch name="wifi" value="enabled"></igc-switch>

    Styling

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

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