Descripción general del botón de icono de Web Components

    El componente Botón de icono de Ignite UI for Web Components permite a los desarrolladores utilizar iconos registrados como botones en su aplicación. Lleva todas las características del componente de icono, pero también agrega características del componente de botón.

    Web Components Icon Button Example

    Usage

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    Antes de usarlosIgcIconButtonComponent, debes registrarlo de la siguiente manera:

    import { defineComponents, IgcIconButtonComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcIconButtonComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    La forma más sencilla de empezar a usar elIgcIconButtonComponent uso es la siguiente:

    <igc-icon-button name="thumb-up" collection="material"></igc-icon-button>

    Examples

    Variant

    Similar a los componentes de botones normales, el botón icono soporta varias variantes -flat(por defecto),contained youtlined; Para cambiar el tipo de botón de icono, establece elvariant atributo del botón icono.

    <igc-icon-button name="search" variant="contained"></igc-icon-button>

    Tamaño

    El tamaño del botón puede cambiarse utilizando la--ig-size variable CSS a cualquiera de los tres tamaños soportados:--ig-size-small,--ig-size-medium,--ig-size-large (por defecto).

    igc-icon-button {
    --ig-size: var(--ig-size-medium);
}

    Type

    El componente icono de botón cambiará su estructura interna de<button> a<a> un elemento tipo cuando se establece elhref atributo. En ese caso, el botón icono puede considerarse un enlace normal. Configurar elhref atributo te permitirá también establecer elrel,target, ydownload atributos del botón icono.

    <igc-icon-button
  name="thumb-up"
  collection="material"
  href="https://duckduckgo.com"
  target="_blank">
</igc-icon-button>

    Mirrored

    Algunos iconos deben verse un poco diferentes cuando se usan en modo de derecha a izquierda (RTL). Por eso proporcionamos unmirrored atributo que, al activarse, gira el botón del icono horizontalmente.

    <igc-icon-button name="thumb-up" mirrored></igc-icon-button>

    Styling

    ElIgcIconButtonComponent componente expone dos partes CSS —basequeicon te permiten estilizar el elemento de envolvimiento (<button>o<a>) y el elemento envolvido<igc-icon>.

    igc-icon-button[variant="contained"]:not([disabled])::part(base) {
  padding: 12px;
  background-color: var(--ig-success-500);
}

igc-icon-button::part(icon) {
  --size: 22px;
  color: var(--ig-success-500-contrast);
}

    API References

    Additional Resources