Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 5 Próxima »
Permite executar eventos ou abrir outras telas, utilize suas propriedades para personalizar e alterar seu estilo.
Figura 1 - Exemplo de imagem rodando no aplicativo
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.
Especifica o tamanho do botão, alterando sua altura, preenchimento, fonte e ícone. Existem 3 opções (Figura 2): Standard, Small e Large.
Figura 2 - Diferença entre as opções de tamanho
Essa propriedade permite especificar a largura do botão (Figura 3), 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
Determina o fundo e a cor da borda do botão. Por padrão, os botões (Figura 4) 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
A propriedade tema permite personalizar e padronizar cada componente em um total de 9 cores distintas. Veja abaixo a lista disponível (Figura 5).
O tema default varia conforme o tema do projeto.
Figura 5 - Temas disponíveis
Nome em inglês
Button
Nessa página
Compatibilidade
Formulário mobile
Equivalente web
Botão (web)
Botão do Componente
Imagem no Editor Visual