From 4969185a554ce8a2f19fa1bad35f2039f2f8eb51 Mon Sep 17 00:00:00 2001 From: Pedro Augusto de Barros Date: Fri, 29 Apr 2016 10:55:18 -0300 Subject: [PATCH] Buttons Translation - Finished --- README.md | 110 ++++++-------------- chapters/02-componentes/2e-botao.md | 50 +++++++++ chapters/02-componentes/2e-botoes.md | 147 +++++++++++++++++++++++++++ 3 files changed, 229 insertions(+), 78 deletions(-) create mode 100644 chapters/02-componentes/2e-botao.md create mode 100644 chapters/02-componentes/2e-botoes.md diff --git a/README.md b/README.md index f89323c..5b62e26 100644 --- a/README.md +++ b/README.md @@ -3,9 +3,6 @@ ## Capítulos -####0. Home -0.1 [Home](/chapters/00-home) - ####1. Introdução 1.1 [Bem vindo](chapters/01-introducao/01a-welcome.md) 1.2 [Instalação](chapters/01-introducao/01b-instalation.md) @@ -18,7 +15,7 @@ 2.2 [Action Sheets](chapters/02-componentes/2b-action-sheets.md) 2.3 Alerts 2.4 Badges -2.5 Buttons +2.5 [Buttons](chapters/02-componentes/2e-botoes.md) 2.6 Cards 2.7 Checkbox 2.8 Grid @@ -35,80 +32,37 @@ 2.19 Slides 2.20 Tabs 2.21 Toggle -2.22 Toolbar - -####3. Nativo -3.1 [ActionSheet](chapters/03-nativo/3a-actionSheet.md) -3.2 [AppAvailability](chapters/03-nativo/3b-appAvailability.md) -3.3 [AppRate](chapters/03-nativo/3c-appRate.md) -3.4 [AppVersion](chapters/03-nativo/3d-appVersion.md) -3.5 Badge -3.6 BarCodeScanner -3.7 [Base64ToGallery](chapters/03-nativo/3g-base64togallery.md) -3.8 [BatteryStatus](chapters/03-nativo/3h-batteryStatus.md) -3.9 BLE -3.10 Calendar -3.11 Camera -3.12 Clipboard -3.13 Connection -3.14 Contats -3.15 DatePicker -3.16 DBMeter -3.17 Device -3.18 DeviceMotion -3.19 DeviceOrientation -3.20 Dialogs -3.21 Facebook -3.22 File -3.23 Flashlight -3.24 Geolocation -3.25 Globalization -3.26 Hotspot -3.27 ImagePicker -3.28 InAppBrowser -3.29 Keyboard -3.30 LaunchNavigator -3.31 LocalNotifications -3.32 Network -3.33 [Push](chapters/03-nativo/3v-push.md) -3.34 SMS -3.35 SocialSharing -3.36 SpinnerDialog -3.37 SplashScreen -3.38 StatusBar -3.39 Toast -3.40 TouchID -3.41 Vibration - -####4. Temas -4.1 [Introdução](chapters/04-temas/4a-intro.md) -4.2 [Tematizando seu aplicativo](chapters/04-temas/4b-theming-your-ionic-app.md) -4.3 [Variáveis SASS](chapters/04-temas/4c-sass-variables.md) -4.4 [Estilos das plataformas](chapters/04-temas/4d-platform-vars.md) -4.5 [Sobreescrevendo variáveis do Ionic](chapters/04-temas/4e-overriding-ionic-variables.md) - -####5. CLI -5.1 [Introdução](chapters/05-cli/5a-intro.md) -5.2 [`build`](chapters/05-cli/5b-build.md) -5.3 [`emulate`](chapters/05-cli/5c-emulate.md) -5.4 [`generate`](chapters/05-cli/5d-generate.md) -5.5 [`info`](chapters/05-cli/5e-info.md) -5.6 [`platform`](chapters/05-cli/5f-platform.md) -5.7 `run` -5.8 `serve` -5.9 `start` -5.10 `v2` - -####6. [FAQ](chapters/06-faq/01-faq.md) - -####7. API - -####8. Recursos > Resources -8.1 Developer Tips -8.2 [Glossário](chapters/08-recursos/08b-ionic-developer-glossary.md) -8.3 Ionicons -8.4 [Editores e IDEs](chapters/08-recursos/08d-editors-and-ides.md) -8.5 [Usando NPM](chapters/08-recursos/08e-using-npm.md) +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* diff --git a/chapters/02-componentes/2e-botao.md b/chapters/02-componentes/2e-botao.md new file mode 100644 index 0000000..15f423c --- /dev/null +++ b/chapters/02-componentes/2e-botao.md @@ -0,0 +1,50 @@ + +# Botão +Os botões são componentes simples no Ionic, podem ser compostos por texto, ícone, ou ambos e podem ser modificados com uma variedade de atributos. + +## Componente +``` +button:not([ion-item]),[button] +``` + + +## Atributos + +Atributo | Descrição +------------- | ------------- +outline | Um botão transparente com uma borda. +clear | Um botão transparente sem uma borda. +round | Um botão com cantos arredondados. +block | Um botão que preenche seu contêiner pai com um border-radius. +full | Um botão que enche seu contêiner-pai sem um border-radius ou bordas à esquerda / direita. +small | Um botão com tamanho pequeno. +large | Um botão com tamanho grande. +disabled | Um botão desativado. +fab | Um botão de ação flutuante. +fab-left | Coloque um botão fab para a esquerda. +fab-right | Coloque um botão fab para a direita. +fab-center | Coloque um botão fab para o centro. +fab-top | Coloque um botão fab em direção ao topo. +fab-bottom | Coloque um botão fab para o fundo. +color | Dinamicamente defini qual a cor predefinida que o botão deve utilizar (e.g. primary, secondary, danger, etc). + +## Propriedades + + +Attr | Type | Details +------------- | -------------| ------------- +category | string | Categoria do Botão. +large | string | Botão grande. +small | string | Botão pequeno. +default | string | Botão padrão +outline | string | Botão transparente com borda. +clear | string | Botão transparente sem borda. +solid | string | Força um botão sólido. Útil para os botões dentro de um item. +round | string | Um botão com bordas redondas. +block | string | Um botão que preenche seu contêiner pai com um border-radius. +full | string | Um botão que preenche seu contêiner pai sem um border-radius ou bordas à esquerda / direita. +color | string | Dinamicamente defini qual a cor predefinida que o botão deve utilizar (por exemplo, primary, secondary, danger, etc). + +## Relacionados + +[Documentação do Componente Botão](2e-botoes.md) diff --git a/chapters/02-componentes/2e-botoes.md b/chapters/02-componentes/2e-botoes.md new file mode 100644 index 0000000..06d4114 --- /dev/null +++ b/chapters/02-componentes/2e-botoes.md @@ -0,0 +1,147 @@ +# Botões + +Os botões são um meio essencial para interagir e navegar através de um aplicativo, estes devem comunicar claramente que uma ação ocorrerá após o usuário tocá-los. Os botões são componentes simples no Ionic, podem ser compostos por texto, ícone, ou ambos e podem ser modificados com uma variedade de atributos. + +## Conteúdo +* [Estilo Padrão]() +* [Estilo Contorno]() +* [Estilo Limpar]() +* [Redondos]() +* [Quadrados]() +* [Botões Completos]() +* [Tamanhos de botões]() +* [Botões com icones]() +* [Botões de ações flutuante]() +* [Botões em Componentes]() + + +## Utilização básica: +``` ts + +``` + +A propriedade primary define a cor do botão. O Ionic inclui uma série de cores padrões que podem serem facilmente substituídas: + +``` ts + + + + + +``` + + +## Estilo Contorno +Para utilizar o estilo contorno em um botão, adicione a propriedade outline: + +``` ts + + + + + +``` + +## Estilo Limpo +Para utilizar o estilo limpo em um botão, adicione a propriedade clear: + +``` ts + + + + + +``` + +## Botões Rendondos +Para criar botões com bordas arredondadas, adicione a propriedade round: + +``` ts + + + + + +``` + +## Botões de bloco +Adicionando um bloco para um botão fará com que o botão use a largura 100% do seu pai. Ele também irá adicionar display: block para o botão: + +``` ts + +``` + + +## Botões Cheios +Adicionando a propriedade full para um botão fará com que o botão tire 100% da largura do seu pai. No entanto, ele também irá remover as bordas da esquerda e direita do botão. Este modelo é útil quando o botão deve-se esticar ao longo de toda a largura da tela. + +``` ts + +``` + +## Tamanho de Botões +Adicione o atributo large para fazer um botão maior ou small para torná-lo menor: + +``` ts + + + +``` + +## Botões com Ícones +Para adicionar ícones em um botão, adicione um componente de ícone dentro dele: + +``` ts + + + + + + + + +``` + +## Botões de Ação Flutuante +Ao adicionar a propriedade fab a um botão irá transformá-lo em um botão de ação flutuante. Este é um botão estilizado com material design que se destina a chamar atenção do usuário a uma ação específica. Botões Fab são posicionados de forma absoluta e seu posicionamento pode ser controlado pela adição de atributos como fab-top e fab-left. Veja a especificação da [API de botões](2e-botao.md) para uma lista completa de atributos. + +``` ts + +``` + +## Botões em Componentes +Embora botões possam ser utilizados por conta própria, eles podem facilmente serem utilizados dentro de outros componentes. Por exemplo, os botões podem ser adicionados a um item de lista ou uma barra de navegação. + +``` ts + + + + + + + + + + + + + Left Icon Button + + + +```