Visão geral do botão Angular
Angular diretiva de botão é usada para criar e adicionar botões acionáveis a uma página/aplicação web. Existem diferentes tipos de botões Angular que são fáceis de personalizar e incluem vários recursos embutidos. Por padrão, Angular Material usa nativo<button> e<a> elementos para oferecer uma experiência acessível.
A diretiva Ignite UI for Angular Button tem como objetivo transformar qualquer botão, span, div ou elemento de âncora em um botão totalmente funcional. Você pode usar os seguintes tipos de Angular Button - Flat Button, Contained Button, Outlined Button e Floating Action Button. Com cores personalizáveis, opções para criar temas e alterar o Angular Button Style e permitir que os usuários escolham o tamanho do botão e muito mais.
Angular Button Example
Criamos o exemplo do botão Angular abaixo para mostrar como diferentes tipos de botões podem aparecer e parecer quando são estilizados com uma borda ou quando um fundo transparente é aplicado.
Getting Started with Ignite UI for Angular Button
Para começar a usar a diretiva Ignite UI for Angular 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 issoIgxButtonModule no seu arquivo app.module.ts.
// app.module.ts
import { IgxButtonModule } from 'igniteui-angular/button';
// import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxButtonModule,
...
]
})
export class AppModule {}
Alternativamente,16.0.0 você pode importar comoIgxButtonDirective uma dependência independente.
// home.component.ts
...
import { IgxButtonDirective } from 'igniteui-angular/button';
// import { IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<button igxButton="flat">Flat</button>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxButtonDirective]
})
export class HomeComponent {}
Agora que você importou o módulo ou diretiva Ignite UI for Angular Button, pode começar a usar aigxButton diretiva nos elementos.
Angular Button Types
Botão plano
Use aigxButton diretiva para adicionar um botão simples e plano no seu template de componente. Note que, se você não escolher um tipo, por padrão ele será definido paraflat.
<button igxButton="flat">Flat</button>
Botão contido
Tudo o que você precisa fazer para criar um botão contido é mudar o valor daigxButton propriedade:
<button igxButton="contained">Contained</button>
Botão delineado
Analogicamente, podemos mudar para o tipo de contorno:
<button igxButton="outlined">Outlined</button>
Botão de ícone
A partir da versão17.1.0, o IgniteUI para Angular expõe uma novaigxIconButton diretriz destinada a transformar ícones em botões totalmente funcionais. Você pode ler mais sobre o Botão de Ícone aqui.
<button igxIconButton="flat">
<igx-icon fontSet="material">favorite</igx-icon>
</button>
Floating Action Button
Podemos criar um botão de ação flutuante e usar um ícone para exibir:
<button igxButton="fab">
<igx-icon fontSet="material">edit</igx-icon>
</button>
Para criar um FAB estendido, você pode adicionar qualquer elemento antes doigx-icon:
<button class="btn" igxButton="fab">
<span>like</span>
<igx-icon fontSet="material">favorite</igx-icon>
</button>
Note
Para que o texto FAB estendido seja estilizado corretamente, use<span> as tags de ouro<div>.
Examples
Angular Disable Button
Adisabled propriedade pode ser usada para tornar um botão desclicável:
<button igxButton="contained" [disabled]="'true'">Disabled</button>
Ondulação
AigxRipple diretiva adiciona um efeito dominó aos seus botões ou outros elementos especificados. Você pode facilmente mudar a cor, posição e duração padrão do ripple, usando suas propriedades:
<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
Ripple
</button>
Span
Também podemos usar aigxButton diretiva para transformar elementos comospan ediv em botões Ignite UI for Angular estilo. As cores padrão podem ser personalizadas via eigxButtonColor asigxButtonBackground propriedades:
<span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
Span
</span>
Tamanho
Podemos permitir que o usuário escolha o tamanho doigxButton usando a--ig-size propriedade CSS personalizada. Para isso, primeiro precisamos importar eIgxButtonGroupModule depois usar oigxButtonGroup componente para exibir os valores de tamanho. Assim, sempre que um for selecionado, atualizaremos a propriedade CSS -ig-size.
// app.module.ts
...
import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxButtonGroupModule
...
]
})
<!--buttons-density.component.html-->
<igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
...
<button igxButton="flat">Flat</button>
// buttons-density.component.ts
public size = "large";
public sizes;
public ngOnInit() {
this.sizes = [
{ label: 'large', selected: this.size === 'large', togglable: true },
{ label: 'medium', selected: this.size === 'medium', togglable: true },
{ label: 'small', selected: this.size === 'small', togglable: true }
];
}
public selectSize(event: any) {
this.size = this.sizes[event.index].label;
}
@HostBinding('style.--ig-size')
protected get sizeStyle() {
return `var(--ig-size-${this.size})`;
}
Se tudo correr bem, você deverá ver algo como o seguinte no navegador:
Estilização
Button Theme Property Map
Quando você modifica uma propriedade primária, todas as propriedades dependentes relacionadas são atualizadas automaticamente:
Material Theme
Botão plano
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground |
$hover-contexto | Cor de fundo para botão movido pelo mouse |
| $focus-contexto | Cor de fundo para o botão de foco | |
| $focus-hover-background | Cor de fundo para botão no foco + ao passar o mouse | |
| $active-contexto | Cor de fundo para o botão ativo | |
| $hover-primeiro plano | Cor em primeiro plano para botão flutuante | |
| $icon-color-pairar | Cor do ícone para o botão movido | |
| $focus-primeiro plano | Cor em primeiro plano para o botão de foco | |
| $focus-pairar-primeiro plano | Cor em primeiro plano para botão no foco + passar o mouse | |
| $active-primeiro plano | Cor do primeiro plano para o botão ativo | |
| $focus-fundo-visível | Fundo quando o foco está visível | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível |
Botão contido
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$background |
$foreground | Primeiro plano baseado no fundo |
| $icon cor | Cor do ícone baseada no fundo | |
| $hover-contexto | Cor de fundo ao passar o mouse | |
| $hover-primeiro plano | Primeiro plano em pairar | |
| $icon-color-pairar | Cor do ícone ao passar o mouse | |
| $focus-contexto | Foco na cor do fundo | |
| $focus-primeiro plano | Primeiro plano no foco | |
| $focus-hover-background | Foco + passar o mouse para fundo | |
| $focus-pairar-primeiro plano | Primeiro plano no foco + pairar | |
| $active-contexto | Cor de fundo ativa | |
| $active-primeiro plano | Cor ativa em primeiro plano | |
| $focus-fundo-visível | Fundo quando o foco está visível | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível |
Botão delineado
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground |
$hover-contexto | Cor de fundo para botão movido pelo mouse |
| $focus-contexto | Cor de fundo para o botão de foco | |
| $focus-hover-background | Cor de fundo para botão no foco + ao passar o mouse | |
| $active-contexto | Cor de fundo para o botão ativo | |
| $hover-primeiro plano | Cor em primeiro plano para botão flutuante | |
| $icon-color-pairar | Cor do ícone para o botão movido | |
| $focus-primeiro plano | Cor em primeiro plano para o botão de foco | |
| $focus-pairar-primeiro plano | Cor em primeiro plano para botão no foco + passar o mouse | |
| $active-primeiro plano | Cor do primeiro plano para o botão ativo | |
| $focus-fundo-visível | Fundo quando o foco está visível | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível | |
| $border cor | A cor da borda para botões contornados. | |
| $hover-cor-borda | A cor da borda para botões contornados flutuando. | |
| $focus-cor da borda | A cor da borda para botões com contorno focado. | |
| $focus-cor-borda-visível | A cor da borda para botões delineados quando o foco está visível. | |
| $active-cor-borda | A cor da borda para botões delineados ativos. |
Botão FAB
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$background |
$foreground | Primeiro plano baseado no fundo |
| $icon cor | Cor do ícone baseada no fundo | |
| $hover-contexto | Cor de fundo ao passar o mouse | |
| $hover-primeiro plano | Primeiro plano em pairar | |
| $icon-color-pairar | Cor do ícone ao passar o mouse | |
| $focus-contexto | Foco na cor do fundo | |
| $focus-primeiro plano | Primeiro plano no foco | |
| $active-contexto | Cor de fundo ativa | |
| $active-primeiro plano | Cor ativa em primeiro plano | |
| $focus-hover-background | Foco + passar o mouse para fundo | |
| $focus-pairar-primeiro plano | Primeiro plano no foco + pairar | |
| $focus-fundo-visível | Fundo quando o foco está visível | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível |
Fluent Theme
Botão plano
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground |
$hover-contexto | Cor de fundo para botão movido pelo mouse |
| $focus-contexto | Cor de fundo para o botão de foco | |
| $focus-hover-background | Cor de fundo para botão no foco + ao passar o mouse | |
| $active-contexto | Cor de fundo para o botão ativo | |
| $hover-primeiro plano | Cor em primeiro plano para botão flutuante | |
| $icon-color-pairar | Cor do ícone para o botão movido | |
| $focus-primeiro plano | Cor em primeiro plano para o botão de foco | |
| $focus-pairar-primeiro plano | Cor em primeiro plano para botão no foco + passar o mouse | |
| $active-primeiro plano | Cor do primeiro plano para o botão ativo | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível | |
| $focus-cor-borda-visível | Cor da borda quando o foco está visível |
Botão contido
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$background | $foreground | Primeiro plano baseado no fundo |
| $icon cor | Cor do ícone baseada no fundo | |
| $hover-contexto | Cor de fundo ao passar o mouse | |
| $focus-contexto | Foco na cor do fundo | |
| $active-contexto | Cor de fundo ativa | |
| $hover-primeiro plano | Primeiro plano em pairar | |
| $icon-color-pairar | Cor do ícone ao passar o mouse | |
| $focus-primeiro plano | Primeiro plano no foco | |
| $active-primeiro plano | Cor ativa em primeiro plano | |
| $focus-hover-background | Foco + passar o mouse para fundo | |
| $focus-pairar-primeiro plano | Primeiro plano no foco + pairar | |
| $focus-fundo-visível | Fundo quando o foco está visível | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível | |
| $focus-cor-borda-visível | Cor da borda quando o foco está visível |
Botão delineado
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground | $hover-contexto | Cor de fundo para o botão contornado com o curso. |
| $focus-contexto | Cor de fundo para o botão de contorno focado. | |
| $focus-hover-background | Cor de fundo para o botão delineado no foco + passar o cursor. | |
| $active-contexto | Cor de fundo para o botão ativo contornado. | |
| $hover-primeiro plano | Cor em primeiro plano para o botão contornado com o cursor. | |
| $icon-color-pairar | Cor do ícone para o botão contornado e passado o curso. | |
| $focus-primeiro plano | Cor em primeiro plano para o botão de contorno focado. | |
| $focus-pairar-primeiro plano | Cor em primeiro plano para o botão delineado no foco + passar o cursor. | |
| $active-primeiro plano | Cor em primeiro plano para o botão ativo delineado. | |
| $focus-visível-primeiro plano | Cor em primeiro plano para o botão delineado quando o foco está visível. | |
| $focus-cor-borda-visível | Cor da borda para o botão delineado quando o foco está visível. | |
| $border cor | Cor da borda para o botão delineado. | |
| $hover-cor-borda | Cor da borda para o botão contornado com o cursor. | |
| $focus-cor da borda | Cor da borda para o botão com contorno focado. | |
| $active-cor-borda | Cor da borda para o botão ativo com contorno. |
Botão FAB
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$background | $foreground | Primeiro plano baseado no fundo |
| $icon cor | Cor do ícone baseada no fundo | |
| $hover-contexto | Cor de fundo ao passar o mouse | |
| $hover-primeiro plano | Primeiro plano em pairar | |
| $icon-color-pairar | Cor do ícone ao passar o mouse | |
| $active-contexto | Cor de fundo ativa | |
| $active-primeiro plano | Cor ativa em primeiro plano | |
| $focus-contexto | Foco na cor do fundo | |
| $focus-primeiro plano | Primeiro plano no foco | |
| $focus-hover-background | Foco + passar o mouse para fundo | |
| $focus-pairar-primeiro plano | Primeiro plano no foco + pairar | |
| $focus-fundo-visível | Fundo quando o foco está visível | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível | |
| $focus-cor-borda-visível | Cor da borda quando o foco está visível |
Bootstrap Theme
Botão plano
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground |
$hover-primeiro plano | Cor em primeiro plano para botão flutuante |
| $icon-color-pairar | Cor do ícone para o botão movido | |
| $focus-primeiro plano | Cor em primeiro plano para o botão de foco | |
| $focus-pairar-primeiro plano | Cor em primeiro plano para botão no foco + passar o mouse | |
| $active-primeiro plano | Cor do primeiro plano para o botão ativo | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível | |
| $focus-cor-borda-visível | Cor da borda quando o foco está visível | |
| $disabled em primeiro plano | Cor em primeiro plano para botão desativado | |
| $disabled-cor-ícone | Cor do ícone para botão desativado | |
| $shadow cor | Cor das sombras |
Botão contido
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$background |
$foreground | Primeiro plano baseado no fundo |
| $icon cor | Cor do ícone baseada no fundo | |
| $hover-contexto | Cor de fundo ao passar o mouse | |
| $focus-contexto | Foco na cor do fundo | |
| $active-contexto | Cor de fundo ativa | |
| $hover-primeiro plano | Primeiro plano em pairar | |
| $icon-color-pairar | Cor do ícone ao passar o mouse | |
| $focus-primeiro plano | Primeiro plano no foco | |
| $focus-hover-background | Foco + passar o mouse para fundo | |
| $focus-pairar-primeiro plano | Primeiro plano no foco + pairar | |
| $focus-fundo-visível | Fundo quando o foco está visível | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível | |
| $active-primeiro plano | Cor ativa em primeiro plano | |
| $shadow cor | Cor das sombras | |
| $disabled-contexto | Cor de fundo desativada | |
| $disabled em primeiro plano | Cor do primeiro plano desativada | |
| $disabled-cor-ícone | Cor do ícone desativada |
Botão delineado
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground |
$hover-contexto | Cor de fundo para botão movido pelo mouse |
| $focus-contexto | Cor de fundo para o botão de foco | |
| $focus-hover-background | Cor de fundo para botão no foco + ao passar o mouse | |
| $active-contexto | Cor de fundo para o botão ativo | |
| $hover-primeiro plano | Cor em primeiro plano para botão flutuante | |
| $icon-color-pairar | Cor do ícone para o botão movido | |
| $focus-primeiro plano | Cor em primeiro plano para o botão de foco | |
| $focus-pairar-primeiro plano | Cor em primeiro plano para botão no foco + passar o mouse | |
| $active-primeiro plano | Cor do primeiro plano para o botão ativo | |
| $focus-fundo-visível | Fundo quando o foco está visível | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível | |
| $focus-cor-borda-visível | Cor da borda quando o foco está visível | |
| $disabled em primeiro plano | Cor em primeiro plano para botão desativado | |
| $disabled-cor-ícone | Cor do ícone para botão desativado | |
| $disabled-cor-borda | Cor da borda para botão desativado | |
| $hover-cor-borda | Cor da borda do estacionário | |
| $focus-cor da borda | Cor da borda de foco | |
| $focus-cor-borda-visível | Cor da borda visível no foco | |
| $active-cor-borda | Cor ativa da borda | |
| $shadow cor | Cor das sombras |
Botão FAB
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$background |
$foreground | Primeiro plano baseado no fundo |
| $icon cor | Cor do ícone baseada no fundo | |
| $hover-contexto | Cor de fundo ao passar o mouse | |
| $focus-contexto | Foco na cor do fundo | |
| $active-contexto | Cor de fundo ativa | |
| $disabled-contexto | Cor de fundo desativada | |
| $hover-primeiro plano | Primeiro plano em pairar | |
| $icon-color-pairar | Cor do ícone ao passar o mouse | |
| $focus-primeiro plano | Primeiro plano no foco | |
| $focus-hover-background | Foco + passar o mouse para fundo | |
| $focus-pairar-primeiro plano | Primeiro plano no foco + pairar | |
| $focus-fundo-visível | Fundo quando o foco está visível | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível | |
| $active-primeiro plano | Cor ativa em primeiro plano | |
| $shadow cor | Cor das sombras | |
| $disabled em primeiro plano | Cor do primeiro plano desativada | |
| $disabled-cor-ícone | Cor do ícone desativada |
Cada um deles vai mirar apenas nos botões desse tipo específico.
Indigo Theme
Botão plano
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground | $hover-contexto | Cor de fundo para botão movido pelo mouse |
| $focus-contexto | Cor de fundo para o botão de foco | |
| $focus-hover-background | Cor de fundo para botão no foco + ao passar o mouse | |
| $active-contexto | Cor de fundo para o botão ativo | |
| $hover-primeiro plano | Cor em primeiro plano para botão flutuante | |
| $icon-color-pairar | Cor do ícone para o botão movido | |
| $focus-primeiro plano | Cor em primeiro plano para o botão de foco | |
| $focus-pairar-primeiro plano | Cor em primeiro plano para botão no foco + passar o mouse | |
| $active-primeiro plano | Cor do primeiro plano para o botão ativo | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível | |
| $disabled em primeiro plano | Cor do primeiro plano desativada | |
| $disabled-cor-ícone | Cor do ícone desativada | |
| $shadow cor | Cor das sombras |
Botão contido
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$background |
$foreground | Primeiro plano baseado no fundo |
| $icon cor | Cor do ícone baseada no fundo | |
| $hover-contexto | Cor de fundo ao passar o mouse | |
| $focus-contexto | Foco na cor do fundo | |
| $active-contexto | Cor de fundo ativa | |
| $hover-primeiro plano | Primeiro plano em pairar | |
| $icon-color-pairar | Cor do ícone ao passar o mouse | |
| $focus-primeiro plano | Primeiro plano no foco | |
| $focus-hover-background | Foco + passar o mouse para fundo | |
| $focus-pairar-primeiro plano | Primeiro plano no foco + pairar | |
| $focus-fundo-visível | Fundo quando o foco está visível | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível | |
| $active-primeiro plano | Cor ativa em primeiro plano | |
| $shadow cor | Cor das sombras | |
| $disabled-contexto | Cor de fundo desativada | |
| $disabled em primeiro plano | Cor do primeiro plano desativada | |
| $disabled-cor-ícone | Cor do ícone desativada |
Botão delineado
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground |
$hover-contexto | Cor de fundo para botão movido pelo mouse |
| $focus-contexto | Cor de fundo para o botão de foco | |
| $focus-hover-background | Cor de fundo para botão no foco + ao passar o mouse | |
| $active-contexto | Cor de fundo para o botão ativo | |
| $hover-primeiro plano | Cor em primeiro plano para botão flutuante | |
| $icon-color-pairar | Cor do ícone para o botão movido | |
| $focus-primeiro plano | Cor em primeiro plano para o botão de foco | |
| $focus-pairar-primeiro plano | Cor em primeiro plano para botão no foco + passar o mouse | |
| $active-primeiro plano | Cor do primeiro plano para o botão ativo | |
| $focus-fundo-visível | Fundo quando o foco está visível | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível | |
| $focus-cor-borda-visível | Cor da borda quando o foco está visível | |
| $border cor | Border color | |
| $hover-cor-borda | Cor da borda do estacionário | |
| $focus-cor da borda | Cor da borda de foco | |
| $focus-cor-borda-visível | Cor da borda visível no foco | |
| $active-cor-borda | Cor ativa da borda | |
| $shadow cor | Cor das sombras |
Botão FAB
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$background |
$foreground | Primeiro plano baseado no fundo |
| $icon cor | Cor do ícone baseada no fundo | |
| $hover-contexto | Cor de fundo ao passar o mouse | |
| $focus-contexto | Foco na cor do fundo | |
| $active-contexto | Cor de fundo ativa | |
| $disabled-contexto | Cor de fundo desativada | |
| $hover-primeiro plano | Primeiro plano em pairar | |
| $icon-color-pairar | Cor do ícone ao passar o mouse | |
| $focus-primeiro plano | Primeiro plano no foco | |
| $focus-hover-background | Foco + passar o mouse para fundo | |
| $focus-pairar-primeiro plano | Primeiro plano no foco + pairar | |
| $focus-fundo-visível | Fundo quando o foco está visível | |
| $focus-visível-primeiro plano | Primeiro plano quando o foco é visível | |
| $active-primeiro plano | Cor ativa em primeiro plano | |
| $shadow cor | Cor das sombras | |
| $disabled em primeiro plano | Cor do primeiro plano desativada | |
| $disabled-cor-ícone | Cor do ícone desativada |
Nota: As propriedades dependentes resultantes podem variar ligeiramente dependendo do tema selecionado (Material, Fluente, Bootstrap, Índigo).
Para estilizar o botão, você pode usar nossas funções de tema específicas por tipo:flat-button-theme,outlined-button-theme,contained-button-theme, efab-button-theme.
Cada um deles vai mirar apenas nos botões desse tipo específico.
Para começar a estilizar o botão, primeiro importe o módulo de temas, que inclui todas as funções de tema e mixagens de componentes:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Em seguida, crie um novo tema que estenda a função de tema específico para o tipo de botão que você está estilizando. Neste exemplo, usaremos acontained-button-theme função e passaremos valores para os$foreground$background parâmetros e , junto com seus respectivos parâmetros de hover e ativos.
Dada a seguinte marcação:
<div class="my-contained-btn">
<button igxButton="contained">Contained button</button>
</div>
Você pode criar o seguinte tema:
$custom-contained-theme: contained-button-theme(
$background: #f9f0ff,
$foreground: #722ed1,
$hover-background: #efdbff,
$hover-foreground: #9254de,
$active-foreground: #531dab,
$active-background: #dfc2fa,
);
Dê uma olhada nacontained-button-theme seção para uma lista completa dos parâmetros disponíveis para estilizar os botões do tipo contido.
Por fim, inclua o tema personalizado em seu aplicativo:
.my-contained-btn {
@include css-vars($custom-contained-theme);
}
Com as funções de tema específicas por tipo, estilizar botões fica muito mais fácil.
Paracontained-button-theme as funções e,fab-button-theme você só precisa fornecer um valor de cor ao$background parâmetro. Todos os outros estados dos botões e cores do texto (se não forem fornecidos) serão automaticamente gerados e aplicados com base nesse valor.
A cor do texto é determinada pela função recém-adicionadaadaptive-contrast, que calcula se preto ou branco oferece melhor contraste com a cor de fundo fornecida.
Paraflat-button-theme funções e,outlined-button-theme as cores do estado dos botões também são geradas e aplicadas automaticamente, mas são derivadas do parâmetro fornecido$foreground em vez de$background.
No exemplo abaixo, você pode ver como usar o componente de botão com variáveis CSS personalizadas permite criar um design que visualmente se assemelha ao botão usado noAnt sistema de design.
Note
O exemplo usa o esquema Bootstrap Light.
Styling with Tailwind
Você pode usarbutton 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.
- Use
light-*as aulas para o tema da luz. - Use
dark-*classes para o tema sombrio. - Anexe o nome do componente após o prefixo. Como o botão tem tipos, as classes são usadas assim, por exemplo,
light-contained-button,,light-flat-buttondark-outlined-buttondark-fab-button,, etc.
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 dos botões que refletem de forma diferente nas diferentes variantes, a principal propriedade dosflat botões eoutlined é$foreground e doscontained botões efab é$background. A sintaxe é a seguinte:
<div class="buttons-sample">
<div class="button-sample">
<button
igxButton="flat"
class="!light-flat-button ![--foreground:#7B9E89]">
Flat Button
</button>
</div>
<div class="button-sample">
<button
igxButton="contained"
class="!light-contained-button ![--background:#7B9E89]">
Contained Button
</button>
</div>
<div class="button-sample">
<button
igxButton="outlined"
class="!light-outlined-button ![--foreground:#7B9E89]">
Outlined Button
</button>
</div>
<div class="button-sample">
<button
igxButton="fab"
class="!light-fab-button ![--background:#7B9E89]">
Fab Button
</button>
</div>
</div>
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 devem ficar assim:
Custom sizing
Você pode mudar a altura do botão usando a--size variável, mirando diretamente nobutton seguinte:
button {
--size: 50px;
}
Ou você pode usar a variável universal--igx-button-size para direcionar todas as instâncias:
<div class="my-app">
<button igxButton="raised"></button>
</div>
.my-app {
--igx-button-size: 50px;
}
Você também pode usar um dos tamanhos predefinidos, atribuindo-o à--ig-size variável. Os valores disponíveis para--ig-size são--ig-size-small,--ig-size-medium, e--ig-size-large:
button {
--ig-size: var(--ig-size-large);
}
Saiba mais sobre isso no artigo Tamanho.
API References
- Diretiva IgxButton
- Estilos de IgxButton
- Diretiva IgxRipple
- Diretiva IgxIconButton
- Componente do grupo IgxButton
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub