From 9e9abee84efea60f68f79bb01d2642e50017fecb Mon Sep 17 00:00:00 2001 From: Carloshpdoc Date: Sun, 3 Apr 2016 11:19:09 -0300 Subject: [PATCH 01/10] Working in 2c-alerts item --- README.md | 2 +- chapters/02-componentes/2c-alerts.md | 85 ++++++++++++++++++++++++++++ chapters/02-componentes/README.md | 2 +- 3 files changed, 87 insertions(+), 2 deletions(-) create mode 100644 chapters/02-componentes/2c-alerts.md diff --git a/README.md b/README.md index 605b73c..c25287d 100644 --- a/README.md +++ b/README.md @@ -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 +2.3 [Alerts](chapters/02-componentes/2c-alerts.md) 2.4 Badges 2.5 Buttons 2.6 Cards diff --git a/chapters/02-componentes/2c-alerts.md b/chapters/02-componentes/2c-alerts.md new file mode 100644 index 0000000..7c32dda --- /dev/null +++ b/chapters/02-componentes/2c-alerts.md @@ -0,0 +1,85 @@ +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, apenas 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: 'title', + placeholder: 'Title' + }, + ], + buttons: [ + { + text: 'Cancel', + handler: data => { + console.log('Cancel clicked'); + } + }, + { + text: 'Save', + handler: data => { + console.log('Saved clicked'); + } + } + ] + }); + +### 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 do confirmation alert, é verificando se um usuário quer excluir ou remover um contato de sua lista de endereços. + + let confirm = Alert.create({ + title: 'Utilize 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: 'Disagree', + handler: () => { + console.log('Disagree clicked'); + } + }, + { + text: 'Agree', + handler: () => { + console.log('Agree clicked'); + } + } + ] + }); + diff --git a/chapters/02-componentes/README.md b/chapters/02-componentes/README.md index 1684588..1df8e56 100644 --- a/chapters/02-componentes/README.md +++ b/chapters/02-componentes/README.md @@ -1,7 +1,7 @@ 2. Componentes 2.1 [Overview](2a-orverview.md) 2.2 [Action Sheets](2b-action-sheets.md) -2.3 > Alerts +2.3 [Alerts](2c-alerts.md) 2.4 > Badges 2.5 > Buttons 2.6 > Cards From 82c683d306377fefe38d6d93728566f25a9f7fa4 Mon Sep 17 00:00:00 2001 From: Carloshpdoc Date: Sat, 9 Apr 2016 07:18:45 -0300 Subject: [PATCH 02/10] more translation --- chapters/02-componentes/2c-alerts.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/chapters/02-componentes/2c-alerts.md b/chapters/02-componentes/2c-alerts.md index 7c32dda..61da9e8 100644 --- a/chapters/02-componentes/2c-alerts.md +++ b/chapters/02-componentes/2c-alerts.md @@ -4,7 +4,7 @@ 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. +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 intensos, 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. @@ -18,12 +18,12 @@ 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. +Alerts 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 notificaçã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, apenas aceitou o seu pedido de amizade!', + subTitle: 'Seu amigo, Obi Wan Kenobi, aceitou o seu pedido de amizade!', buttons: ['Ok'] }); this.nav.present(alert); @@ -33,7 +33,7 @@ Alerts básicos, são geralmente usados ​​para notificar o usuário sobre no ### 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. +Prompts oferecem aos usuários uma maneira de dados ou informações de entrada. Por exemplo, muitas vezes Alerts Prompt serão utilizados 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', @@ -48,13 +48,13 @@ Prompts oferecem aos usuários uma maneira de dados ou informações de entrada. { text: 'Cancel', handler: data => { - console.log('Cancel clicked'); + console.log('Cancelar clique'); } }, { text: 'Save', handler: data => { - console.log('Saved clicked'); + console.log('Salvar clique'); } } ] From 93497d6da6bfbae1301152c6c390e853ac4201d4 Mon Sep 17 00:00:00 2001 From: Carloshpdoc Date: Mon, 11 Apr 2016 12:01:51 -0300 Subject: [PATCH 03/10] excluded to enter another file --- chapters/02-componentes/2c-alerts.md | 85 ---------------------------- 1 file changed, 85 deletions(-) delete mode 100644 chapters/02-componentes/2c-alerts.md diff --git a/chapters/02-componentes/2c-alerts.md b/chapters/02-componentes/2c-alerts.md deleted file mode 100644 index 61da9e8..0000000 --- a/chapters/02-componentes/2c-alerts.md +++ /dev/null @@ -1,85 +0,0 @@ -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 intensos, 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 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 notificaçã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ão utilizados 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: 'title', - placeholder: 'Title' - }, - ], - buttons: [ - { - text: 'Cancel', - handler: data => { - console.log('Cancelar clique'); - } - }, - { - text: 'Save', - handler: data => { - console.log('Salvar clique'); - } - } - ] - }); - -### 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 do confirmation alert, é verificando se um usuário quer excluir ou remover um contato de sua lista de endereços. - - let confirm = Alert.create({ - title: 'Utilize 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: 'Disagree', - handler: () => { - console.log('Disagree clicked'); - } - }, - { - text: 'Agree', - handler: () => { - console.log('Agree clicked'); - } - } - ] - }); - From 7f9198b74db655b2af1e98799c18317361712ae7 Mon Sep 17 00:00:00 2001 From: Carloshpdoc Date: Mon, 11 Apr 2016 12:07:15 -0300 Subject: [PATCH 04/10] Alteration to include modifications in chapters "alerts". --- README.md | 2 +- chapters/02-componentes/2c-alertas.md | 146 ++++++++++++++++++++++++++ chapters/02-componentes/README.md | 4 +- 3 files changed, 149 insertions(+), 3 deletions(-) create mode 100644 chapters/02-componentes/2c-alertas.md diff --git a/README.md b/README.md index c25287d..88fbde4 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/chapters/02-componentes/2c-alertas.md b/chapters/02-componentes/2c-alertas.md new file mode 100644 index 0000000..0c0bc14 --- /dev/null +++ b/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; + } + }); +} +``` diff --git a/chapters/02-componentes/README.md b/chapters/02-componentes/README.md index 1df8e56..b8d921c 100644 --- a/chapters/02-componentes/README.md +++ b/chapters/02-componentes/README.md @@ -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 @@ -20,4 +20,4 @@ 2.19 > Slides 2.20 > Tabs 2.21 > Toggle -2.22 > Toolbar \ No newline at end of file +2.22 > Toolbar From 81733beebe70c1dfa5f74ed58e7d5480b1df5315 Mon Sep 17 00:00:00 2001 From: Carloshpdoc Date: Mon, 11 Apr 2016 12:54:37 -0300 Subject: [PATCH 05/10] translation badges --- README.md | 2 +- chapters/02-componentes/2d-badges.md | 16 ++++++++++++++++ chapters/02-componentes/README.md | 2 +- 3 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 chapters/02-componentes/2d-badges.md diff --git a/README.md b/README.md index 88fbde4..2a360e0 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ 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-alertas.md) -2.4 Badges +2.4 [Badges](chapters/02-componentes/2d-badges.md) 2.5 Buttons 2.6 Cards 2.7 Checkbox diff --git a/chapters/02-componentes/2d-badges.md b/chapters/02-componentes/2d-badges.md new file mode 100644 index 0000000..800ac45 --- /dev/null +++ b/chapters/02-componentes/2d-badges.md @@ -0,0 +1,16 @@ +# Badges (crachás) + +Badges são pequenos componentes que tipicamente, informam valor numérico para o usuário. Eles normalmente são utilizados dentro de um item. + + +### Uso Básico + + + + Followers + 260k + + +Badges também podem receber qualquer atributo de cor: + + \ No newline at end of file diff --git a/chapters/02-componentes/README.md b/chapters/02-componentes/README.md index b8d921c..28a7657 100644 --- a/chapters/02-componentes/README.md +++ b/chapters/02-componentes/README.md @@ -2,7 +2,7 @@ 2.1 [Overview](2a-orverview.md) 2.2 [Action Sheets](2b-action-sheets.md) 2.3 [Alerts](2c-alertas.md) -2.4 > Badges +2.4 [Badges](2c-badges.md) 2.5 > Buttons 2.6 > Cards 2.7 > Checkbox From 8fa54aa897ce30e7f8835517def99f6fc5c1c734 Mon Sep 17 00:00:00 2001 From: Carloshpdoc Date: Mon, 11 Apr 2016 12:56:25 -0300 Subject: [PATCH 06/10] translation word "Followers" --- chapters/02-componentes/2d-badges.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/chapters/02-componentes/2d-badges.md b/chapters/02-componentes/2d-badges.md index 800ac45..8a62328 100644 --- a/chapters/02-componentes/2d-badges.md +++ b/chapters/02-componentes/2d-badges.md @@ -7,7 +7,7 @@ Badges são pequenos componentes que tipicamente, informam valor numérico para - Followers + Seguidores 260k From f8c83628d35d39d4fc9ed969b4f2cdc18a263fac Mon Sep 17 00:00:00 2001 From: Carloshpdoc Date: Mon, 11 Apr 2016 19:41:32 -0300 Subject: [PATCH 07/10] translation Componentes - chapter 02 - checkbox --- README.md | 2 +- chapters/02-componentes/2g-checkbox.md | 15 +++++++++++++++ chapters/02-componentes/README.md | 2 +- 3 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 chapters/02-componentes/2g-checkbox.md diff --git a/README.md b/README.md index 2a360e0..c8e6446 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ 2.4 [Badges](chapters/02-componentes/2d-badges.md) 2.5 Buttons 2.6 Cards -2.7 Checkbox +2.7 [Checkbox](chapters/02-componentes/2g-checkbox.md) 2.8 Grid 2.9 Icons 2.10 Inputs diff --git a/chapters/02-componentes/2g-checkbox.md b/chapters/02-componentes/2g-checkbox.md new file mode 100644 index 0000000..1702aa1 --- /dev/null +++ b/chapters/02-componentes/2g-checkbox.md @@ -0,0 +1,15 @@ +# Checkbox (caixa de seleção) + +A checkbox é um componente de entrada que contém um valor booleano. Checkboxes no ionic não são diferentes do checkbox HTML. No entanto, como outros componentes do Ionic, checkboxes possuem estilizações diferentes para cada plataforma. Para definir o valor padrão, use o atributo checked(verificado), e o atributo disabled(desativado) para desativar, impedindo o usuário de alterar o valor. + +### Uso Básico + + + Daenerys Targaryen + + + + + Arya Stark + + \ No newline at end of file diff --git a/chapters/02-componentes/README.md b/chapters/02-componentes/README.md index 28a7657..640f8cb 100644 --- a/chapters/02-componentes/README.md +++ b/chapters/02-componentes/README.md @@ -5,7 +5,7 @@ 2.4 [Badges](2c-badges.md) 2.5 > Buttons 2.6 > Cards -2.7 > Checkbox +2.7 [Checkbox](2g-checkbox.md) 2.8 > Grid 2.9 > Icons 2.10 > Inputs From 0aac00e1cb894cc9b1b807931fd45a97c6b6542f Mon Sep 17 00:00:00 2001 From: Carloshpdoc Date: Mon, 18 Apr 2016 13:21:44 -0300 Subject: [PATCH 08/10] spelling corrections --- chapters/02-componentes/2d-badges.md | 4 ++-- chapters/02-componentes/2g-checkbox.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/chapters/02-componentes/2d-badges.md b/chapters/02-componentes/2d-badges.md index 8a62328..186f8b8 100644 --- a/chapters/02-componentes/2d-badges.md +++ b/chapters/02-componentes/2d-badges.md @@ -1,6 +1,6 @@ -# Badges (crachás) +# Badges -Badges são pequenos componentes que tipicamente, informam valor numérico para o usuário. Eles normalmente são utilizados dentro de um item. +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 diff --git a/chapters/02-componentes/2g-checkbox.md b/chapters/02-componentes/2g-checkbox.md index 1702aa1..89430a5 100644 --- a/chapters/02-componentes/2g-checkbox.md +++ b/chapters/02-componentes/2g-checkbox.md @@ -1,6 +1,6 @@ # Checkbox (caixa de seleção) -A checkbox é um componente de entrada que contém um valor booleano. Checkboxes no ionic não são diferentes do checkbox HTML. No entanto, como outros componentes do Ionic, checkboxes possuem estilizações diferentes para cada plataforma. Para definir o valor padrão, use o atributo checked(verificado), e o atributo disabled(desativado) para desativar, impedindo o usuário de alterar o valor. +A checkbox é um componente de entrada que contém um valor booleano. Checkboxes no Ionic não são diferentes do checkbox HTML. No entanto, como outros componentes do Ionic, checkboxes possuem estilizações diferentes para cada plataforma. Para definir o valor padrão, use o atributo checked(verificado), e o atributo disabled para desativar, impedindo o usuário de alterar o valor. ### Uso Básico From 1580180d5d947dd7debd69cc8839a4452bf6d4f5 Mon Sep 17 00:00:00 2001 From: Carloshpdoc Date: Mon, 18 Apr 2016 13:49:11 -0300 Subject: [PATCH 09/10] corrections at the request of the juarezpaf. file 2c-alerts.md --- chapters/02-componentes/2c-alerts.md | 85 +++++++++++++++++++++++----- 1 file changed, 70 insertions(+), 15 deletions(-) diff --git a/chapters/02-componentes/2c-alerts.md b/chapters/02-componentes/2c-alerts.md index 7c32dda..ab1d75b 100644 --- a/chapters/02-componentes/2c-alerts.md +++ b/chapters/02-componentes/2c-alerts.md @@ -23,7 +23,7 @@ Alerts básicos, são geralmente usados ​​para notificar o usuário sobre no doAlert() { let alert = Alert.create({ title: 'Amigo Novo!', - subTitle: 'Seu amigo, Obi Wan Kenobi, apenas aceitou o seu pedido de amizade!', + subTitle: 'Seu amigo, Obi Wan Kenobi, aceitou o seu pedido de amizade!', buttons: ['Ok'] }); this.nav.present(alert); @@ -37,24 +37,24 @@ Prompts oferecem aos usuários uma maneira de dados ou informações de entrada. let prompt = Alert.create({ title: 'Login', - message: "Digite um nome para este novo álbum, que você está tão interessado em adicionar", + message: 'Digite um nome para este novo álbum, que você está tão interessado em adicionar', inputs: [ { - name: 'title', - placeholder: 'Title' + name: 'título', + placeholder: 'título' }, ], buttons: [ { - text: 'Cancel', + text: 'Cancelar', handler: data => { - console.log('Cancel clicked'); + console.log('Cancelar cliclado'); } }, { - text: 'Save', + text: 'Salvar', handler: data => { - console.log('Saved clicked'); + console.log('Salvar cliclado'); } } ] @@ -62,24 +62,79 @@ Prompts oferecem aos usuários uma maneira de dados ou informações de entrada. ### 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 do confirmation alert, é verificando se um usuário quer excluir ou remover um contato de sua lista de endereços. +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: 'Utilize este sabre de luz?', - message: 'Você concorda em usar este sabre de luz para fazer o bem através da galáxia intergaláctica?', + 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: 'Disagree', + text: 'Discordar', handler: () => { - console.log('Disagree clicked'); + console.log('Discordar clicado'); } }, { - text: 'Agree', + text: 'Concordo', handler: () => { - console.log('Agree clicked'); + 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; + } + }); + } \ No newline at end of file From d796e0e348087bf0f1ea081cc5817d55c66cb827 Mon Sep 17 00:00:00 2001 From: Carloshpdoc Date: Mon, 8 Aug 2016 11:27:52 -0300 Subject: [PATCH 10/10] Removing the README.md --- README.md | 79 ------------------------------- chapters/02-componentes/README.md | 23 --------- 2 files changed, 102 deletions(-) delete mode 100644 README.md delete mode 100644 chapters/02-componentes/README.md diff --git a/README.md b/README.md deleted file mode 100644 index 18b76f0..0000000 --- a/README.md +++ /dev/null @@ -1,79 +0,0 @@ -# Documentação Ionic 2 - - -## Capítulos - -####1. Introdução -1.1 [Bem vindo](chapters/01-introducao/01a-welcome.md) -1.2 [Instalação](chapters/01-introducao/01b-instalation.md) -1.3 [Tutorial](chapters/01-introducao/01c-tutorial.md) -1.4 [Conceitos de Migração](chapters/01-introducao/01d-migration.md) -1.5 [Conceitos](chapters/01-introducao/01e-core-concepts.md) - -####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.4 [Badges](chapters/02-componentes/2d-badges.md) -2.5 Buttons -2.6 Cards -2.7 [Checkbox](chapters/02-componentes/2g-checkbox.md) -2.8 Grid -2.9 Icons -2.10 Inputs -2.11 Lists -2.12 Menus -2.13 Modals -2.14 Navigation -2.15 Radio -2.16 Searchbar -2.17 Segment -2.18 Select -2.19 Slides -2.20 Tabs -2.21 Toggle -2.22 Toolbar - -####3. Temas -3.1 [Introdução](chapters/03-temas/3a-intro.md) -3.2 [Tematizando seu aplicativo](chapters/03-temas/3b-theming-your-ionic-app.md) -3.3 [Variáveis SASS](chapters/03-temas/3c-sass-variables.md) -3.4 [Estilos das plataformas](chapters/03-temas/3d-platform-vars.md) -3.5 [Sobreescrevendo variáveis do Ionic](chapters/03-temas/3e-overriding-ionic-variables.md) - -####4. CLI -4.1 [Introdução](chapters/04-cli/4a-intro.md) -4.2 [`build`](chapters/04-cli/4b-build.md) -4.3 `emulate` -4.4 `generate` -4.5 `info` -4.6 `platform` -4.7 `run` -4.8 `serve` -4.9 `start` -4.10 `v2` - -####5. [FAQ](chapters/05-faq/01-faq.md) - -####6. API - -####7. Recursos > Resources -7.1 Developer Tips -7.2 Glossário -7.3 Ionicons -7.4 [Editores e IDEs](chapters/07-recursos/07d-editors-and-ides.md) -7.5 Usando NPM - -- *linkar em cada capítulo o caminho correto para o arquivo.md* - - -## Contribuindo com a tradução - -[Aqui](https://github.com/IonicBrazil/ionic2-docs/blob/master/CONTRIBUTING.md) você pode visualizar o nosso guia de contribuição. - -Além disso, confira nosso [glossário](https://github.com/IonicBrazil/ionic2-docs/blob/master/glossario.md) para termos técnicos em inglês e suas traduções PT-BR. - - -## Informações - -* Documentação em [inglês](http://ionicframework.com/docs/v2/) diff --git a/chapters/02-componentes/README.md b/chapters/02-componentes/README.md deleted file mode 100644 index 650a13f..0000000 --- a/chapters/02-componentes/README.md +++ /dev/null @@ -1,23 +0,0 @@ -2. Componentes -2.1 [Overview](2a-orverview.md) -2.2 [Action Sheets](2b-action-sheets.md) -2.3 [Alerts](2c-alerts.md) -2.4 [Badges](2c-badges.md) -2.5 > Buttons -2.6 > Cards -2.7 [Checkbox](2g-checkbox.md) -2.8 > Grid -2.9 > Icons -2.10 > Inputs -2.11 > Lists -2.12 > Menus -2.13 > Modals -2.14 > Navigation -2.15 > Radio -2.16 > Searchbar -2.17 > Segment -2.18 > Select -2.19 > Slides -2.20 > Tabs -2.21 > Toggle -2.22 > Toolbar