Descripción general del botón Angular
Angular directiva Button se utiliza para crear y agregar botones accionables a una página web o aplicación. Hay diferentes tipos de botones Angular que son fáciles de personalizar e incluyen varias funciones integradas. De forma predeterminada, Angular Material utiliza elementos y <a> nativos <button> para ofrecer una experiencia accesible.
La directiva Ignite UI for Angular Button está pensada para convertir cualquier elemento button, span, div o anchor en un botón completamente funcional. Puede utilizar los siguientes tipos de botón Angular: botón plano, botón contenido, botón delineado y botón de acción flotante. Con colores personalizables, opciones para crear temas y cambiar el estilo de botón de Angular y permitir a los usuarios elegir el tamaño del botón y más.
Angular Button Example
Hemos creado el ejemplo de botón Angular a continuación para mostrarle cómo pueden aparecer y verse los diferentes tipos de botones cuando se les aplica un estilo con un borde o cuando se les aplica un fondo transparente.
Getting Started with Ignite UI for Angular Button
Para comenzar con la directiva Ignite UI for Angular 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 IgxButtonModule en su archivo app.module.ts.
// app.module.ts
import { IgxButtonModule } from 'igniteui-angular';
// import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxButtonModule,
...
]
})
export class AppModule {}
Alternativamente, a partir de 16.0.0 puede importar IgxButtonDirective como una dependencia independiente.
// home.component.ts
...
import { IgxButtonDirective } from 'igniteui-angular';
// 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 {}
Ahora que tiene importado el módulo o la directiva Ignite UI for Angular Button, puede comenzar a usar la igxButton directiva en los elementos.
Angular Button Types
Botón plano
Utilice la directiva igxButton para agregar un botón plano simple en su plantilla de componente. Tenga en cuenta que si no elige un tipo, de forma predeterminada se establecerá en flat.
<button igxButton="flat">Flat</button>
Botón contenido
Todo lo que tienes que hacer para crear un botón contenido es cambiar el valor de la igxButton propiedad:
<button igxButton="contained">Contained</button>
Botón delineado
Analógicamente podemos pasar al tipo delineado:
<button igxButton="outlined">Outlined</button>
Botón de icono
A partir de la versión 17.1.0 IgniteUI para Angular incluye una nueva directiva igxIconButton destinada a convertir los íconos en botones completamente funcionales. Puede leer más sobre el botón de ícono aquí.
<button igxIconButton="flat">
<igx-icon fontSet="material">favorite</igx-icon>
</button>
Floating Action Button
Podemos crear un botón de acción flotante y usar un ícono para mostrar:
<button igxButton="fab">
<igx-icon fontSet="material">edit</igx-icon>
</button>
Para crear un FAB extendido, puede agregar cualquier elemento antes del igx-icon:
<button class="btn" igxButton="fab">
<span>like</span>
<igx-icon fontSet="material">favorite</igx-icon>
</button>
Note
Para que el texto FAB extendido tenga el estilo adecuado, utilice etiquetas <span> o <div>.
Examples
Angular Disable Button
La propiedad disabled se puede utilizar para hacer que no se pueda hacer clic en un botón:
<button igxButton="contained" [disabled]="'true'">Disabled</button>
Onda
La directiva igxRipple agrega un efecto dominó a sus botones u otros elementos especificados. Puede cambiar fácilmente el color, la posición y la duración de la onda predeterminada, utilizando sus propiedades:
<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
Ripple
</button>
Span
También podemos usar la igxButton directiva para convertir elementos como span y div en botones con estilo Ignite UI for Angular. Los colores predeterminados se pueden personalizar a través de las igxButtonColor igxButtonBackground propiedades y las siguientes:
<span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
Span
</span>
Tamaño
Podemos permitir que el usuario elija el tamaño del igxButton utilizando la propiedad CSS personalizada--ig-size. Para hacer esto, primero tenemos que importar IgxButtonGroupModule y luego usar el componente igxButtonGroup para mostrar los valores de tamaño. De esta manera, cada vez que se seleccione uno, actualizaremos la propiedad CSS--ig-size.
// app.module.ts
...
import { IgxButtonGroupModule } from 'igniteui-angular';
// 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})`;
}
Si todo ha ido bien deberías ver algo como lo siguiente en el navegador:
Estilismo
Button Theme Property Map
Cuando modificas una propiedad primaria, todas las propiedades dependientes relacionadas se actualizan automáticamente:
Material Theme
Botón plano
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground |
$hover antecedentes | Color de fondo para el botón de paso del cursor |
| $focus-antecedentes | Color de fondo para el botón de enfoque | |
| $focus-hover-fondo | Color de fondo para el botón al enfocar + pasar el cursor | |
| $active-antecedentes | Color de fondo para el botón activo | |
| $hover primer plano | Color de primer plano para botón flotante | |
| $icon-color-flotador | Color de icono para el botón que se mantiene flotado | |
| $focus primer plano | Color en primer plano para el botón de enfoque | |
| $focus-plano flotante | Color de primer plano para botón al enfocar + pasar el cursor | |
| $active primer plano | Color de primer plano para el botón activo | |
| $focus-fondo visible | Fondo cuando el enfoque es visible | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible |
Botón contenido
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$background |
$foreground | Primer plano basado en el fondo |
| $icon color | Color de iconos basado en el fondo | |
| $hover antecedentes | Color de fondo al pasar el cursor | |
| $hover primer plano | Primer plano en vuelo estacionario | |
| $icon-color-flotador | Color de iconos al pasar el cursor | |
| $focus-antecedentes | Color de fondo de enfoque | |
| $focus primer plano | Primer plano en el enfoque | |
| $focus-hover-fondo | Enfoque + pasar el cursor sobre fondo | |
| $focus-plano flotante | Primer plano en enfoque + flotación | |
| $active-antecedentes | Color de fondo activo | |
| $active primer plano | Color activo en primer plano | |
| $focus-fondo visible | Fondo cuando el enfoque es visible | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible |
Botón delineado
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground |
$hover antecedentes | Color de fondo para el botón de paso del cursor |
| $focus-antecedentes | Color de fondo para el botón de enfoque | |
| $focus-hover-fondo | Color de fondo para el botón al enfocar + pasar el cursor | |
| $active-antecedentes | Color de fondo para el botón activo | |
| $hover primer plano | Color de primer plano para botón flotante | |
| $icon-color-flotador | Color de icono para el botón que se mantiene flotado | |
| $focus primer plano | Color en primer plano para el botón de enfoque | |
| $focus-plano flotante | Color de primer plano para botón al enfocar + pasar el cursor | |
| $active primer plano | Color de primer plano para el botón activo | |
| $focus-fondo visible | Fondo cuando el enfoque es visible | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible | |
| $border color | El color del borde para los botones delineados. | |
| $hover-color de borde | El color del borde para botones delineados flotantes. | |
| $focus-color de borde | El color del borde para botones delineados enfocados. | |
| $focus-color-borde-visible | El color del borde para los botones delineados cuando el enfoque es visible. | |
| $active-color de borde | El color del borde para botones delineados activos. |
Botón FAB
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$background |
$foreground | Primer plano basado en el fondo |
| $icon color | Color de iconos basado en el fondo | |
| $hover antecedentes | Color de fondo al pasar el cursor | |
| $hover primer plano | Primer plano en vuelo estacionario | |
| $icon-color-flotador | Color de iconos al pasar el cursor | |
| $focus-antecedentes | Color de fondo de enfoque | |
| $focus primer plano | Primer plano en el enfoque | |
| $active-antecedentes | Color de fondo activo | |
| $active primer plano | Color activo en primer plano | |
| $focus-hover-fondo | Enfoque + pasar el cursor sobre fondo | |
| $focus-plano flotante | Primer plano en enfoque + flotación | |
| $focus-fondo visible | Fondo cuando el enfoque es visible | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible |
Fluent Theme
Botón plano
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground |
$hover antecedentes | Color de fondo para el botón de paso del cursor |
| $focus-antecedentes | Color de fondo para el botón de enfoque | |
| $focus-hover-fondo | Color de fondo para el botón al enfocar + pasar el cursor | |
| $active-antecedentes | Color de fondo para el botón activo | |
| $hover primer plano | Color de primer plano para botón flotante | |
| $icon-color-flotador | Color de icono para el botón que se mantiene flotado | |
| $focus primer plano | Color en primer plano para el botón de enfoque | |
| $focus-plano flotante | Color de primer plano para botón al enfocar + pasar el cursor | |
| $active primer plano | Color de primer plano para el botón activo | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible | |
| $focus-color-borde-visible | Color del borde cuando el enfoque es visible |
Botón contenido
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$background | $foreground | Primer plano basado en el fondo |
| $icon color | Color de iconos basado en el fondo | |
| $hover antecedentes | Color de fondo al pasar el cursor | |
| $focus-antecedentes | Color de fondo de enfoque | |
| $active-antecedentes | Color de fondo activo | |
| $hover primer plano | Primer plano en vuelo estacionario | |
| $icon-color-flotador | Color de iconos al pasar el cursor | |
| $focus primer plano | Primer plano en el enfoque | |
| $active primer plano | Color activo en primer plano | |
| $focus-hover-fondo | Enfoque + pasar el cursor sobre fondo | |
| $focus-plano flotante | Primer plano en enfoque + flotación | |
| $focus-fondo visible | Fondo cuando el enfoque es visible | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible | |
| $focus-color-borde-visible | Color del borde cuando el enfoque es visible |
Botón delineado
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground | $hover antecedentes | Color de fondo para el botón de contorno con el rasor. |
| $focus-antecedentes | Color de fondo para el botón de contorno enfocado. | |
| $focus-hover-fondo | Color de fondo para el botón de contorno al enfocar + pasar el cursor. | |
| $active-antecedentes | Color de fondo para el botón de contorno activo. | |
| $hover primer plano | Color de primer plano para el botón delineado flotante. | |
| $icon-color-flotador | Color de iconos para el botón delineado y desplazado. | |
| $focus primer plano | Color de primer plano para el botón de contorno enfocado. | |
| $focus-plano flotante | Color de primer plano para el botón de contorno al enfocar + pasar el cursor. | |
| $active primer plano | Color de primer plano para el botón de contorno activo. | |
| $focus-visible-primer plano | Color de primer plano para el botón delineado cuando el enfoque es visible. | |
| $focus-color-borde-visible | Color de borde para el botón de contorno cuando el enfoque es visible. | |
| $border color | Color del borde para el botón delineado. | |
| $hover-color de borde | Color de borde para el botón delineado flotante. | |
| $focus-color de borde | Color del borde para el botón de contorno enfocado. | |
| $active-color de borde | Color del borde para el botón activo de contorno. |
Botón FAB
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$background | $foreground | Primer plano basado en el fondo |
| $icon color | Color de iconos basado en el fondo | |
| $hover antecedentes | Color de fondo al pasar el cursor | |
| $hover primer plano | Primer plano en vuelo estacionario | |
| $icon-color-flotador | Color de iconos al pasar el cursor | |
| $active-antecedentes | Color de fondo activo | |
| $active primer plano | Color activo en primer plano | |
| $focus-antecedentes | Color de fondo de enfoque | |
| $focus primer plano | Primer plano en el enfoque | |
| $focus-hover-fondo | Enfoque + pasar el cursor sobre fondo | |
| $focus-plano flotante | Primer plano en enfoque + flotación | |
| $focus-fondo visible | Fondo cuando el enfoque es visible | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible | |
| $focus-color-borde-visible | Color del borde cuando el enfoque es visible |
Bootstrap Theme
Botón plano
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground |
$hover primer plano | Color de primer plano para botón flotante |
| $icon-color-flotador | Color de icono para el botón que se mantiene flotado | |
| $focus primer plano | Color en primer plano para el botón de enfoque | |
| $focus-plano flotante | Color de primer plano para botón al enfocar + pasar el cursor | |
| $active primer plano | Color de primer plano para el botón activo | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible | |
| $focus-color-borde-visible | Color del borde cuando el enfoque es visible | |
| $disabled primer plano | Color de primer plano para el botón desactivado | |
| $disabled-icono-color | Color de icona para el botón desactivado | |
| $shadow color | Color de sombra |
Botón contenido
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$background |
$foreground | Primer plano basado en el fondo |
| $icon color | Color de iconos basado en el fondo | |
| $hover antecedentes | Color de fondo al pasar el cursor | |
| $focus-antecedentes | Color de fondo de enfoque | |
| $active-antecedentes | Color de fondo activo | |
| $hover primer plano | Primer plano en vuelo estacionario | |
| $icon-color-flotador | Color de iconos al pasar el cursor | |
| $focus primer plano | Primer plano en el enfoque | |
| $focus-hover-fondo | Enfoque + pasar el cursor sobre fondo | |
| $focus-plano flotante | Primer plano en enfoque + flotación | |
| $focus-fondo visible | Fondo cuando el enfoque es visible | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible | |
| $active primer plano | Color activo en primer plano | |
| $shadow color | Color de sombra | |
| $disabled antecedentes | Color de fondo desactivado | |
| $disabled primer plano | Color del primer plano desactivado | |
| $disabled-icono-color | Color de icono desactivado |
Botón delineado
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground |
$hover antecedentes | Color de fondo para el botón de paso del cursor |
| $focus-antecedentes | Color de fondo para el botón de enfoque | |
| $focus-hover-fondo | Color de fondo para el botón al enfocar + pasar el cursor | |
| $active-antecedentes | Color de fondo para el botón activo | |
| $hover primer plano | Color de primer plano para botón flotante | |
| $icon-color-flotador | Color de icono para el botón que se mantiene flotado | |
| $focus primer plano | Color en primer plano para el botón de enfoque | |
| $focus-plano flotante | Color de primer plano para botón al enfocar + pasar el cursor | |
| $active primer plano | Color de primer plano para el botón activo | |
| $focus-fondo visible | Fondo cuando el enfoque es visible | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible | |
| $focus-color-borde-visible | Color del borde cuando el enfoque es visible | |
| $disabled primer plano | Color de primer plano para el botón desactivado | |
| $disabled-icono-color | Color de icona para el botón desactivado | |
| $disabled-color del borde | Color del borde para el botón desactivado | |
| $hover-color de borde | Color del borde flotante | |
| $focus-color de borde | Color del borde del foco | |
| $focus-color-borde-visible | Color del borde visible en el enfoque | |
| $active-color de borde | Color activo del borde | |
| $shadow color | Color de sombra |
Botón FAB
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$background |
$foreground | Primer plano basado en el fondo |
| $icon color | Color de iconos basado en el fondo | |
| $hover antecedentes | Color de fondo al pasar el cursor | |
| $focus-antecedentes | Color de fondo de enfoque | |
| $active-antecedentes | Color de fondo activo | |
| $disabled antecedentes | Color de fondo desactivado | |
| $hover primer plano | Primer plano en vuelo estacionario | |
| $icon-color-flotador | Color de iconos al pasar el cursor | |
| $focus primer plano | Primer plano en el enfoque | |
| $focus-hover-fondo | Enfoque + pasar el cursor sobre fondo | |
| $focus-plano flotante | Primer plano en enfoque + flotación | |
| $focus-fondo visible | Fondo cuando el enfoque es visible | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible | |
| $active primer plano | Color activo en primer plano | |
| $shadow color | Color de sombra | |
| $disabled primer plano | Color del primer plano desactivado | |
| $disabled-icono-color | Color de icono desactivado |
Cada uno solo apuntará a los botones de ese tipo específico.
Indigo Theme
Botón plano
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground | $hover antecedentes | Color de fondo para el botón de paso del cursor |
| $focus-antecedentes | Color de fondo para el botón de enfoque | |
| $focus-hover-fondo | Color de fondo para el botón al enfocar + pasar el cursor | |
| $active-antecedentes | Color de fondo para el botón activo | |
| $hover primer plano | Color de primer plano para botón flotante | |
| $icon-color-flotador | Color de icono para el botón que se mantiene flotado | |
| $focus primer plano | Color en primer plano para el botón de enfoque | |
| $focus-plano flotante | Color de primer plano para botón al enfocar + pasar el cursor | |
| $active primer plano | Color de primer plano para el botón activo | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible | |
| $disabled primer plano | Color del primer plano desactivado | |
| $disabled-icono-color | Color de icono desactivado | |
| $shadow color | Color de sombra |
Botón contenido
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$background |
$foreground | Primer plano basado en el fondo |
| $icon color | Color de iconos basado en el fondo | |
| $hover antecedentes | Color de fondo al pasar el cursor | |
| $focus-antecedentes | Color de fondo de enfoque | |
| $active-antecedentes | Color de fondo activo | |
| $hover primer plano | Primer plano en vuelo estacionario | |
| $icon-color-flotador | Color de iconos al pasar el cursor | |
| $focus primer plano | Primer plano en el enfoque | |
| $focus-hover-fondo | Enfoque + pasar el cursor sobre fondo | |
| $focus-plano flotante | Primer plano en enfoque + flotación | |
| $focus-fondo visible | Fondo cuando el enfoque es visible | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible | |
| $active primer plano | Color activo en primer plano | |
| $shadow color | Color de sombra | |
| $disabled antecedentes | Color de fondo desactivado | |
| $disabled primer plano | Color del primer plano desactivado | |
| $disabled-icono-color | Color de icono desactivado |
Botón delineado
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$foreground |
$hover antecedentes | Color de fondo para el botón de paso del cursor |
| $focus-antecedentes | Color de fondo para el botón de enfoque | |
| $focus-hover-fondo | Color de fondo para el botón al enfocar + pasar el cursor | |
| $active-antecedentes | Color de fondo para el botón activo | |
| $hover primer plano | Color de primer plano para botón flotante | |
| $icon-color-flotador | Color de icono para el botón que se mantiene flotado | |
| $focus primer plano | Color en primer plano para el botón de enfoque | |
| $focus-plano flotante | Color de primer plano para botón al enfocar + pasar el cursor | |
| $active primer plano | Color de primer plano para el botón activo | |
| $focus-fondo visible | Fondo cuando el enfoque es visible | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible | |
| $focus-color-borde-visible | Color del borde cuando el enfoque es visible | |
| $border color | Border color | |
| $hover-color de borde | Color del borde flotante | |
| $focus-color de borde | Color del borde del foco | |
| $focus-color-borde-visible | Color del borde visible en el enfoque | |
| $active-color de borde | Color activo del borde | |
| $shadow color | Color de sombra |
Botón FAB
| Propiedad principal | Propiedad dependiente | Descripción |
|---|---|---|
$background |
$foreground | Primer plano basado en el fondo |
| $icon color | Color de iconos basado en el fondo | |
| $hover antecedentes | Color de fondo al pasar el cursor | |
| $focus-antecedentes | Color de fondo de enfoque | |
| $active-antecedentes | Color de fondo activo | |
| $disabled antecedentes | Color de fondo desactivado | |
| $hover primer plano | Primer plano en vuelo estacionario | |
| $icon-color-flotador | Color de iconos al pasar el cursor | |
| $focus primer plano | Primer plano en el enfoque | |
| $focus-hover-fondo | Enfoque + pasar el cursor sobre fondo | |
| $focus-plano flotante | Primer plano en enfoque + flotación | |
| $focus-fondo visible | Fondo cuando el enfoque es visible | |
| $focus-visible-primer plano | Primer plano cuando el enfoque es visible | |
| $active primer plano | Color activo en primer plano | |
| $shadow color | Color de sombra | |
| $disabled primer plano | Color del primer plano desactivado | |
| $disabled-icono-color | Color de icono desactivado |
Nota: Las propiedades dependientes resultantes pueden variar ligeramente según el tema seleccionado (Material, Fluido, Bootstrap, Índigo).
Para estilizar el botón puedes usar nuestras funciones específicas de tema por tipo: flat-button-theme, outlined-button-theme, contained-button-theme, y fab-button-theme.
Cada uno solo apuntará a los botones de ese tipo específico.
Para empezar a estilizar el botón, primero importa el módulo de temas, que incluye todas las funciones de tema y las mezclas 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';
A continuación, crea un nuevo tema que amplíe la función de tema específico para el tipo de botón que estás estilizando. En este ejemplo, usaremos la contained-button-theme función y pasaremos valores a los $foreground parámetros y $background de , junto con sus respectivos parámetros de hover y activos.
Dado el siguiente marcado:
<div class="my-contained-btn">
<button igxButton="contained">Contained button</button>
</div>
Puedes crear el siguiente tema:
$custom-contained-theme: contained-button-theme(
$background: #f9f0ff,
$foreground: #722ed1,
$hover-background: #efdbff,
$hover-foreground: #9254de,
$active-foreground: #531dab,
$active-background: #dfc2fa,
);
Consulta la contained-button-theme sección para ver la lista completa de parámetros disponibles para estilizar los botones de tipo contenido.
Finalmente, incluya el tema personalizado en su aplicación:
.my-contained-btn {
@include css-vars($custom-contained-theme);
}
Con las funciones de tema específico por tipo, estilizar los botones es mucho más fácil.
Para contained-button-theme las funciones y (y fab-button-theme), solo necesitas proporcionar un valor de color al $background parámetro. Todos los demás estados de los botones y colores de texto (si no se proporcionan) se generarán y aplicarán automáticamente en función de ese valor.
El color del texto se determina mediante la función recién añadida adaptive-contrast, que calcula si el blanco o el negro proporcionan mejor contraste con el color de fondo proporcionado.
Para flat-button-theme las funciones y outlined-button-theme, los colores de estado del botón también se generan y aplican automáticamente, pero se derivan del parámetro proporcionado $foreground en lugar de $background.
En el ejemplo siguiente, puede ver cómo el uso del componente de botón con variables CSS personalizadas le permite crear un diseño que se parece visualmente al botón utilizado en el sistema de Ant diseño.
Note
En el ejemplo se usa el esquema de Bootstrap Light.
Styling with Tailwind
Puedes decorarlos button 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 de light ambos temas dark.
- Usa
light-*clases para el tema de la luz. - Usa
dark-*clases para el tema oscuro. - Añade el nombre del componente después del prefijo. Como el botón tiene tipos, las clases se usan así, por ejemplo,
light-contained-button,light-flat-buttondark-outlined-button,dark-fab-button,, etc.
Una vez aplicadas, estas clases permiten cálculos de temas dinámicos. A partir de ahí, puede anular las variables CSS generadas usando arbitrary properties. Después de los dos puntos, proporcione cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).
Puedes encontrar la lista completa de propiedades en el tema de botones, que reflejan diferentes variantes; la propiedad principal de los flat botones y outlined es $foreground y de contained los botones y fab es $background. La sintaxis es la siguiente:
<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
El signo de exclamación (!) es necesario para garantizar 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, los botones deberían verse así:
Custom sizing
Puede cambiar la altura del botón mediante la--size variable, dirigiéndose directamente a button:
button {
--size: 50px;
}
O bien, puede utilizar la variable universal--igx-button-size para dirigirse a todas las instancias:
<div class="my-app">
<button igxButton="raised"></button>
</div>
.my-app {
--igx-button-size: 50px;
}
También puede utilizar uno de los tamaños predefinidos, asignándolo a la--ig-size variable. Los valores disponibles para--ig-size son--ig-size-small,,--ig-size-medium y--ig-size-large:
button {
--ig-size: var(--ig-size-large);
}
Obtén más información al respecto en el artículo Talla.
API References
- DirectivaBotónIgx
- Estilos de botones Igx
- Directiva IgxRipple
- IgxIconButtonDirectiva
- Componente de grupo de botones Igx
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub