Função
Permite executar eventos ou abrir outras telas, utilize suas propriedades para personalizar e alterar seu estilo.
Figura 1 - Exemplo de imagem rodando no aplicativo
Principais propriedades
Nome | Propriedade | Função |
|---|---|---|
Ícone | class | Abre a janela de seleção do ícone. |
Conteúdo | content | Define o rótulo. |
Tema do ícone | xattr-icon-theme | Altera o tema (cor) do ícone.* |
Tamanho | xattr-size | Define a altura do botão. |
Tema | xattr-theme | Altera o tema (cor) do preenchimento do botão.* |
Largura | xattr-fullsize | Define a largura do botão. |
Tipo de Estilo | xattr-type | Define o contorno e preenchimento do botão: |
* Os temas exibidos são padrões do Ionic framework.
Tamanho
Especifica o tamanho do botão, alterando sua altura, preenchimento, fonte e ícone. Existem 3 opções: Standard, Small e Large.
Figura 2 - Diferença entre as opções de tamanho
Largura
Essa propriedade permite especificar a largura do botão, a opção padrão é a Block.
Block: largura total na linha com os cantos arredondados;
Inline: redimensionar o botão com o tamanho definido na aba “Responsividade”, permite adicionar mais de um componente na mesma linha;
Full Width: largura total com cantos quadrados e sem borda à esquerda ou à direita, texto também é alterada para se destacar.
Figura 3 - Diferença entre as opções de largura
Style Type
Determina o fundo e a cor da borda do botão. Por padrão, os botões têm um plano de fundo sólido.
Default: botão com fundo preenchido;
Clear: botão com fundo e borda transparente;
Outline: botão com fundo transparente que se assemelha a um botão plano.
Figura 4 - Diferença entre as opções da propriedade Style Type
Tema
A propriedade tema permite personalizar e padronizar cada componentes em um total de 9 cores distintas. Veja abaixo a lista disponível.
O tema default varia conforme o tema do projeto.
Figura 4 - Temas disponíveis
Nome em inglês
Button
Nessa página
Compatibilidade
Formulário mobile
Equivalente web
Botão do Componente
Imagem no Editor Visual