[Para Revisão] - Componentes - Buttons

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  

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)

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
+<button>Button</button>
+```
+
+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
+<button light>Light</button>
+<button>Primary</button>
+<button secondary>Secondary</button>
+<button danger>Danger</button>
+<button dark>Dark</button>
+```
+
+
+## Estilo Contorno
+Para utilizar o estilo contorno em um botão, adicione a propriedade outline:
+
+``` ts
+<button light outline>Light Outline</button>
+<button outline>Primary Outline</button>
+<button secondary outline>Secondary Outline</button>
+<button danger outline>Danger Outline</button>
+<button dark outline>Dark Outline</button>
+```
+
+## Estilo Limpo
+Para utilizar o estilo limpo em um botão, adicione a propriedade clear:
+
+``` ts
+<button light clear>Light Clear</button>
+<button clear>Primary Clear</button>
+<button secondary clear>Secondary Clear</button>
+<button danger clear>Danger Clear</button>
+<button dark clear>Dark Clear</button>
+```
+
+## Botões Rendondos
+Para criar botões com bordas arredondadas, adicione a propriedade round:
+
+``` ts
+<button light round>Light Round</button>
+<button round>Primary Round</button>
+<button secondary round>Secondary Round</button>
+<button danger round>Danger Round</button>
+<button dark round>Dark Round</button>
+```
+
+## 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
+<button block>Block Button</button>
+```
+
+
+## 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
+<button full>Full Button</button>
+```
+
+## Tamanho de Botões
+Adicione o atributo large para fazer um botão maior ou small para torná-lo menor:
+
+``` ts
+<button small>Small</button>
+<button>Default</button>
+<button large>Large</button>
+```
+
+## Botões com Ícones
+Para adicionar ícones em um botão, adicione um componente de ícone dentro dele:
+
+``` ts
+<!-- Float the icon left -->
+<button>
+  <ion-icon name="home"></ion-icon>
+  Left Icon
+</button>
+
+<!-- Float the icon right -->
+<button>
+  Right Icon
+  <ion-icon name="home"></ion-icon>
+</button>
+
+<!-- Only icon (no text) -->
+<button>
+  <ion-icon name="home"></ion-icon>
+</button>
+```
+
+## 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
+<button fab>FAB</button>
+```
+
+## 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
+<ion-navbar>
+  <ion-buttons start>
+    <button>
+      <ion-icon name="contact"></ion-icon>
+    </button>
+  </ion-buttons>
+
+  <ion-buttons end>
+    <button>
+      <ion-icon name="search"></ion-icon>
+    </button>
+  </ion-buttons>
+</ion-navbar>
+
+<ion-list>
+  <ion-item>
+    Left Icon Button
+    <button outline item-right>
+      <ion-icon name="star"></ion-icon>
+      Left Icon
+    </button>
+  </ion-item>
+</ion-list>
+```