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 atributo variant para adicionar um botão contido simples no seu template de componente. Note que se você não definir o variant, por padrão ele será definido como contained.

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

Outlined Button

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

<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 propriedade variant como fab:

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

Button Sizing

Os usuários podem alterar o tamanho do componente button usando a variável CSS--ig-size. 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

Definir a propriedade download solicitará que o usuário salve o URL vinculado em vez de navegar até ele.

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

Styling

The IgcButtonComponent component exposes three CSS parts which we can use for styling:

Nome	Descrição
`base`	The native button element of the igc-button component.
`prefix`	The prefix container of the igc-button component.
`suffix`	The suffix container of the igc-button component.

The base CSS part allows us to style the wrapped element (<button> or <a>).

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