Descripción general del botón de icono Angular
La directiva Ignite UI for Angular Botón de Iconos está pensada para convertir cualquier icono en un botón completamente funcional. VieneigxIconButton en tres tipos: plano, contornizado y contenido, que es el predeterminado.
Angular Icon Button Example
Getting Started with Ignite UI for Angular Icon Button
Para comenzar con la directiva Ignite UI for Angular Icon Button, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar laIgxIconButtonDirective dependencia independiente:
// 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 {}
Ahora que tienes importada la directiva Ignite UI for Angular Icon Button, puedes empezar a usar laigxIconButton directiva sobre los elementos.
Angular Icon Button Types
Flat Icon Button
Usa laigxIconButton directiva para añadir un botón sencillo de icono plano en tu plantilla de componentes:
<button igxIconButton="flat">
<igx-icon>edit</igx-icon>
</button>
Botón de icono contenido
Todo lo que tienes que hacer para crear un icono contenido es cambiar el valor de laigxIconButton propiedad. Ten en cuenta que si no eliges un tipo, por defecto también estará configurado comocontained.
<button igxIconButton>
<igx-icon>favorite</igx-icon>
</button>
Botón de icono delineado
Analógicamente podemos pasar al tipo delineado:
<button igxIconButton="outlined">
<igx-icon>more_vert</igx-icon>
</button>
Examples
Disabled Icon Button
Si quieres desactivar un botón de icono, puedes usar ladisabled propiedad. En este ejemplo también demostramos cómo usar iconos de diferentes familias con laigxIconButton directiva:
<button igxIconButton="flat" disabled>
<igx-icon family="fa" name="fa-home"></igx-icon>
</button>
SVG Icons
Además de los iconos de material, laigxIconButton directiva también permite el uso de imágenes SVG como iconos. Para ello, primero deberíamos inyectar laIgxIconService dependencia y luego usar eladdSvgIcon método para importar el archivo SVG en la caché. Para más información, puedes leer la sección SVG en el tema de iconos.
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>
Tamaño
Los usuarios pueden elegir uno de los tres tamaños predefinidosigxIconButton utilizando la--ig-size propiedad CSS personalizada. Por defecto, el tamaño del componente se establece en media.
Como puedes ver en el ejemplo anterior, también podemos usar laigxIconButton directiva para convertir elementos comospan ydiv en botones de icono con estilo Ignite UI for Angular.
Icon Button Styling
Icon Button Theme Property Map
Cuando modificas una propiedad primaria, todas las propiedades dependientes relacionadas se actualizan automáticamente:
Flat Icon Button
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground | $hover primer plano | Color de icono flotado |
| $focus primer plano | Color de iconos enfocado | |
| $focus-plano flotante | Enfoque + color de icono de paso | |
| $active primer plano | Color de icono activo | |
| $hover antecedentes | Antecedentes sobre el hover | |
| $focus-antecedentes | Antecedentes sobre el enfoque | |
| $focus-hover-fondo | Contexto sobre enfoque + flotación | |
| $active-antecedentes | Antecedentes sobre activos |
Botón de icono contenido
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$background | $foreground | Color de iconos |
| $hover antecedentes | Antecedentes sobre el hover | |
| $focus-antecedentes | Antecedentes sobre el enfoque | |
| $focus primer plano | Color de iconos enfocado | |
| $focus-hover-fondo | Contexto sobre enfoque + flotación | |
| $active-antecedentes | Antecedentes sobre activos | |
| $hover primer plano | Color de icono flotado | |
| $focus-plano flotante | Enfoque + color de icono de paso | |
| $active primer plano | Color de icono activo | |
| $shadow color | Sombra en el enfoque | |
| $focus-color de borde | Color del borde del foco | |
| $disabled antecedentes | Antecedentes con discapacidad | |
| $disabled primer plano | Color de icono desactivado |
Botón de icono delineado
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground | $hover primer plano | Color de icono flotado |
| $focus primer plano | Color de iconos enfocado | |
| $focus-plano flotante | Enfoque + color de icono de paso | |
| $active primer plano | Color de icono activo | |
| $hover antecedentes | Antecedentes sobre el hover | |
| $focus-antecedentes | Antecedentes sobre el enfoque | |
| $focus-hover-fondo | Contexto sobre enfoque + flotación | |
| $active-antecedentes | Antecedentes sobre activos | |
| $border color | Color predeterminado del borde | |
| $focus-color de borde | Color del borde del foco |
Flat Icon Button
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground | $hover primer plano | Color de iconos al pasar el cursor |
| $focus primer plano | Color de iconos cuando se enfoca | |
| $focus-plano flotante | Color de iconos cuando se enfoca y flota | |
| $active primer plano | Color de iconos cuando está activo | |
| $hover antecedentes | Color de fondo en el vuelo | |
| $focus-antecedentes | Color de fondo en el enfoque | |
| $focus-hover-fondo | Color de fondo al enfocar y flotar | |
| $active-antecedentes | Color de fondo cuando está activo |
Botón de icono contenido
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$background | $foreground | Color de iconos |
| $hover antecedentes | Color de fondo en el vuelo | |
| $focus-antecedentes | Color de fondo en el enfoque | |
| $focus primer plano | Color de iconos cuando se enfoca | |
| $focus-hover-fondo | Color de fondo al enfocar y flotar | |
| $active-antecedentes | Color de fondo cuando está activo | |
| $hover primer plano | Color de iconos al pasar el cursor | |
| $focus-plano flotante | Color de iconos cuando se enfoca y flota | |
| $active primer plano | Color de iconos cuando está activo | |
| $shadow color | Color de sombra enfocado | |
| $focus-color de borde | Color del borde en el enfoque | |
| $disabled antecedentes | Color de fondo cuando está desactivado | |
| $disabled primer plano | Color de iconos cuando está desactivado |
Botón de icono delineado
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground | $hover primer plano | Color de iconos al pasar el cursor |
| $focus primer plano | Color de iconos cuando se enfoca | |
| $focus-plano flotante | Color de iconos cuando se enfoca y flota | |
| $active primer plano | Color de iconos cuando está activo | |
| $hover antecedentes | Color de fondo en el vuelo | |
| $focus-antecedentes | Color de fondo en el enfoque | |
| $focus-hover-fondo | Color de fondo al enfocar y flotar | |
| $active-antecedentes | Color de fondo cuando está activo | |
| $border color | Border color | |
| $focus-color de borde | Color del borde en el enfoque |
Flat Icon Button
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground | $hover primer plano | Color de iconos al pasar el cursor |
| $focus primer plano | Color de iconos cuando se enfoca | |
| $focus-plano flotante | Color de iconos cuando se enfoca y flota | |
| $active primer plano | Color de iconos cuando está activo | |
| $disabled primer plano | Color de iconos cuando está desactivado | |
| $shadow color | El color de sombra del botón de iconos |
Botón de icono contenido
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$background | $foreground | Color de iconos |
| $hover antecedentes | Color de fondo en el vuelo | |
| $focus-antecedentes | Color de fondo en el enfoque | |
| $focus primer plano | Color de iconos cuando se enfoca | |
| $focus-hover-fondo | Color de fondo al enfocar y flotar | |
| $active-antecedentes | Color de fondo cuando está activo | |
| $hover primer plano | Color de iconos al pasar el cursor | |
| $focus-plano flotante | Color de iconos cuando se enfoca y flota | |
| $active primer plano | Color de iconos cuando está activo | |
| $shadow color | Color de sombra | |
| $focus-color de borde | Color del borde en el enfoque | |
| $disabled antecedentes | Color de fondo cuando está desactivado | |
| $disabled primer plano | Color de iconos cuando está desactivado |
Botón de icono delineado
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground | $hover primer plano | Color de iconos al pasar el cursor |
| $focus primer plano | Color de iconos cuando se enfoca | |
| $focus-plano flotante | Color de iconos cuando se enfoca y flota | |
| $active primer plano | Color de iconos cuando está activo | |
| $hover antecedentes | Color de fondo en el vuelo | |
| $focus-antecedentes | Color de fondo en el enfoque | |
| $focus-hover-fondo | Color de fondo al enfocar y flotar | |
| $active-antecedentes | Color de fondo cuando está activo | |
| $border color | Border color | |
| $focus-color de borde | Color del borde en el enfoque | |
| $shadow color | Color de sombra | |
| $disabled primer plano | Color de iconos cuando está desactivado | |
| $disabled-color del borde | El borde del botón de icono cuando está desactivado |
Flat Icon Button
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground | $hover primer plano | Color de iconos al pasar el cursor |
| $focus primer plano | Color de iconos cuando se enfoca | |
| $focus-plano flotante | Color de iconos cuando se enfoca y flota | |
| $active primer plano | Color de iconos cuando está activo | |
| $disabled primer plano | Color de iconos cuando está desactivado | |
| $hover antecedentes | Color de fondo en el vuelo | |
| $focus-antecedentes | Color de fondo en el enfoque | |
| $focus-hover-fondo | Color de fondo al enfocar y flotar | |
| $active-antecedentes | Color de fondo cuando está activo | |
| $focus-color de borde | Color del borde en el enfoque |
Botón de icono contenido
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$background | $foreground | Color de iconos |
| $hover antecedentes | Color de fondo en el vuelo | |
| $focus-antecedentes | Color de fondo en el enfoque | |
| $focus primer plano | Color de iconos cuando se enfoca | |
| $focus-hover-fondo | Color de fondo al enfocar y flotar | |
| $active-antecedentes | Color de fondo cuando está activo | |
| $hover primer plano | Color de iconos al pasar el cursor | |
| $focus-plano flotante | Color de iconos cuando se enfoca y flota | |
| $active primer plano | Color de iconos cuando está activo | |
| $shadow color | Color de sombra | |
| $focus-color de borde | Color del borde en el enfoque | |
| $disabled antecedentes | Color de fondo cuando está desactivado | |
| $disabled primer plano | Color de iconos cuando está desactivado |
Botón de icono delineado
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground | $hover primer plano | Color de iconos al pasar el cursor |
| $focus primer plano | Color de iconos cuando se enfoca | |
| $focus-plano flotante | Color de iconos cuando se enfoca y flota | |
| $active primer plano | Color de iconos cuando está activo | |
| $hover antecedentes | Color de fondo en el vuelo | |
| $border color | Border color | |
| $focus-color de borde | Color del borde en el enfoque |
Siguiendo el enfoque más simple, usamos variables CSS para personalizar la apariencia del botón del icono:
[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;
}
Echa un vistazo a laicon-button-theme sección para ver la lista completa de parámetros disponibles para estilizar cualquier tipo de botón de icono.
También puedes elegir estilizar solo botones de un tipo específico -flat,outlined ocontained. Para ello, puedes usar las nuevas funciones de tema específicas por tipo:flat-icon-button-theme,outlined-icon-button-theme ycontained-icon-button-theme
Aquí tienes un ejemplo de cómo usar lacontained-icon-button-theme función para definir un tema personalizado en SCSS:
@use "igniteui-angular/theming" as *;
$custom-contained: contained-icon-button-theme(
$background: #ECAA53,
);
Esto generará un diseño completamente temático,contained icon button incluyendo colores de primer plano y fondo apropiados para sus distintos estados como flotar, enfocar y activo.
Styling with Tailwind
Puedes estilizar el botón icono usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.
Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
El archivo de utilidad incluye variantes tantolight comodark de tema.
- Usa
light-*clases para el tema ligero. - Usa
dark-*clases para el tema oscuro. - Añadir el nombre del componente después del prefijo, por ejemplo, ,
light-icon-button,dark-icon-button.
Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).
Puedes encontrar la lista completa de propiedades en el tema icono-botón. La sintaxis es la siguiente:
<button igxIconButton class="!light-icon-button ![--icon-color:#FF4E00]">
<igx-icon>edit</igx-icon>
</button>
Note
El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.
Al final, tus botones iconos deberían verse así:
API References
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub