Visão geral do botão de ícone de Web Components

    O componente Ignite UI for Web Components Icon Button permite que os desenvolvedores usem ícones registrados como botões em seus aplicativos. Ele carrega todos os recursos do componente de ícone, mas adiciona recursos do componente de botão também.

    Exemplo de botão de ícone Web Components

    Usage

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    Antes de usar o IgcIconButtonComponent, você precisa registrá-lo da seguinte maneira:

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

defineComponents(IgcIconButtonComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

    A maneira mais simples de começar a usar o IgcIconButtonComponent é a seguinte:

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

    Examples

    Variant

    Semelhante aos componentes de botão regulares, o botão de ícone suporta diversas variantes: flat (padrão), contained e outlined; Para alterar o tipo de botão de ícone, defina o atributo variant do botão de ícone.

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

    Tamanho

    O tamanho do botão pode ser alterado utilizando a variável CSS--ig-size para qualquer um dos três tamanhos suportados:--ig-size-small,--ig-size-medium,--ig-size-large (padrão).

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

    Type

    O componente do botão de ícone mudará sua estrutura interna de <button> para um elemento do tipo <a> quando o atributo href for definido. Nesse caso, o botão de ícone pode ser pensado como um link regular. Definir o atributo href permitirá que você também defina os atributos rel, target e download do botão de ícone.

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

    Mirrored

    Alguns ícones precisam parecer um pouco diferentes quando usados no modo Right-to-Left (RTL). Por esse motivo, fornecemos um atributo mirrored que, quando definido, inverte o botão do ícone horizontalmente.

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

    Styling

    The IgcIconButtonComponent component exposes two CSS parts - base and icon that allow you to style the wrapping element (<button> or <a>) and the wrapped <igc-icon> element.

    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