[Para Revisão] - Capítulo 2 - Components - Modals

chapters/02-componentes/2c-alertas.md

@@ -0,0 +1,146 @@
+# Alertas
+
+Alertas são uma ótima forma de oferecer ao usuário a habilidade de escolher uma ação específica ou uma lista de ações. Eles também podem prover ao usuário importantes informações ou requerer dele que tome uma decisão (ou várias decisões).
+
+De uma perspectiva de interface de usuário, você pode imaginar os alertas como um tipo de modal flutuante, que cobre apenas uma parte da tela. Isso significa que alertas apenas podem ser usados para rápidas ações como verificaçao de senhas, pequenas notificações ou ações rápidas. O fluxo mais complexo do usuário deve ser reservado para os [modais](/chapters/02-componentes/) de tela cheia.
+
+Alertas são bastante flexíveis, e podem ser customizados facilmente. Dê uma olhada em [API docs](/chapters/07-api/) para mais informações.
+
+* Contents
+* Basic Alerts
+* Prompt Alerts
+* Confirmation Alerts
+* Radio Alerts
+* Checkbox Alerts
+
+## Utilização básica:
+
+Alertas básicos são geralmente usados para notificar o usuário sobre novas informações (uma modificação no app, uma nova funcionalidade), uma situação urgente que requer reconhecimento, ou como uma confirmação para o usuário que uma ação teve sucesso ou não.
+
+``` ts
+doAlert() {
+  let alert = Alert.create({
+    title: 'New Friend!',
+    subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
+    buttons: ['Ok']
+  });
+  this.nav.present(alert);
+}
+```
+
+## Prompt Alerta
+
+Prompt Alerta oferece ao usuário uma forma de fazer entrada de dados ou informações. Por exemplo, muitas vezes o Prompt Alerta será usado para perguntar ao usuário por confirmação de sua senha como uma forma de segurança antes de continuar seguindo o fluxo do app.
+
+
+``` ts
+let prompt = Alert.create({
+  title: 'Login',
+  message: "Enter a name for this new album you're so keen on adding",
+  inputs: [
+    {
+      name: 'title',
+      placeholder: 'Title'
+    },
+  ],
+  buttons: [
+    {
+      text: 'Cancel',
+      handler: data => {
+        console.log('Cancel clicked');
+      }
+    },
+    {
+      text: 'Save',
+      handler: data => {
+        console.log('Saved clicked');
+      }
+    }
+  ]
+});
+```
+
+## Alertas de confirmação
+
+Alertas de Confirmação são usados quando é requerido explicitamente que o usuário confirme uma certa escolha depois do processamento ser feito no app. Um exemplo comum desse tipo de alerta é a checagem se o usuário tem certeza se deseja apagar ou remover um contato da sua lista de contatos.
+
+``` ts
+let confirm = Alert.create({
+  title: 'Use this lightsaber?',
+  message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
+  buttons: [
+    {
+      text: 'Disagree',
+      handler: () => {
+        console.log('Disagree clicked');
+      }
+    },
+    {
+      text: 'Agree',
+      handler: () => {
+        console.log('Agree clicked');
+      }
+    }
+  ]
+});
+```
+
+## Radio Alerta
+
+Radio Alerta é outro tipo simples de Alerta de Confirmação, porém use esse componente quando quizer oferecer várias escolhas.  Ele oferece ao usuário uma lista de opções à serem escolhidas, mas permite apenas uma escolha final, antes de continuar seguindo em frente.
+
+``` ts
+doRadio() {
+  let alert = Alert.create();
+  alert.setTitle('Lightsaber color');
+
+  alert.addInput({
+    type: 'radio',
+    label: 'Blue',
+    value: 'blue',
+    checked: true
+  });
+
+  alert.addButton('Cancel');
+  alert.addButton({
+    text: 'Ok',
+    handler: data => {
+      this.testRadioOpen = false;
+      this.testRadioResult = data;
+    }
+  });
+```
+
+## Checkbox Alerta
+
+Checkbox Alerta é um outro tipo de Alerta de Confirmação, mas use o componente de Checkbox para oferecer várias escolhas. Ele oferece ao usuário uma lista de opções que podem ser escolhidas.
+
+``` ts
+doCheckbox() {
+  let alert = Alert.create();
+  alert.setTitle('Which planets have you visited?');
+
+  alert.addInput({
+    type: 'checkbox',
+    label: 'Alderaan',
+    value: 'value1',
+    checked: true
+  });
+
+  alert.addInput({
+    type: 'checkbox',
+    label: 'Bespin',
+    value: 'value2'
+  });
+
+  alert.addButton('Cancel');
+  alert.addButton({
+    text: 'Okay',
+    handler: data => {
+      console.log('Checkbox data:', data);
+      this.testCheckboxOpen = false;
+      this.testCheckboxResult = data;
+    }
+  });
+}
+```

chapters/02-componentes/2c-alerts.md

@@ -0,0 +1,140 @@
+Alerts (Alertas)
+-----------
+
+Alertas são uma ótima maneira de oferecer ao usuário a capacidade de escolher uma ação específica ou uma lista de ações. Alerts também podem fornecer ao usuário informações importantes, ou obrigá-los a tomar uma decisão (ou várias decisões).
+
+Do ponto de vista da UI(interface do usuário) , você pode pensar em Alerts como um tipo de modal "flutuante", que abrange apenas uma parte da tela.
+Isto significa que, alerts só devem ser usados para ações rápidas, como verificação de senha, notificações de aplicativos pequenos, ou opções rápidas. Para uso de fluxos mais profundos, devem ser reservadas para Modais em tela cheia.
+
+Alerts são bastante flexíveis e podem ser facilmente personalizados. Confira a documentação da API para obter mais informações.
+
+Contents    
+Basic Alerts    
+Prompt Alerts    
+Confirmation Alerts    
+Radio Alerts    
+Checkbox Alerts    
+
+
+### Uso Básico
+
+Alerts básicos, são geralmente usados ​​para notificar o usuário sobre novas informações (uma mudança no aplicativo ou um novo recurso), uma situação de urgência que exiga confirmação, ou como uma confirmação ao usuário que uma ação foi bem-sucedida ou não.
+
+     doAlert() {
+       let alert = Alert.create({
+         title: 'Amigo Novo!',
+         subTitle: 'Seu amigo, Obi Wan Kenobi, aceitou o seu pedido de amizade!',
+      	   buttons: ['Ok']
+       });
+     this.nav.present(alert);
+    }
+
+
+### Prompt Alerts (Alertas de prompt)
+
+
+Prompts oferecem aos usuários uma maneira de dados ou informações de entrada. Por exemplo, muitas vezes Alerts Prompt será utilizado para pedir a confirmação do usuário e senha, como um meio de segurança antes de avançar no fluxo UX(User Experience) de um aplicativo.
+
+	let prompt = Alert.create({
+      title: 'Login',
+      message: 'Digite um nome para este novo álbum, que você está tão interessado em adicionar',
+      inputs: [
+        {
+          name: 'título',
+          placeholder: 'título'
+        },
+      ],
+      buttons: [
+        {
+          text: 'Cancelar',
+          handler: data => {
+            console.log('Cancelar cliclado');
+          }
+        },
+        {
+          text: 'Salvar',
+          handler: data => {
+            console.log('Salvar cliclado');
+          }
+        }
+      ]
+    });
+
+### Confirmation Alerts (Confirmação Alertas) 
+
+Confirmação de Alertas são usados ​​quando é necessário que o usuário confirme expressamente uma escolha particular antes de ir adiante no aplicativo. Um exemplo comum é verificar se um usuário quer excluir ou remover um contato de sua lista de endereços.
+
+	 let confirm = Alert.create({
+      title: 'Utilizar este sabre de luz?',
+      message: 'Você concorda em usar este sabre de luz para fazer o bem, através da galáxia intergaláctica?',
+      buttons: [
+        {
+          text: 'Discordar',
+          handler: () => {
+            console.log('Discordar clicado');
+          }
+        },
+        {
+          text: 'Concordo',
+          handler: () => {
+            console.log('Concordo clicado');
+          }
+        }
+      ]
+    });
+
+### Radio
+
+Alertas de rádio são simplesmente um outro tipo de alerta de confirmação, mas usam o componente de rádio para oferecer várias opções. Eles oferecem ao usuário um conjunto de opções para escolher, mas estão autorizados a fazer apenas uma seleção final antes de continuar para a frente.
+
+	 doRadio() {
+	    let alert = Alert.create();
+	    alert.setTitle('Cor do sabre de luz');
+
+	    alert.addInput({
+	      type: 'radio',
+	      label: 'Azul',
+	      value: 'blue',
+	      checked: true
+	    });
+
+	    alert.addButton('Cancelar');
+	    alert.addButton({
+	      text: 'SIM',
+	      handler: data => {
+	        this.testRadioOpen = false;
+	        this.testRadioResult = data;
+	      }
+	    });
+
+###Checkbox 
+
+Alertas de CheckBox são simplesmente um outro tipo de alerta de confirmação, mas use o componente Checkbox para oferecer várias opções. Eles oferecem ao usuário um conjunto de opções para escolher.
+
+	 doCheckbox() {
+	    let alert = Alert.create();
+	    alert.setTitle('Quais planetas você visitou?');
+
+	    alert.addInput({
+	      type: 'checkbox',
+	      label: 'Alderaan',
+	      value: 'value1',
+	      checked: true
+	    });
+
+	    alert.addInput({
+	      type: 'checkbox',
+	      label: 'Bespin',
+	      value: 'value2'
+	    });
+
+	    alert.addButton('Cancelar');
+	    alert.addButton({
+	      text: 'Sim',
+	      handler: data => {
+	        console.log('Checkbox data:', data);
+	        this.testCheckboxOpen = false;
+	        this.testCheckboxResult = data;
+	      }
+	    });
+	  }

chapters/02-componentes/2d-badges.md

@@ -0,0 +1,16 @@
+# Badges
+
+Badges são pequenos componentes que tipicamente, informam valores numéricos para o usuário. Eles normalmente são utilizados dentro de um item.
+
+
+### Uso Básico
+
+	<ion-item>
+	  <ion-icon name="logo-twitter" item-left></ion-icon>
+	  Seguidores
+	  <ion-badge item-right>260k</ion-badge>
+	</ion-item>
+
+Badges também podem receber qualquer atributo de cor:
+
+	<ion-badge secondary></ion-badge>