Descripción general del botón Angular

La directiva Angular Button se utiliza para crear y agregar botones procesables a una página web/aplicación. Existen diferentes tipos de botones Angular que son fáciles de personalizar e incluyen varias funciones integradas. De forma predeterminada, Angular Material utiliza elementos nativos <button> y <a> para ofrecer una experiencia accesible.

La directiva Ignite UI for Angular Button está pensada para convertir cualquier botón, span, div o elemento de anclaje en un botón completamente funcional. Puede utilizar los siguientes tipos de botones angulares: 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 angular y permitir a los usuarios elegir el tamaño del botón y más.

Angular Button Example

Hemos creado el siguiente ejemplo de botón Angular 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 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 a la 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 importada la directiva o el módulo Ignite UI for Angular Button, puede comenzar a usar la directiva igxButton en los elementos.

Angular Button Types

Flat Button

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>

Contained Button

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>

Outlined Button

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 expone una nueva igxIconButton directiva destinada a convertir 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, 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 directiva igxButton para convertir elementos como span y div en Ignite UI for Angular. Los colores predeterminados se pueden personalizar mediante las propiedades igxButtonColor e igxButtonBackground:

<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:

Angular Button Styling

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';

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>

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
);

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.

Using CSS variables

El último paso es pasar el tema del botón personalizado en nuestra aplicación:

.my-contained-btn {
    @include css-vars($custom-button-theme);
}

Using Theme Overrides

Para diseñar componentes para navegadores más antiguos, como Internet Explorer 11, tenemos que utilizar un enfoque diferente, ya que no admite variables CSS. Si el componente utiliza Emulated ViewEncapsulation, es necesario penetrate esta encapsulación usando::ng-deep. Para evitar que el tema personalizado se filtre a otros componentes, asegúrese de incluir el selector:host antes de::ng-deep:

:host {
     ::ng-deep {
        .my-contained-btn {
            @include button($custom-button-theme);
        }
    }
}

Demo

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.

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub