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.

    EXAMPLE
    TS
    HTML
    SCSS

    ¿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
    App Builder | CTA Banner

    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:

    EXAMPLE
    TS
    HTML
    SCSS

    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

    EXAMPLE
    TS
    HTML
    SCSS

    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

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.