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.

    Web Components Icon Button Example

    Usage

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

    npm install igniteui-webcomponents

    Before using the IgcIconButtonComponent, you need to register it as follows:

    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 oIgcIconButtonComponent é a seguinte:

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

    Examples

    Variant

    Semelhante aos componentes normais dos botões, o botão ícone suporta várias variantes -flat(padrão),contained eoutlined; Para mudar o tipo de botão de ícone, defina ovariant atributo 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--ig-size variável CSS 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 ícone do botão mudará sua estrutura interna de<button> para um<a> elemento tipo quando ohref atributo for definido. Nesse caso, o botão de ícone pode ser visto como um link comum. Definir ohref atributo permitirá que você também defina orel,target edownload atributos 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 ter uma aparência um pouco diferente quando usados no modo Direita para Esquerda (RTL). Por isso, fornecemos ummirrored atributo que, quando definido, vira o botão do ícone horizontalmente.

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

    Styling

    OIgcIconButtonComponent componente expõe duas partes CSS —baseeicon isso permite que você estilize o elemento de enrolamento (<button>ou<a>) e o elemento enrolado<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