Descripción general del botón de icono Angular

La directiva Ignite UI for Angular Icon Button está pensada para convertir cualquier icono en un botón completamente funcional. Viene igxIconButton en tres tipos: plano, delineado y contenido, que es el predeterminado.

Ejemplo de botón de icono Angular

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular';

@Component({
    selector: 'app-icon-button-overview',
    styleUrls: ['./icon-button-overview.component.scss'],
    templateUrl: './icon-button-overview.component.html',
    imports: [IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent]
})
export class IconButtonOverviewComponent { }
tsコピー

<div class="wrapper">
    <div class="button-sample">
        <button igxIconButton="flat" igxRipple>
            <igx-icon>home</igx-icon>
        </button>
    </div>
    <div class="button-sample">
        <button igxIconButton="contained" igxRipple>
            <igx-icon>home</igx-icon>
        </button>
    </div>
    <div class="button-sample">
        <button igxIconButton="outlined" igxRipple>
            <igx-icon>home</igx-icon>
        </button>
    </div>
</div>
htmlコピー

.wrapper {
    display: flex;
    flex-flow: row wrap;
}

.button-sample {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    flex: 1 0 30%;
    margin: 16px 0;
}
scssコピー

Edit in: CodesandboxStackBlitz

¿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.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Primeros pasos con Ignite UI for Angular botón de icono

Para comenzar con la directiva Ignite UI for Angular Icon 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 el IgxIconButtonDirective como una dependencia independiente:

// home.component.ts

