Interruptor Blazor

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

    Blazor Switch Example

    Usage

    Em seu núcleo, o componente IgbSwitch 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.

    Antes de usar o IgbSwitch, você precisa registrá-lo da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbSwitch. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbSwitch />

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

    <IgbSwitch>Label</IgbSwitch>

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

    <IgbSwitch LabelPosition="@CheckboxBaseLabelPosition.Before">Label</IgbSwitch>

    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>
<IgbSwitch AriaLabelledBy="switch-label" />

    Checked

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

    <IgbSwitch Checked="true" />

    Required

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

    <IgbSwitch Required="true" />

    Invalid

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

    <IgbSwitch Invalid="true" />

    Disabled

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

    <IgbSwitch Disabled="true" />

    Forms

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

    <IgbSwitch Name="wifi" Value="enabled" />

    Styling

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

    Nome Descrição
    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