Descripción general del botón Angular
Angular directiva de botones se utiliza para crear y añadir botones accionables a una página web/aplicación. Existen diferentes tipos de botones Angular que son fáciles de personalizar e incluyen varias funciones integradas. Por defecto, Angular Material utiliza nativos<button> y<a> elementos 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 importarlosIgxButtonModule en tu archivo 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 puedes importarlosIgxButtonDirective como una dependencia independiente.
// 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 {}
Ahora que tienes importado el módulo o directiva Ignite UI for Angular Button, puedes empezar a usar laigxButton directiva sobre los elementos.
Angular Button Types
Botón plano
Usa laigxButton directiva para añadir un botón plano sencillo en tu plantilla de componentes. Ten en cuenta que si no eliges un tipo, por defecto se configurará comoflat.
<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 laigxButton 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ón17.1.0, la IgniteUI para Angular expone una nuevaigxIconButton directiva destinada a convertir los iconos en botones completamente funcionales. Puedes leer más sobre el Botón de Iconos 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, puedes añadir cualquier elemento anterior a:igx-icon
<button class="btn" igxButton="fab">
<span>like</span>
<igx-icon fontSet="material">favorite</igx-icon>
</button>
Note
Para que el texto extendido del FAB esté bien estilizado, usa<span> etiquetas de or<div>.
Examples
Angular Disable Button
Ladisabled propiedad puede usarse para hacer que un botón no sea clicable:
<button igxButton="contained" [disabled]="'true'">Disabled</button>
Onda
LaigxRipple directiva añade un efecto dominó a tus botones u otros elementos especificados. Puedes cambiar fácilmente el color, la posición y la duración predeterminados de la ondulación, usando sus propiedades:
<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
Ripple
</button>
Span
También podemos usar laigxButton directiva para convertir elementos comospan ydiv en botones Ignite UI for Angular estilo. Los colores predeterminados pueden personalizarse mediante lasigxButtonColor propiedades yigxButtonBackground las siguientes:
<span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
Span
</span>
Tamaño
Podemos permitir que el usuario elija el tamaño deligxButton usando la--ig-size propiedad CSS personalizada. Para ello, primero tenemos que importar elIgxButtonGroupModule componente y luego usar eligxButtonGroup componente para mostrar los valores de tamaño. Así, cada vez que se selecciona uno, actualizamos la propiedad 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})`;
}
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, yfab-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 lacontained-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 lacontained-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.
Paracontained-button-theme las funciones y (yfab-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ñadidaadaptive-contrast, que calcula si el blanco o el negro proporcionan mejor contraste con el color de fondo proporcionado.
Paraflat-button-theme las funciones youtlined-button-theme, los colores del 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, puedes ver cómo usar el componente de botón con variables CSS personalizadas te permite crear un diseño que visualmente se asemeja al botón usado en elAnt sistema de diseño.
Note
En el ejemplo se usa el esquema de Bootstrap Light.
Styling with Tailwind
Puedes decorarlosbutton 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ñ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 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 de botones, que reflejan diferentes variantes; la propiedad principal de losflat botones youtlined es$foreground y decontained los botones yfab 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 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, los botones deberían verse así:
Custom sizing
Puedes cambiar la altura del botón usando la--size variable, apuntando directamente a:button
button {
--size: 50px;
}
O puedes usar la variable universal--igx-button-size para dirigirte a todas las instancias:
<div class="my-app">
<button igxButton="raised"></button>
</div>
.my-app {
--igx-button-size: 50px;
}
También puedes usar 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