Visão geral do botão do ícone Angular

A diretriz Ignite UI for Angular Botão de Ícone tem como objetivo transformar qualquer ícone em um botão totalmente funcional. EleigxIconButton vem em três tipos - plano, contornado e contido, que é o padrão.

Angular Icon Button Example

Getting Started with Ignite UI for Angular Icon Button

Para começar a usar a diretiva Ignite UI for Angular Icon 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 oIgxIconButtonDirective como uma dependência independente:

// home.component.ts

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

@Component({
    selector: 'app-home',
    template: `
        <button igxIconButton="outlined">
            <igx-icon>home</igx-icon>
        </button>`,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxIconButtonDirective]
})
export class HomeComponent {}

Agora que você importou a diretiva Ignite UI for Angular Icon Button, pode começar a usar aigxIconButton diretiva nos elementos.

Angular Icon Button Types

Flat Icon Button

Use aigxIconButton diretiva para adicionar um botão simples de ícone plano no seu modelo de componente:

<button igxIconButton="flat">
    <igx-icon>edit</igx-icon>
</button>

Botão de Ícone Contido

Tudo o que você precisa fazer para criar um ícone contido é alterar o valor daigxIconButton propriedade. Note que, se você não escolher um tipo, por padrão ele também será definido paracontained.

<button igxIconButton>
    <igx-icon>favorite</igx-icon>
</button>

Botão de Ícone Contornado

Analogicamente, podemos mudar para o tipo de contorno:

<button igxIconButton="outlined">
    <igx-icon>more_vert</igx-icon>
</button>

Examples

Disabled Icon Button

Se quiser desativar um botão de ícone, pode usar adisabled propriedade. Neste exemplo, também demonstramos como usar ícones de diferentes famílias com aigxIconButton diretiva:

<button igxIconButton="flat" disabled>
    <igx-icon family="fa" name="fa-home"></igx-icon>
</button>

SVG Icons

Além dos ícones de material, aigxIconButton diretiva também suporta o uso de imagens SVG como ícones. Para isso, primeiro devemos injetar aIgxIconService dependência e depois usar oaddSvgIcon método para importar o arquivo SVG no cache. Para mais informações, você pode ler a seção SVG no tópico de ícones.

constructor(private _iconService: IgxIconService) { }

public ngOnInit() {
    // register custom SVG icon
    this._iconService.addSvgIcon('rain', 'assets/images/card/icons/rain.svg', 'weather-icons');
}

<button igxIconButton>
    <igx-icon family="weather-icons" name="rain"></igx-icon>
</button>

Tamanho

Os usuários podem escolher um dos três tamanhos predefinidosigxIconButton usando a--ig-size propriedade CSS personalizada. Por padrão, o tamanho do componente é definido como médio.

Como você pode ver no exemplo acima, também podemos usar aigxIconButton diretiva para transformar elementos comospan ediv em botões de ícones com Ignite UI for Angular estilo.

Icon Button Styling

Icon Button Theme Property Map

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

Material Fluente Bootstrap Anil

Flat Icon Button

Propriedade primária	Propriedade dependente	Descrição
$foreground	$hover-primeiro plano	Cor do ícone flutuante
	$focus-primeiro plano	Cor de ícones focados
	$focus-pairar-primeiro plano	Foco + cor do ícone de passagem do mouse
	$active-primeiro plano	Cor ativa do ícone
	$hover-contexto	Contexto sobre o hover
	$focus-contexto	Contexto sobre o foco
	$focus-hover-background	Contexto sobre foco + hover
	$active-contexto	Contexto sobre ativos

Botão de Ícone Contido

Propriedade primária	Propriedade dependente	Descrição
$background	$foreground	Cor do ícone
	$hover-contexto	Contexto sobre o hover
	$focus-contexto	Contexto sobre o foco
	$focus-primeiro plano	Cor de ícones focados
	$focus-hover-background	Contexto sobre foco + hover
	$active-contexto	Contexto sobre ativos
	$hover-primeiro plano	Cor do ícone flutuante
	$focus-pairar-primeiro plano	Foco + cor do ícone de passagem do mouse
	$active-primeiro plano	Cor ativa do ícone
	$shadow cor	Sombra no foco
	$focus-cor da borda	Cor da borda de foco
	$disabled-contexto	Antecedentes com deficiência
	$disabled em primeiro plano	Cor do ícone desativada

Botão de Ícone Contornado

Propriedade primária	Propriedade dependente	Descrição
$foreground	$hover-primeiro plano	Cor do ícone flutuante
	$focus-primeiro plano	Cor de ícones focados
	$focus-pairar-primeiro plano	Foco + cor do ícone de passagem do mouse
	$active-primeiro plano	Cor ativa do ícone
	$hover-contexto	Contexto sobre o hover
	$focus-contexto	Contexto sobre o foco
	$focus-hover-background	Contexto sobre foco + hover
	$active-contexto	Contexto sobre ativos
	$border cor	Cor padrão da borda
	$focus-cor da borda	Cor da borda de foco

Flat Icon Button

Propriedade primária	Propriedade dependente	Descrição
$foreground	$hover-primeiro plano	Cor do ícone ao passar o mouse
	$focus-primeiro plano	Cor dos ícones quando focado
	$focus-pairar-primeiro plano	Cor dos ícones quando focado e flutuando
	$active-primeiro plano	Cor dos ícones quando ativa
	$hover-contexto	Cor de fundo no hover
	$focus-contexto	Cor de fundo no foco
	$focus-hover-background	Cor de fundo no foco e no passar o mouse
	$active-contexto	Cor de fundo quando ativa

Botão de Ícone Contido

Propriedade primária	Propriedade dependente	Descrição
$background	$foreground	Cor do ícone
	$hover-contexto	Cor de fundo no hover
	$focus-contexto	Cor de fundo no foco
	$focus-primeiro plano	Cor dos ícones quando focado
	$focus-hover-background	Cor de fundo no foco e no passar o mouse
	$active-contexto	Cor de fundo quando ativa
	$hover-primeiro plano	Cor do ícone ao passar o mouse
	$focus-pairar-primeiro plano	Cor dos ícones quando focado e flutuando
	$active-primeiro plano	Cor dos ícones quando ativa
	$shadow cor	Cor da sombra no foco
	$focus-cor da borda	Cor da borda no foco
	$disabled-contexto	Cor de fundo quando desativado
	$disabled em primeiro plano	Cor dos ícones quando desativado

Botão de Ícone Contornado

Propriedade primária	Propriedade dependente	Descrição
$foreground	$hover-primeiro plano	Cor do ícone ao passar o mouse
	$focus-primeiro plano	Cor dos ícones quando focado
	$focus-pairar-primeiro plano	Cor dos ícones quando focado e flutuando
	$active-primeiro plano	Cor dos ícones quando ativa
	$hover-contexto	Cor de fundo no hover
	$focus-contexto	Cor de fundo no foco
	$focus-hover-background	Cor de fundo no foco e no passar o mouse
	$active-contexto	Cor de fundo quando ativa
	$border cor	Border color
	$focus-cor da borda	Cor da borda no foco

Flat Icon Button

Propriedade primária	Propriedade dependente	Descrição
$foreground	$hover-primeiro plano	Cor do ícone ao passar o mouse
	$focus-primeiro plano	Cor dos ícones quando focado
	$focus-pairar-primeiro plano	Cor dos ícones quando focado e flutuando
	$active-primeiro plano	Cor dos ícones quando ativa
	$disabled em primeiro plano	Cor dos ícones quando desativado
	$shadow cor	A cor da sombra do botão de ícone

Botão de Ícone Contido

Propriedade primária	Propriedade dependente	Descrição
$background	$foreground	Cor do ícone
	$hover-contexto	Cor de fundo no hover
	$focus-contexto	Cor de fundo no foco
	$focus-primeiro plano	Cor dos ícones quando focado
	$focus-hover-background	Cor de fundo no foco e no passar o mouse
	$active-contexto	Cor de fundo quando ativa
	$hover-primeiro plano	Cor do ícone ao passar o mouse
	$focus-pairar-primeiro plano	Cor dos ícones quando focado e flutuando
	$active-primeiro plano	Cor dos ícones quando ativa
	$shadow cor	Cor das sombras
	$focus-cor da borda	Cor da borda no foco
	$disabled-contexto	Cor de fundo quando desativado
	$disabled em primeiro plano	Cor dos ícones quando desativado

Botão de Ícone Contornado

Propriedade primária	Propriedade dependente	Descrição
$foreground	$hover-primeiro plano	Cor do ícone ao passar o mouse
	$focus-primeiro plano	Cor dos ícones quando focado
	$focus-pairar-primeiro plano	Cor dos ícones quando focado e flutuando
	$active-primeiro plano	Cor dos ícones quando ativa
	$hover-contexto	Cor de fundo no hover
	$focus-contexto	Cor de fundo no foco
	$focus-hover-background	Cor de fundo no foco e no passar o mouse
	$active-contexto	Cor de fundo quando ativa
	$border cor	Border color
	$focus-cor da borda	Cor da borda no foco
	$shadow cor	Cor das sombras
	$disabled em primeiro plano	Cor dos ícones quando desativado
	$disabled-cor-borda	A borda do botão de ícone quando desativada

Flat Icon Button

Propriedade primária	Propriedade dependente	Descrição
$foreground	$hover-primeiro plano	Cor do ícone ao passar o mouse
	$focus-primeiro plano	Cor dos ícones quando focado
	$focus-pairar-primeiro plano	Cor dos ícones quando focado e flutuando
	$active-primeiro plano	Cor dos ícones quando ativa
	$disabled em primeiro plano	Cor dos ícones quando desativado
	$hover-contexto	Cor de fundo no hover
	$focus-contexto	Cor de fundo no foco
	$focus-hover-background	Cor de fundo no foco e no passar o mouse
	$active-contexto	Cor de fundo quando ativa
	$focus-cor da borda	Cor da borda no foco

Botão de Ícone Contido

Propriedade primária	Propriedade dependente	Descrição
$background	$foreground	Cor do ícone
	$hover-contexto	Cor de fundo no hover
	$focus-contexto	Cor de fundo no foco
	$focus-primeiro plano	Cor dos ícones quando focado
	$focus-hover-background	Cor de fundo no foco e no passar o mouse
	$active-contexto	Cor de fundo quando ativa
	$hover-primeiro plano	Cor do ícone ao passar o mouse
	$focus-pairar-primeiro plano	Cor dos ícones quando focado e flutuando
	$active-primeiro plano	Cor dos ícones quando ativa
	$shadow cor	Cor das sombras
	$focus-cor da borda	Cor da borda no foco
	$disabled-contexto	Cor de fundo quando desativado
	$disabled em primeiro plano	Cor dos ícones quando desativado

Botão de Ícone Contornado

Propriedade primária	Propriedade dependente	Descrição
$foreground	$hover-primeiro plano	Cor do ícone ao passar o mouse
	$focus-primeiro plano	Cor dos ícones quando focado
	$focus-pairar-primeiro plano	Cor dos ícones quando focado e flutuando
	$active-primeiro plano	Cor dos ícones quando ativa
	$hover-contexto	Cor de fundo no hover
	$border cor	Border color
	$focus-cor da borda	Cor da borda no foco

Seguindo a abordagem mais simples, usamos variáveis CSS para personalizar a aparência do botão de ícone:

[igxIconButton="contained"] {
  --background: #011627;
  --foreground: #fefefe;
  --hover-foreground: #011627dc;
  --hover-background: #ecaa53;
  --focus-foreground: #011627dc;
  --focus-background: #ecaa53;
  --focus-border-color: #0116276c;
  --active-foreground: #011627dc;
  --active-background: #ecaa53;
}

Dê uma olhada naicon-button-theme seção para uma lista completa dos parâmetros disponíveis para estilizar qualquer tipo de botão de ícone.

Você também pode escolher estilizar apenas botões de um tipo específico -flat,outlined oucontained. Para isso, você pode usar as novas funções de tema específicas para tipo:flat-icon-button-theme,outlined-icon-button-theme econtained-icon-button-theme

Aqui está um exemplo de como usar acontained-icon-button-theme função para definir um tema personalizado no SCSS:

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

$custom-contained: contained-icon-button-theme(
    $background: #ECAA53,
);

Isso gerará um tema totalmente definidocontained icon button, incluindo cores de primeiro plano e fundo apropriadas para seus vários estados, como flutuação, foco e ativo.

Styling with Tailwind

Você pode estilizar o botão de ícone usando nossas classes utilitárias personalizadas do 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-icon-button,dark-icon-button.

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 botão com ícones. A sintaxe é a seguinte:

<button igxIconButton class="!light-icon-button ![--icon-color:#FF4E00]">
  <igx-icon>edit</igx-icon>
</button>

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, seus botões de ícone devem ficar assim:

API References

• Diretiva IgxIconButton
• IgxIconButton Styles
• Diretiva IgxRipple

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub