diff --git a/README.md b/README.md index 65d581c..f75287c 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ 2.2 [Action Sheets](chapters/02-componentes/2b-action-sheets.md) 2.3 Alerts 2.4 Badges -2.5 Buttons +2.5 [Buttons](chapters/02-componentes/2e-botoes.md) 2.6 Cards 2.7 Checkbox 2.8 Grid diff --git a/chapters/02-componentes/2e-botao.md b/chapters/02-componentes/2e-botao.md new file mode 100644 index 0000000..15f423c --- /dev/null +++ b/chapters/02-componentes/2e-botao.md @@ -0,0 +1,50 @@ + +# Botão +Os botões são componentes simples no Ionic, podem ser compostos por texto, ícone, ou ambos e podem ser modificados com uma variedade de atributos. + +## Componente +``` +button:not([ion-item]),[button] +``` + + +## Atributos + +Atributo | Descrição +------------- | ------------- +outline | Um botão transparente com uma borda. +clear | Um botão transparente sem uma borda. +round | Um botão com cantos arredondados. +block | Um botão que preenche seu contêiner pai com um border-radius. +full | Um botão que enche seu contêiner-pai sem um border-radius ou bordas à esquerda / direita. +small | Um botão com tamanho pequeno. +large | Um botão com tamanho grande. +disabled | Um botão desativado. +fab | Um botão de ação flutuante. +fab-left | Coloque um botão fab para a esquerda. +fab-right | Coloque um botão fab para a direita. +fab-center | Coloque um botão fab para o centro. +fab-top | Coloque um botão fab em direção ao topo. +fab-bottom | Coloque um botão fab para o fundo. +color | Dinamicamente defini qual a cor predefinida que o botão deve utilizar (e.g. primary, secondary, danger, etc). + +## Propriedades + + +Attr | Type | Details +------------- | -------------| ------------- +category | string | Categoria do Botão. +large | string | Botão grande. +small | string | Botão pequeno. +default | string | Botão padrão +outline | string | Botão transparente com borda. +clear | string | Botão transparente sem borda. +solid | string | Força um botão sólido. Útil para os botões dentro de um item. +round | string | Um botão com bordas redondas. +block | string | Um botão que preenche seu contêiner pai com um border-radius. +full | string | Um botão que preenche seu contêiner pai sem um border-radius ou bordas à esquerda / direita. +color | string | Dinamicamente defini qual a cor predefinida que o botão deve utilizar (por exemplo, primary, secondary, danger, etc). + +## Relacionados + +[Documentação do Componente Botão](2e-botoes.md) diff --git a/chapters/02-componentes/2e-botoes.md b/chapters/02-componentes/2e-botoes.md new file mode 100644 index 0000000..06d4114 --- /dev/null +++ b/chapters/02-componentes/2e-botoes.md @@ -0,0 +1,147 @@ +# Botões + +Os botões são um meio essencial para interagir e navegar através de um aplicativo, estes devem comunicar claramente que uma ação ocorrerá após o usuário tocá-los. Os botões são componentes simples no Ionic, podem ser compostos por texto, ícone, ou ambos e podem ser modificados com uma variedade de atributos. + +## Conteúdo +* [Estilo Padrão]() +* [Estilo Contorno]() +* [Estilo Limpar]() +* [Redondos]() +* [Quadrados]() +* [Botões Completos]() +* [Tamanhos de botões]() +* [Botões com icones]() +* [Botões de ações flutuante]() +* [Botões em Componentes]() + + +## Utilização básica: +``` ts + +``` + +A propriedade primary define a cor do botão. O Ionic inclui uma série de cores padrões que podem serem facilmente substituídas: + +``` ts + + + + + +``` + + +## Estilo Contorno +Para utilizar o estilo contorno em um botão, adicione a propriedade outline: + +``` ts + + + + + +``` + +## Estilo Limpo +Para utilizar o estilo limpo em um botão, adicione a propriedade clear: + +``` ts + + + + + +``` + +## Botões Rendondos +Para criar botões com bordas arredondadas, adicione a propriedade round: + +``` ts + + + + + +``` + +## Botões de bloco +Adicionando um bloco para um botão fará com que o botão use a largura 100% do seu pai. Ele também irá adicionar display: block para o botão: + +``` ts + +``` + + +## Botões Cheios +Adicionando a propriedade full para um botão fará com que o botão tire 100% da largura do seu pai. No entanto, ele também irá remover as bordas da esquerda e direita do botão. Este modelo é útil quando o botão deve-se esticar ao longo de toda a largura da tela. + +``` ts + +``` + +## Tamanho de Botões +Adicione o atributo large para fazer um botão maior ou small para torná-lo menor: + +``` ts + + + +``` + +## Botões com Ícones +Para adicionar ícones em um botão, adicione um componente de ícone dentro dele: + +``` ts + + + + + + + + +``` + +## Botões de Ação Flutuante +Ao adicionar a propriedade fab a um botão irá transformá-lo em um botão de ação flutuante. Este é um botão estilizado com material design que se destina a chamar atenção do usuário a uma ação específica. Botões Fab são posicionados de forma absoluta e seu posicionamento pode ser controlado pela adição de atributos como fab-top e fab-left. Veja a especificação da [API de botões](2e-botao.md) para uma lista completa de atributos. + +``` ts + +``` + +## Botões em Componentes +Embora botões possam ser utilizados por conta própria, eles podem facilmente serem utilizados dentro de outros componentes. Por exemplo, os botões podem ser adicionados a um item de lista ou uma barra de navegação. + +``` ts + + + + + + + + + + + + + Left Icon Button + + + +```