Descripción general del botón Angular
Angular Button directive is used for creating and adding actionable buttons to a web page/application. There are different Angular Button types that are easy to customize and include several built-in features. By default, Angular Material uses native <button> and <a> elements to deliver an accessible experience.
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 {}
Now that you have the Ignite UI for Angular Button module or directive imported, you can start using the igxButton directive on elements.
Angular Button Types
Botón plano
Use the igxButton directive to add a simple flat button in your component template. Note that if you do not choose a type, by default it will be set to flat.
<button igxButton="flat">Flat</button>
Botón contenido
All you have to do to create a contained button is to change the value of the igxButton property:
<button igxButton="contained">Contained</button>
Botón delineado
Analógicamente podemos pasar al tipo delineado:
<button igxButton="outlined">Outlined</button>
Botón de icono
As of version 17.1.0 the IgniteUI for Angular exposes a new igxIconButton directive intended to turn icons into fully functional buttons. You can read more about the Icon Button here.
<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>
To create an extended FAB, you can add any element prior to the igx-icon:
<button class="btn" igxButton="fab">
<span>like</span>
<igx-icon fontSet="material">favorite</igx-icon>
</button>
Note
To get the extended FAB text styled properly, use <span> or <div> tags.
Examples
Angular Disable Button
The disabled property can be used to make a button unclickable:
<button igxButton="contained" [disabled]="'true'">Disabled</button>
Onda
The igxRipple directive adds a ripple effect to your buttons or other specified elements. You can easily change the default ripple color, position and duration, using its properties:
<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
Ripple
</button>
Span
We can also use the igxButton directive to turn elements like span and div into Ignite UI for Angular styled buttons. The default colors can be customized via the igxButtonColor and the igxButtonBackground properties:
<span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
Span
</span>
Tamaño
We can allow the user to choose the size of the igxButton by using the --ig-size custom CSS property. To do this, first we have to import the IgxButtonGroupModule, and then use the igxButtonGroup component to display size values. This way whenever one gets selected, we will update the --ig-size CSS property.
// 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).
To style the button you can use our type-specific theme functions: flat-button-theme, outlined-button-theme, contained-button-theme, and 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';
Next, create a new theme that extends the type-specific theme function for the type of button you are styling. In this example, we will use the contained-button-theme function and pass values to the $foreground and the $background parameters, along with their respective hover and active parameters.
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,
);
Take a look at the contained-button-theme section for a complete list of available parameters for styling the contained-type buttons.
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.
For contained-button-theme and fab-button-theme functions, you only need to provide a color value to the $background parameter. All other button state and text colors (if they are not provided) will then be automatically generated and applied based on that value.
The text color is determined by the newly added adaptive-contrast function, which calculates whether black or white provides better contrast against the supplied background color.
For flat-button-theme and outlined-button-theme functions, the button state colors are also automatically generated and applied, but they are derived from the supplied $foreground parameter instead of $background.
In the sample below, you can see how using the button component with customized CSS variables allows you to create a design that visually resembles the button used in the Ant design system.
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. - Append the component name after the prefix. Because the button has types, the classes are used like so, e.g.,
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.).
You can find the full list of properties in the button-theme which reflect differently in the different variants, the primary property for the flat and outlined buttons is $foreground and for the contained and fab buttons is $background. The syntax is as follows:
<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
You can change the button height either by using the --size variable, targeting the button directly:
button {
--size: 50px;
}
Or you can use the universal --igx-button-size variable to target all instances:
<div class="my-app">
<button igxButton="raised"></button>
</div>
.my-app {
--igx-button-size: 50px;
}
You can also use one of the predefined sizes, assigning it to the --ig-size variable. The available values for --ig-size are --ig-size-small, --ig-size-medium, and --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