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

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

    Ejemplo de botón de icono Web Components

    EXAMPLE
    TS
    HTML
    IconButtonSize.css
    index.css

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Usage

    Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents
    cmd

    Antes de utilizar IgcIconButtonComponent, debe registrarlo de la siguiente manera:

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

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.

    La forma más sencilla de empezar a utilizarlo IgcIconButtonComponent es la siguiente:

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

    Examples

    Variant

    Al igual que los componentes de botón normales, el botón de icono admite varias variantes: flat (predeterminado), contained y outlined; Para cambiar el tipo de botón de icono, establezca el atributo de variant del botón de icono.

    EXAMPLE
    TS
    HTML
    CSS

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

    Tamaño

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

    EXAMPLE
    TS
    HTML
    IconButtonSize.css
    index.css

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

    Type

    El componente del botón de icono cambiará su estructura interna de <button> a un elemento de tipo <a> cuando se establezca el atributo href. En ese caso, el botón del icono puede considerarse como un enlace normal. Configurar el atributo href le permitirá configurar también los atributos rel, target y download del botón de icono.

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

    Mirrored

    Algunos íconos deben verse un poco diferentes cuando se usan en el modo De derecha a izquierda (RTL). Por ese motivo, proporcionamos un atributo mirrored que, cuando se configura, voltea el botón del ícono horizontalmente.

    <igc-icon-button name="thumb-up" mirrored></igc-icon-button>
    html
    Ignite UI for Web Components | CTA Banner

    Styling

    El componente del botón de icono expone dos partes CSS: base e icon que le permiten diseñar el elemento envolvente (<button> o <a>) y el elemento <igc-icon> envolvente;

    igc-icon-button::part(base) {
      padding: 12px;
      color: olive;
    }
    
    igc-icon-button::part(icon) {
      --size: 32px;
    }
    css

    EXAMPLE
    TS
    HTML
    IconButtonStyling.css
    index.css

    API References

    Additional Resources