Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
Permite executar eventos ou abrir outras telas, utilize suas propriedades para personalizar e alterar seu estilo.
![](/download/attachments/172736552/componenteBrowser.png?version=1&modificationDate=1569855259000&api=v2)
Figura 1 - Exemplo do componente rodando no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
---|---|---|
Ícone | class | Abre a janela de seleção de ícone. |
Cor do ícone | icon-theme | Permite escolher um tema para o ícone. |
TítuloConteúdo | content | Define o rótulo. |
Cor do texto | text-theme | Permite escolher um tema para o texto. |
Tema | xattr-theme | Escolhe Permite escolher um tema Bootstrap (cor) para o botão. |
Largura | xattr-fullsize | Define a largura do ícone, podendo ser Embutido (inline) ou Bloco (block). |
Desabilitado | xattr-disabled | Define se o botão será desabilitado (true) ou não (false). |
Identificador | id | ID do componente. |
Exibir | ng-show | Propriedade AngularJS Angular usada para mostrar ou oculta o componente. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Aba de Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Botão.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Plano de fundo do botão | Button background | Estiliza o plano de fundo do componente. |
Ícone | Icon | Estiliza o ícone do componente. |
Título | Label | Estiliza o texto do componente. |
Tema
A propriedade tema permite personalizar e padronizar cada componente em um total de 8 cores distintas. Veja abaixo a lista disponível.
: Padrão (varia com o tema do projeto), Primário (Primary), Sucesso (Sucess), Informação (Info), Aviso (Warning), Perigo (Danger), Claro (light) e Link.
Figura 2.1 - Temas disponíveis
Informações |
---|
O tema default varia conforme o tema do projeto. |
Largura
Essa propriedade permite especificar a largura do botão, a opção padrão é a Block e existem duas opções:
Bloco (Block): ocupa a largura total da linha em que o componente está;
Embutido (Inline): ocupa parte da largura da linha em que o componente está, seu redimensionamento pode ser definido na aba “Responsividade”.
![](/download/attachments/172736552/larguraBotao.png?version=1&modificationDate=1569855259000&api=v2)
Figura 2.2 - Diferença entre as opções de largura
Nome em inglês
Button
Nessa página
Índice | ||||
---|---|---|---|---|
|
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Image Added
Imagem no Editor Visual
Image Added