Visão geral do botão de Web Components

    The Web Components Button Component lets you enable clickable elements that trigger actions in your Web Components app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the Web Components Button OnClick event, toggle the Web Components button, disable the Web Components button, and more.

    Web Components Button Example

    Usage

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

    npm install igniteui-webcomponents

    Você precisará então importar o IgcButtonComponent, seu CSS necessário e registrar seu módulo, assim:

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

defineComponents(IgcButtonComponent);

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

    <igc-button>Click me</igc-button>

    Prefix / Suffix

    Com os slots prefix e suffix do componente IgcButtonComponent, podemos adicionar conteúdo diferente antes e depois do conteúdo principal do botão.

    <igc-button type="button" variant="contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</igc-button>

    Type

    O componente button mudará sua estrutura interna de um elemento <button> para um elemento do tipo <a> quando o atributo href for definido. Nesse caso, o botão pode ser pensado como um link regular. Definir o atributo href permitirá que você também defina os atributos rel, target e download. No caso em que o componente button usa um elemento <button> real internamente, podemos especificar seu Type definindo a propriedade para qualquer um dos seguintes valores:

    • Submit- quando queremos enviar os dados do formulário
    • reset- quando queremos redefinir os dados do formulário para seus valores iniciais
    • button- quando queremos adicionar um botão com uma funcionalidade personalizada em qualquer lugar de uma página da web

    Button Variants

    Contained Button

    Use o variant atributo para adicionar um botão contido simples em seu modelo de componente. Observe que, se você não definir variante, por padrão, ela será definida como contida.

    <igc-button variant="contained">Contained</igc-button>

    Outlined Button

    Tudo o que você precisa fazer para criar um outlined botão é alterar o valor da variant propriedade:

    <igc-button variant="outlined">Outlined</igc-button>

    Flat Button

    Analogicamente, podemos mudar para a variante flat.

    <igc-button variant="flat">Flat</igc-button>

    Floating Action Button

    Podemos criar um botão de ação flutuante definindo a variant propriedade como fab:

    <igc-button variant="fab">Fab</igc-button>

    Button Sizing

    Os usuários podem alterar o tamanho do IgcButtonComponent usando a--ig-size variável CSS. No exemplo a seguir, adicionaremos alguns botões de opção para exibir todos os valores de tamanho. Dessa forma, sempre que um for selecionado, alteraremos o tamanho do botão.

    import { defineComponents, IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
defineComponents(IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent);

    <igc-radio-group id="radio-group" alignment="horizontal">
    <igc-radio name="size" value="small" label-position="after">Small</igc-radio>
    <igc-radio name="size" value="medium" label-position="after" checked>Medium</igc-radio>
    <igc-radio name="size" value="large" label-position="after">Large</igc-radio>
</igc-radio-group>

    this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;
this.outlinedButton = document.getElementById('outlined-btn') as IgcButtonComponent;
this.flatButton = document.getElementById('flat-btn') as IgcButtonComponent;
this.containedButton = document.getElementById('contained-btn') as IgcButtonComponent;
this.fabButton = document.getElementById('fab-btn') as IgcButtonComponent;

this.radioGroup.addEventListener('click', (radio: any) => {
    this.outlinedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
    this.flatButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
    this.containedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
    this.fabButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
});

    O resultado da implementação do código acima deve ser semelhante ao seguinte:

    Download

    A configuração da download propriedade solicitará que o usuário salve a URL vinculada em vez de navegar até ela.

    <igc-button
    href=""
    variant="contained"
    download="url_to_content"
    target="_blank">
    Download
</igc-button>

    Styling

    O IgcButtonComponent expõe três partes CSS que podemos usar para estilizar:

    Nome Descrição
    base O elemento de botão nativo do componente igc-button.
    prefix O contêiner de prefixo do componente igc-button.
    suffix O contêiner de sufixo do componente igc-button.

    A base parte CSS nos permite estilizar o elemento encapsulado (<button> ou <a>).

    igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}

    API References

    Additional Resources