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

    No seu cerne, oIgcSwitchComponent 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 Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    Você então precisará importar oIgcSwitchComponent CSS necessário e o necessário, 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 Comecando.

    A maneira mais simples de começar a usar oIgcSwitchComponent é 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 a etiqueta deve ser posicionada antes ou depois do interruptor definindo olabelPosition atributo do interruptor. Os valores permitidos sãobefore eafter (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 ochecked atributo ao toggle no interruptor.

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

    Required

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

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

    Invalid

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

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

    Disabled

    Você pode usar odisabled atributo para desativar o interruptor.

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

    Forms

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

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

    Styling

    OIgcSwitchComponent 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 {
    --thumb-on-color: white;
    --thumb-off-color: var(--ig-success-500);
    --track-on-color: var(--ig-success-500); /* Background color when checked */
    --track-off-color: white; /* Background color when unchecked */
    --track-on-hover-color: var(--ig-success-500); /* Background hover color when checked */
  }

    API References

    Additional Resources