Rádio Blazor e Grupo de Rádio

    O componente Ignite UI for Blazor Radio permite que o usuário selecione uma única opção de um conjunto de opções disponíveis listadas lado a lado.

    Ignite UI for Blazor Radio Example

    Usage

    Antes de usar oIgbRadio e o e,IgbRadioGroup você precisa registrá-los da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(
  typeof(IgbRadioModule),
  typeof(IgbRadioGroupModule)
);

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo aosIgbRadio componentes eIgbRadioGroup. 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" />

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio>Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    [!WARNING] The IgbRadio component doesn't work with the standard <form> element. Use Form instead.

    Examples

    Label

    Para fornecer uma etiqueta significativa para issoIgbRadio, basta colocar um texto entre as tags de abertura e fechamento:

    <IgbRadio>Apple</IgbRadio>

    Você pode especificar se o rótulo deve ser posicionado antes ou depois doIgbRadio botão definindo olabel-position atributo. Valores permitidos sãobefore eafter (padrão):

    <IgbRadio LabelPosition="@RadioLabelPosition.Before">Apple</IgbRadio>

    OIgbRadio também pode ser rotulado por elementos externos a ele. Nesse caso, o usuário recebe controle total para posicionar e estilizar o rótulo de acordo com suas necessidades.

    <span id="radio-label">Label</span>
<IgbRadio AriaLabelledBy="radio-label" />

    Checked

    Você pode usar ochecked atributo para ativar o rádio.

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio Checked="true">Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Invalid

    Você pode usar oinvalid atributo para marcar o rádio como inválido.

    <IgbRadio Invalid="true" />

    Disabled

    Você pode usar odisabled atributo para desativar o rádio.

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio Disabled="true">Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Group Alignment

    EleIgbRadioGroup permite mudar facilmente a direcionalidade de posicionamento dos botões de rádio que contém usando oalignment atributo. Valores permitidos sãovertical (padrão) ehorizontal.

    <IgbRadioGroup Alignment="@ContentOrientation.Horizontal">
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio>Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Forms

    Você pode usar osname atributos evalue ao usar o rádio comForm.

    <IgbRadioGroup>
    <IgbRadio Name="fruit" Value="apple">Apple</IgbRadio>
    <IgbRadio Name="fruit" Value="banana">Banana</IgbRadio>
    <IgbRadio Name="fruit" Value="mango">Mango</IgbRadio>
    <IgbRadio Name="fruit" Value="orange">Orange</IgbRadio>
</IgbRadioGroup>

    Styling

    OIgbRadio componente expõe várias partes CSS (base,control, andlabel) para te dar controle total sobre seu estilo.

    igc-radio::part(control) {
  --size: 18px;
}

igc-radio-group {
  padding: 12px;
}

igc-radio::part(checked)::after {
  background-color: var(--ig-success-500);
}

igc-radio::part(label) {
  color: var(--ig-secondary-800);
}

    API References

    Additional Resources