Skip to content

Commit

Permalink
Alteration to include modifications in chapters "alerts".
Browse files Browse the repository at this point in the history
  • Loading branch information
carloshpdoc committed Apr 11, 2016
1 parent 93497d6 commit 7f9198b
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 3 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
####2. Componentes
2.1 [Overview](chapters/02-componentes/2a-overview.md)
2.2 [Action Sheets](chapters/02-componentes/2b-action-sheets.md)
2.3 [Alerts](chapters/02-componentes/2c-alerts.md)
2.3 [Alerts](chapters/02-componentes/2c-alertas.md)
2.4 Badges
2.5 Buttons
2.6 Cards
Expand Down
146 changes: 146 additions & 0 deletions chapters/02-componentes/2c-alertas.md
Original file line number Diff line number Diff line change
@@ -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;
}
});
}
```
4 changes: 2 additions & 2 deletions chapters/02-componentes/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
2. Componentes
2.1 [Overview](2a-orverview.md)
2.2 [Action Sheets](2b-action-sheets.md)
2.3 [Alerts](2c-alerts.md)
2.3 [Alerts](2c-alertas.md)
2.4 > Badges
2.5 > Buttons
2.6 > Cards
Expand All @@ -20,4 +20,4 @@
2.19 > Slides
2.20 > Tabs
2.21 > Toggle
2.22 > Toolbar
2.22 > Toolbar

0 comments on commit 7f9198b

Please sign in to comment.