Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
af790c9
Create 2d-badges
Lucasktrindade Jul 18, 2016
57ba45e
Delete 2d-badges
Lucasktrindade Jul 18, 2016
b9c4c84
Tradução dos componentes badges concluído
Jul 18, 2016
609f432
Retornando ao estado do fork 18/07/2016
Jul 18, 2016
c65fd32
Merged branch master into master
Jul 18, 2016
68f7558
Retornando commit
Jul 18, 2016
c0db8fc
Merged branch master into master
Jul 18, 2016
e588d6c
Tradução do componente segmentos.
Jul 18, 2016
61c6603
linkando página do segmento no README
Jul 18, 2016
5f36eb9
Tradução do componenet select
Jul 18, 2016
9245067
Atualização da organização do componente select
Jul 18, 2016
f033f10
Atualização da tradução do select, ajustando tag
Jul 18, 2016
4c37c6f
Removendo link dos Sumários no Readme
Jul 27, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
40 changes: 40 additions & 0 deletions chapters/02-componentes/2q-segmentos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
```
43 changes: 43 additions & 0 deletions chapters/02-componentes/2r-select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
```