Visão geral dos componentes de rádio Angular e grupo de rádio

    Radio Button

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

    Angular Radio & Radio Group Example

    Getting Started with Ignite UI for Angular Radio Button

    Para começar a usar o componente Ignite UI for Angular Radio Button, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar oIgxRadioModule arquivo no app.module.ts.

    // app.module.ts

...
import { IgxRadioModule } from 'igniteui-angular';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxRadioModule],
    ...
})
export class AppModule {
    public selected: any;
}

    Alternativamente,16.0.0 você pode importar asIgxRadioGroupDirective dependências eIgxRadioComponent como independentes, ou usar oIGX_RADIO_GROUP_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

    // home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_RADIO_GROUP_DIRECTIVES } from 'igniteui-angular';
// import { IGX_RADIO_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: `
    <igx-radio-group>
      <igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
      <igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
      <igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
      <igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
    </igx-radio-group>
  `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IGX_RADIO_GROUP_DIRECTIVES, FormsModule],
  /* or imports: [IgxRadioComponent, IgxRadioGroupDirective, FormsModule] */
})
export class HomeComponent {
  public selected: any;
}

    Agora que você importou o módulo ou diretivas do botão de rádio Ignite UI for Angular, pode começar a usar a diretiva eigx-radio-group oigx-radio componente.

    Using the Angular Radio Button

    Botões de opção podem ser exibidos usando o seguinte código dentro do modelo do componente:

    <igx-radio [(ngModel)]="selected" value="option1">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2">Option 2</igx-radio>

    Label

    AlabelPosition propriedade pode ser usada para alterar a posição padrão do rótulo no componente de rádio. Os usuários podem escolher entrebefore e.after Se não especificado, a etiqueta será colocada após o botão de rádio.

    <igx-radio [(ngModel)]="selected" value="option1" labelPosition="before">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2" labelPosition="before">Option 2</igx-radio>

    Properties

    Vamos aprimorar o exemplo anterior adicionando quatro botões de rádio, cada um responsável por aplicar uma certa cor como fundo. Vamos vincular a propriedade BackgroundColor de um elemento div à propriedade selectedColor do componente. Você notará que o selectedColor também participa de uma relação de vinculação bidirecional através daNgModel diretiva, portanto seu valor é atualizado cada vez que o usuário seleciona um botão de opção diferente (cor).

    // radiogroup.component.ts
...
public colors = [{
    hex: '#f06a2f',
    name: 'Carrot'
}, {
    hex: '#ff134a',
    name: 'Watermelon'
}, {
    hex: '#7bc96f',
    name: 'Grass'
},
{
    hex: 'transparent',
    name: 'No color'
}];

public selectedColor: string = this.colors[3].hex;

    <!--radiogroup.component.html-->
<igx-radio *ngFor="let color of colors" name="color" [value]="color.hex" [(ngModel)]="selectedColor">
  {{color.name}}
</igx-radio>

<div [style.background-color]="selectedColor">...</div>

    Preste atenção que, se você não usar aNgModel diretiva em uma vinculação de dados bidirecional, deve importar eFormsModule adicioná-la à lista de importações do NgModule.

    O resultado final seria algo assim:

    Estilização

    Radio Theme Property Map

    Quando você modifica uma propriedade primária, todas as propriedades dependentes relacionadas são atualizadas automaticamente para refletir a alteração:

    Propriedade primária Propriedade dependente Descrição
    $empty cor
    		 $hover cor Cores de borda e pontos ao passar o mouse
    $focus-contorno-cor (índigo)Foco na cor do contorno (tema Índigo)
    $fill cor
    		 $fill-color-hover Conferi a cor do ponto ao passar o mouse
    $fill-flutuar-borda-cor (não bootstrap)Conferi a cor da borda ao passar o mouse
    $focus-cor de borda (bootstrap)Cor da borda de foco
    $focus-contorno-cor (bootstrap)Foco na cor delineada
    $focus-contorno-preenchido de cor (índigo)Focar a cor do contorno quando o rádio estiver cheio
    $label-cor $label-color-hover Etiquetar cor do texto ao passar o mouse
    $error cor
    		 $error-color-hover Etiqueta, borda e cor de pontos no estado inválido ao passar o mouse
    $focus-outline-color-errorCor do contorno de foco no estado inválido

    Para começar a estilizar os botões de rádio, precisamos importar oindex arquivo, onde todas as funções de tema e mixagens de componentes estão ativas:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Seguindo a abordagem mais simples, criamos um novo tema que estende oradio-theme. Fornecendo apenas dois parâmetros principais —$empty-colore$fill-color— você pode gerar um botão de rádio totalmente estilizado. Esses valores servem como base para o tema, ao fornecê-los, calculam automaticamente todas as cores de primeiro plano e fundo necessárias para vários estados (por exemplo, pairar o cursor, selecionado, desativado).

    $custom-radio-theme: radio-theme(
    $empty-color:  #345779,
    $fill-color: #2dabe8,
);

    Por fim, inclua o tema personalizado em seu aplicativo:

    @include css-vars($custom-radio-theme);

    Note

    O exemplo usa o esquema Fluent Light.

    Styling with Tailwind

    Você pode usarradio button nossas classes utilitárias personalizadas de Tailwind. Certifique-se de configurar o Tailwind primeiro.

    Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

    • Uselight-* as aulas para o tema da luz.
    • Usedark-* classes para o tema sombrio.
    • Adicione o nome do componente após o prefixo, por exemplo,light-radio,dark-radio.

    Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

    Você pode encontrar a lista completa de propriedades no tema do rádio. A sintaxe é a seguinte:

    <igx-radio
class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]"
...
>
  New York
</igx-radio>
    Note

    O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

    No final, seu botão de acesso deve ficar assim:

    Radio Group

    A diretiva Ignite UI for Angular Radio Group fornece um contêiner de agrupamento que permite melhor controle sobre os componentes de rádio filho e oferece suporte a formulários reativos e baseados em modelos.

    Demo

    Usage

    A Diretiva do Grupo de Rádio é exportada como umNgModule formulário, portanto tudo o que você precisa fazer na sua aplicação é importar oIgxRadioModule arquivo no app.module.ts:

    // app.module.ts
...
import { IgxRadioModule } from 'igniteui-angular';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxRadioModule],
    ...
})

    Para começar, crie umigxRadioGroup e adicione váriosigxRadio componentes.

    Note que, definir umaname propriedade para o grupo de rádio é obrigatório.

    <!--radio-group.component.html-->
<igx-radio-group name="fruitsRadioGroup">
  <igx-radio *ngFor="let fruit of fruits" value="{{fruit}}">
    {{fruit}}
  </igx-radio>
</igx-radio-group>

    // radio-group.component.ts
public fruits = ["Apple", "Mango", "Banana", "Orange"];

    Alignment

    Use aalignment propriedade de entrada para alterar a orientação dosigxRadio componentes no grupo rádio. Os usuários podem escolher entrehorizontal e.vertical Por padrão, o alinhamento do grupo de rádio é horizontal.

    //sample.component.ts
import { RadioGroupAlignment } from "igniteui-angular";
...
public alignment = RadioGroupAlignment.vertical;
...

    <!-- sample.component.html -->
<igx-radio-group [alignment]="alignment">
  <igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
  <igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
  <igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
  <igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
</igx-radio-group>

    API References

    Theming Dependencies

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.