...
import { IgxIconButtonDirective } from 'igniteui-angular';
// import { IgxIconButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
        <button igxIconButton="outlined">
            <igx-icon>home</igx-icon>
        </button>`,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxIconButtonDirective]
})
export class HomeComponent {}
typescript

Ahora que tiene importada la directiva Ignite UI for Angular Icon Button, puede comenzar a usar la igxIconButton directiva en los elementos.

Tipos de botones de iconos Angular

Botón de icono plano

Utilice la directiva para añadir un simple botón de icono plano en la igxIconButton plantilla de componente:

<button igxIconButton="flat">
    <igx-icon>edit</igx-icon>
</button>
html

Botón de icono contenido

Todo lo que tienes que hacer para crear un botón de icono contenido es cambiar el valor de la igxIconButton propiedad. Tenga en cuenta que si no elige un tipo, de forma predeterminada también se establecerá en contained.

<button igxIconButton>
    <igx-icon>favorite</igx-icon>
</button>
html

Botón de icono delineado

Analógicamente podemos pasar al tipo delineado:

<button igxIconButton="outlined">
    <igx-icon>more_vert</igx-icon>
</button>
html

Ejemplos

Botón de icono desactivado

Si desea deshabilitar un botón de icono, puede usar la disabled propiedad. En este ejemplo, también demostramos cómo usar iconos de diferentes familias con la igxIconButton directiva:

<button igxIconButton="flat" disabled>
    <igx-icon family="fa" name="fa-home"></igx-icon>
</button>
html

Iconos SVG

Además de los iconos de material, la directiva también admite el igxIconButton uso de imágenes SVG como iconos. Para hacerlo, primero debemos inyectar la IgxIconService dependencia y luego usar el método para importar el addSvgIcon archivo SVG en caché. Para obtener más información, puede leer la sección SVG en el tema del icono.

constructor(private _iconService: IgxIconService) { }

public ngOnInit() {
    // register custom SVG icon
    this._iconService.addSvgIcon('rain', 'assets/images/card/icons/rain.svg', 'weather-icons');
}
typescript

<button igxIconButton>
    <igx-icon family="weather-icons" name="rain"></igx-icon>
</button>
html

Tamaño

Los usuarios pueden elegir uno de los tres tamaños predefinidos igxIconButton mediante la--ig-size propiedad CSS personalizada. De forma predeterminada, el tamaño del componente se establece en medio.

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular';

@Component({
    selector: 'app-icon-button-size',
    styleUrls: ['./icon-button-size.component.scss'],
    templateUrl: './icon-button-size.component.html',
    imports: [IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent]
})
export class IconButtonSizeComponent { }
tsコピー

<div class="wrapper">
    <div class="button-sample">
        <span igxIconButton="outlined" igxRipple class="small">
            <igx-icon>person</igx-icon>
        </span>
    </div>
    <div class="button-sample">
        <div igxIconButton="outlined" igxRipple class="medium">
            <igx-icon>place</igx-icon>
        </div>
    </div>
    <div class="button-sample">
        <button igxIconButton="outlined" igxRipple class="large">
            <igx-icon>phone</igx-icon>
        </button>
    </div>
</div>
htmlコピー

.wrapper {
    display: flex;
    flex-flow: row wrap;
}

.button-sample {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    flex: 1 0 30%;
    margin: 16px 0;
}

.large {
    --ig-size: var(--ig-size-large);
}

.medium {
    --ig-size: var(--ig-size-medium);
}

.small {
    --ig-size: var(--ig-size-small);
}
scssコピー

Edit in: CodesandboxStackBlitz

Como puedes ver en el ejemplo anterior, también podemos usar la igxIconButton directiva para convertir elementos como span y div en botones de iconos con estilo Ignite UI for Angular.

Estilo de botón de icono

Siguiendo el enfoque más simple, usamos variables CSS para personalizar la apariencia del botón del icono:

[igxIconButton="contained"] {
  --background: #011627;
  --foreground: #fefefe;
  --hover-foreground: #011627dc;
  --hover-background: #ecaa53;
  --focus-foreground: #011627dc;
  --focus-background: #ecaa53;
  --focus-border-color: #0116276c;
  --active-foreground: #011627dc;
  --active-background: #ecaa53;
}
scss

Echa un vistazo a la icon-button-theme sección para obtener una lista completa de los parámetros disponibles para diseñar cualquier tipo de botón de icono.

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular';

@Component({
    selector: 'app-icon-button-styling',
    styleUrls: ['./icon-button-styling.component.scss'],
    templateUrl: './icon-button-styling.component.html',
    imports: [IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent]
})
export class IconButtonStylingComponent { }
tsコピー

<div class="wrapper">
    <div class="button-sample">
        <button igxIconButton="flat" igxRipple>
            <igx-icon>home</igx-icon>
        </button>
    </div>
    <div class="button-sample">
        <button igxIconButton="contained" igxRipple>
            <igx-icon>home</igx-icon>
        </button>
    </div>
    <div class="button-sample">
        <button igxIconButton="outlined" igxRipple>
            <igx-icon>home</igx-icon>
        </button>
    </div>
</div>
htmlコピー

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.button-sample {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  flex: 1 0 30%;
  margin: 16px 0;
}

[igxIconButton="flat"] {
  --foreground: #011627;
  --background: #FEFEFE;
  --hover-background: #ECAA53;
  --focus-foreground: #011627dc;
  --focus-background: #ECAA53;
  --active-foreground: #011627dc;
  --active-background: #ECAA53;
}

[igxIconButton="contained"] {
  --background: #011627;
  --foreground: #FEFEFE;
  --hover-foreground:  #011627dc;
  --hover-background: #ECAA53;
  --focus-foreground: #011627dc;
  --focus-background: #ECAA53;
  --focus-border-color:  #0116276c;
  --active-foreground: #011627dc;
  --active-background: #ECAA53;
}

[igxIconButton="outlined"] {
  --foreground: #011627;
  --background: #FEFEFE;
  --border-color: #011627;
  --hover-foreground:  #011627dc;
  --hover-background: #ECAA53;
  --focus-foreground: #011627dc;
  --focus-background: #ECAA53;
  --focus-border-color:  #0116276c;
  --active-foreground: #011627dc;
  --active-background: #ECAA53;
}
scssコピー

Edit in: CodesandboxStackBlitz

Referencias de API

• IgxIconButtonDirectiva
• IgxIconButton Styles
• Directiva IgxRipple

Recursos adicionales

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub