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ê então precisará importar oIgcButtonComponent 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 Comecando.

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

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

    Prefix / Suffix

    Comprefix os slotssuffix e doIgcButtonComponent componente, 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 botão mudará sua estrutura interna de a<button> para um<a> elemento tipo quando ohref atributo for definido. Nesse caso, o botão pode ser visto como um link comum. Definir ohref atributo permite que você também defina osrel atributostarget edownload e também. No caso em que o componente botão usa um elemento real<button> internamente, podemos especificar eleType 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 web

    Button Variants

    Contained Button

    Use ovariant atributo para adicionar um botão simples de conteúdo no seu template de componente. Note que, se você não definir variante, por padrão ele será definido como contido.

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

    Outlined Button

    Tudo o que você precisa fazer para criar umoutlined botão é alterar o valor davariant propriedade:

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

    Flat Button

    Analogicamente, podemos mudar paraflat variante.

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

    Floating Action Button

    Podemos criar um botão de ação flutuante definindo avariant propriedade parafab:

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

    Button Sizing

    Os usuários podem alterar o tamanho doIgcButtonComponent usando a--ig-size variável CSS. No exemplo a seguir, vamos adicionar alguns botões de opção para exibir todos os valores de tamanho. Assim, sempre que um for selecionado, mudamos 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 adownload propriedade pedirá ao usuário que 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

    EleIgcButtonComponent expõe três partes CSS que podemos usar para estilismo:

    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.

    Abase parte CSS nos permite estilizar o elemento enrolado (<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