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

    No seu cerne, oIgbSwitch 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.

    Antes de usá-losIgbSwitch, você precisa registrá-los 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 aoIgbSwitch componente. O seguinte deve 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 a etiqueta deve ser posicionada antes ou depois do interruptor definindo oLabelPosition atributo do interruptor. Os valores permitidos sãobefore eafter (padrão):

    <IgbSwitch LabelPosition="@ToggleLabelPosition.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 ochecked atributo ao toggle no interruptor.

    <IgbSwitch Checked="true" />

    Required

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

    <IgbSwitch Required="true" />

    Invalid

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

    <IgbSwitch Invalid="true" />

    Disabled

    Você pode usar odisabled atributo para desativar o interruptor.

    <IgbSwitch Disabled="true" />

    Forms

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

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

    Styling

    OIgbSwitch 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