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.
Ejemplo de botón Angular
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.
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Primeros pasos con Ignite UI for Angular botón
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
cmd
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 {}
typescript
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 {}
typescript
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 Tipos de botones
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>
html
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>
html
Botón delineado
Analógicamente podemos pasar al tipo delineado:
<button igxButton="outlined">Outlined</button>
html
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>
html
Botón de acción flotante
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>
html
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>
html
Para que el texto FAB extendido tenga el estilo adecuado, utilice etiquetas <span>
o <div>
.
Ejemplos
Angular botón Desactivar
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>
html
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>
html
Durar
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>
html
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
...
]
})
typescript
<!--buttons-density.component.html-->
<igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
...
<button igxButton="flat">Flat</button>
html
// 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})`;
}
typescript
Si todo ha ido bien deberías ver algo como lo siguiente en el navegador:
Estilo
Para comenzar a diseñar el botón, necesitamos importar el archivo index
, donde se encuentran todas las funciones del tema y los mixins 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';
scss
Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el button-theme
y acepta los parámetros $foreground
y $background
con sus respectivos parámetros de desplazamiento y enfoque.
Dado el siguiente marcado:
<div class="my-contained-btn">
<button igxButton="contained">Contained button</button>
</div>
html
Necesitamos crear un tema:
$custom-button-theme: button-theme(
$foreground: #fdfdfd,
$hover-foreground: #fdfdfd,
$focus-foreground: #fdfdfd,
$background: #345779,
$hover-background: #2e4d6b,
$focus-background: #2e4d6b,
$disabled-foreground: #2e4d6b,
);
scss
Eche un vistazo a la sección button-theme
para obtener una lista completa de los parámetros disponibles para diseñar cualquier tipo de botón.
El último paso es pasar el tema del botón personalizado en nuestra aplicación:
.button-sample {
@include css-vars($custom-button-theme);
}
scss
Manifestación
Tamaño personalizado
Puede cambiar la altura del botón mediante la--size
variable, dirigiéndose directamente a button
:
button {
--size: 50px;
}
scss
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>
html
.my-app {
--igx-button-size: 50px;
}
scss
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);
}
scss
Obtén más información al respecto en el artículo Talla.
Referencias de API
- DirectivaBotónIgx
- Estilos de botones Igx
- Directiva IgxRipple
- IgxIconButtonDirectiva
- Componente de grupo de botones Igx
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.