[Para Revisão] - Capítulo 2 - Components - Segment and Select

README.md

@@ -30,8 +30,8 @@
 2.14 Navigation  
 2.15 Radio  
 2.16 Searchbar  
-2.17 Segment  
-2.18 Select  
+2.17 Segment 
+2.18 Select
 2.19 Slides  
 2.20 Tabs  
 2.21 Toggle  

chapters/02-componentes/2q-segmentos.md

@@ -0,0 +1,40 @@
+# Segmento
+
+Segmento é um grupo de botões que são exibidos em linha. Eles podem ser usados como filtro, mostrando ou escondendo elementos baseado nos valores de cada segmento.
+
+## Utilização básica:
+
+``` ts
+<div padding>
+  <ion-segment [(ngModel)]="pet">
+    <ion-segment-button value="kittens">
+      Kittens
+    </ion-segment-button>
+    <ion-segment-button value="puppies">
+      Puppies
+    </ion-segment-button>
+  </ion-segment>
+</div>
+
+<div [ngSwitch]="pet">
+  <ion-list *ngSwitchCase="'puppies'">
+    <ion-item>
+      <ion-thumbnail item-left>
+        <img src="img/thumbnail-puppy-1.jpg">
+      </ion-thumbnail>
+      <h2>Ruby</h2>
+    </ion-item>
+    ...
+  </ion-list>
+
+  <ion-list *ngSwitchCase="'kittens'">
+    <ion-item>
+      <ion-thumbnail item-left>
+        <img src="img/thumbnail-kitten-1.jpg">
+      </ion-thumbnail>
+      <h2>Luna</h2>
+    </ion-item>
+    ...
+  </ion-list>
+</div>
+```

chapters/02-componentes/2r-select.md

@@ -0,0 +1,43 @@
+# Select
+
+## Utilização básica:
+
+O ion-select é um component similar ao elemento ```<select>``` do HTML, porém, o componente select do Ionic faz ficar mais fácil para os usuários procurarem e selecionar a opção ou opções desejadas. Quando os usuários apertam o componente select, um diálogo que vai aparecer com todas as opções largas, isso faz com que o select fique fácil para os usuários.
+
+``` ts
+<ion-list>
+  <ion-item>
+    <ion-label>Gaming</ion-label>
+    <ion-select [(ngModel)]="gaming">
+      <ion-option value="nes">NES</ion-option>
+      <ion-option value="n64">Nintendo64</ion-option>
+      <ion-option value="ps">PlayStation</ion-option>
+      <ion-option value="genesis">Sega Genesis</ion-option>
+      <ion-option value="saturn">Sega Saturn</ion-option>
+      <ion-option value="snes">SNES</ion-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
+
+É possível criar múltiplas seleções com ```<ion-select>``` apenas adicionando multiple="true" ao elemento.
+
+``` ts
+<ion-list>
+  <ion-item>
+    <ion-label>Toppings</ion-label>
+    <ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
+      <ion-option value="bacon" checked="true">Bacon</ion-option>
+      <ion-option value="olives">Black Olives</ion-option>
+      <ion-option value="xcheese" checked="true">Extra Cheese</ion-option>
+      <ion-option value="peppers">Green Peppers</ion-option>
+      <ion-option value="mushrooms">Mushrooms</ion-option>
+      <ion-option value="onions">Onions</ion-option>
+      <ion-option value="pepperoni">Pepperoni</ion-option>
+      <ion-option value="pineapple">Pineapple</ion-option>
+      <ion-option value="sausage">Sausage</ion-option>
+      <ion-option value="Spinach">Spinach</ion-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```