NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
Tutorial do Playground

O Playground do NativeScript é um lugar na nuvem onde você pode apenas brincar com NativeScript e Vue.js no seu navegador até descobrir o básico. Acesse o link e comece arrastando e soltando os componentes na parte de códigos.

Você pode trabalhar no Playground por quanto tempo quiser. Pode usar para ter um gostinho do desenvolvimento com NativeScript ou desenvolver todo o seu projeto. Contudo, quando você estiver pronto para publicar o seu aplicativo, precisará ir para a parte mais avançada e instalar as ferramentas do NativeScript localmente e então escolher um template para começar.

Essa página consiste em duas partes:

Parte 1: Familiarizando-se com o Playground

Acesse esse link para ter um editor de código simples na nuvem, onde um template muito básico de NativeScript + Vue.js é pré-carregado para você.

DICA: Veja as tarefas de exemplo para o Playground para ter ideias sobre como começar no Playground.

Antes de começar

playground welcome screen

Se é sua primeira vez aqui, o Playground solicita que você instale alguns aplicativos mobile — o NativeScript Playground e o NativeScript Preview. Juntos eles deixam você ver o seu código alterado aplicado em tempo real no aparelho. Não é necessário nenhum building e bundling.

Você pode ignorar essa parte, mas sem ela você perderá a maior parte da diversão e excitação de brincar com Vue.js e NativeScript.

Mantenha os aplicativos rodando enquanto você experimenta o código.

Conhecendo o ambiente

A barra lateral esquerda fornece um explorador de arquivos e um painel de Componentes. A maior parte do seu esforço no aplicativo acontecerá no app.js e app.css, que contém a funcionalidade e os estilos do aplicativo, respectivamente. Não há necessidade de se aprofundar em outros arquivos agora.

O painel de Componentes fornece um acesso rápido para códigos pré-configurados para todos os componentes de UI disponíveis do NativeScript.

Na parte superior da página, você pode enviar as alterações para aplicativos de visualização, salvar e fazer download do seu código.

A parte inferior da página é o seu melhor amigo, fornecendo relatórios de erros em tempo real e logs do aparelho.

Arraste e solte para codificar

Clique no componente do painel de Componentes e arraste para o editor de código em algum lugar do bloco do template. Soltando o botão do mouse, ele insere o código pré-escrito de exemplo para o respectivo componente. Quaisquer métodos que o acompanham (como acontece no botão ou toque do item) são automaticamente adicionados no topo da página antes do bloco template.

DICA: Use a busca do painel de Componentes para achar rapidamente o elemento que você quer usar. A busca funciona somente com o título do componente e não com o nome real usado no código. Por exemplo: a busca acha text field mas não textfield.

Para a maioria dos componentes de UI funcionar, você precisa soltá-los dentro do bloco <Page>, preferencialmente dentro do componente layout. Os layouts informam ao seu aplicativo como posicionar os componentes de UI na tela.

NOTA: Nesse momento, não há nada que te impeça de deixar o código em um lugar que irá causar a falha do aplicativo ou o simples não carregamento. Nesses casos, verifique as abas Errors e Device Logs para mais informações.

Confira em tempo real

Depois que você colocar o seu código em um lugar válido, clique em Preview (ou Ctrl+S ou Cmd+S) e veja o seu aplicativo atualizar na tela do seu aparelho em instantes.

Em alguns casos, quando você interage com o aplicativo, ele fechará inesperadamente. Basta abrí-lo novamente e inspecionar o relatório de falha.

Se em qualquer momento você parar de ver as alterações em seu aparelho, clique no QR code e redigitalize o QR code com o aplicativo Playground.

Configure seu código

Então o componente é executado e exibido na tela. Você está animado, mas quer fazer o seu próprio. Apague o código padrão sugerido pelo Playground. Ajuste o tamanho e labels, remova ou adicione elementos.

Vá para o app.css e altere um pouco o estilo. Experimente mudar cores e tamanho de fontes.

Parte 2: Construindo um aplicativo

Se você quer explorar o Playground do NativeScript, você pode começar criando um simples aplicativo de to-do com os seguintes requisitos:

  • Design básico

    • Layout com duas abas
    • Uma aba exibe tarefas ativas e permite adicionar novas tarefas
    • A segunda aba lista as tarefas concluídas
  • Funcionalidade básica

    • Adicionar tarefas: Usuários podem adicionar tarefas como texto
    • Ver tarefas: Tarefas recentemente adicionadas são listadas como ativas e podem ser tocadas
    • Tarefas completas: Tocar em uma tarefa completa e ativa e mover para outra aba
    • Apagar tarefas: Tocar em um botão "X" remove tarefas ativas ou concluídas
  • Design avançado

    • Input e botão para adicionar tarefas são estilizados
    • Abas são estilizadas
    • Tarefas ativas são estilizadas
    • Tarefas completas são estilizadas

DICA: Todas as seções desse tutorial contêm alguns conceitos básicos do NativeScript e subseções de requisitos de implementação. Você pode pular a subseção básica e ir direto para a implementação para uma abordagem mais prática.

Template limpo do Vue.js

Todo o esforço do desenvolvimento acontecerá no app.js e app.css, que contém a funcionalidade e os estilos do aplicativo, respectivamente.

O app.js criado recentemente para o seu projeto Vue.js, consiste em uma declaração simples de template sem nenhuma funcionalidade. Conforme você arrasta e solta os componentes de interface no aplicativo, o Playground também adiciona um bloco de methods e preenche com código que contém funcionalidade real do aplicativo.

No app.js, você trabalhará no bloco template para o design da interface do usuário ou no bloco methods para construir a funcionalidade do aplicativo. O bloco template requer XML compatível com NativeScript. O bloco methods aceita códigos JavaScript Vue.js e NativeScript.

Design básico

Progresso da seção

Veja como o seu aplicativo ficará no início e no final dessa seção.

Tela inicialAba 1Aba 2
Bare Vue.js templateFirst tabSecond tab

Conceitos básicos do NativeScript

O elemento <Page> é o elemento de nível superior da interface de todos os aplicativos NativeScript+Vue.js. Todos os outros elementos são aninhados dentro.

O elemento <ActionBar> exibe uma barra de ação para o <Page>. Um <Page> não pode conter mais que um <ActionBar>.

Tipicamente, depois do <ActionBar>, você terá componentes de navegação (como um menu drawer ou uma view de aba) ou de layout. Estes elementos controlam o layout do seu aplicativo e deixa que você determine onde colocar outros elementos de interface.

Implementação de requisitos

Use o componente <TabView> para criar um aplicativo de duas abas.

  1. Remova o bloco padrão <ScrollView> e todo o conteúdo que vem com o template.
    Os componentes <ScrollView> são containers de nível superior do layout para conteúdo com rolagem.
  2. Arraste e solte o componente <TabView> em seu lugar.
    O Playground não aplica formatação de código e não cuida da identação quando inserido novos componentes.
  3. Configure a altura do <TabView> para preencher a tela (defina para 100%).
    Em um aparelho iOS, a altura padrão faz com que as abas sejam exibidas em algum lugar no meio da tela.
  4. Altere os títulos dos elementos <TabViewItem> e o conteúdo para refletir sua finalidade.
    Nesse ponto, o texto do conteúdo das abas são exibidos em um componente <Label> sem estilo e formação. Aplique a propriedade textWrap="true" aos repectivos componentes <Label> para melhorar a visualização do texto.
new Vue({

  template: `
    <Page class="page">
      <ActionBar title="My Tasks" class="action-bar" />

      <TabView height="100%">
        <TabViewItem title="To Do">
          <Label text="This tab will list active tasks and will let users add new tasks." textWrap="true" />
        </TabViewItem>
        <TabViewItem title="Completed">
          <Label text="This tab will list completed tasks for tracking." textWrap="true" />
        </TabViewItem>
      </TabView>

    </Page>
  `,

}).$start();

Funcionalidade básica: Adicionar tarefas

Progresso da seção

Veja como o seu aplicativo ficará no início e no final dessa seção.

Tela inicialAba 1 - Sem tarefasAba 1 - Adicionar tarefas
First tab before changesFirst tab without any tasksFirst tab with added tasks

Alguns princípios básicos do NativeScript

Os componentes de layout deixam você organizar vários widgets de UI para o seu aplicativo. Sempre que precisar adicionar mais de um widget na tela do aplicativo, provavelmente usará as opções de layout disponíveis. O <StackLayout> e <GridLayout> são básicos, mas opções versáteis, deixando você posicionar os elementos na vertical ou em um layout semelhante a uma tabela, repectivamente. Enquanto o <StackLayout> lida com elementos em sua sequência natural, o <GridLayout> deixa você escolher o posicionamento exato dos seus elementos no grid.

Implementação de requisitos

Use o <GridLayout> para organizar um <TextField> e um <Button> na página. Os dois últimos formam a funcionalidade do aplicativo.

Use o <ListView> para exibir as tarefas abaixo do campo.

  1. Delete o componente <Label> do começo do primeiro bloco <TabViewItem> para a primeira aba.
  2. Arraste e solte um componente <StackLayout> para dentro do bloco <TabViewItem> para a primeira aba.
    O código padrão cria uma pilha vertical colorida.
  3. Delete todos os componentes <Label> do bloco <StackLayout>.
  4. Arraste e solte um componente <GridLayout> dentro do bloco <StackLayout> para a primeira aba.
    O código padrão cria uma tabela colorida que mostra como posicionar elementos e mesclar célular a grade.
  5. Delete todos os componentes <Label> do bloco <GridLayout>.
  6. Configure o <StackLayout>.

    • Remova a cor de fundo.
    • Defina a largura e a altura.
  7. Configure o <GridLayout>.

    • Define a grade para ter 2 colunas e uma linha.
    • Defina a largura da grade para 100% de modo que ela tenha a largura da tela.
    • Remova quaisquer configurações adicionais para a grade.
  8. Arraste e solte um <TextField> e um <Button> dentro do bloco <GridLayout>.
    O Playground adiciona código JavaScript ao seu código pela primeira vez. Note os blocos data() e methods adicionados acima do bloco template. Nos próximos passos da implementação, você precisará adicionar código a essas seções para criar algumas funcionalidas ao aplicativo.
  9. Arraste e solte um <ListView> abaixo da grade.
    O código padrão cria uma lista com nomes de países e icones de bandeiras.
  10. Configure o posicionamento dos elementos dentro da grade.

    • Deina o <TextField> para ficar na primeira coluna e na primeira linha.
    • Defina o <Button> para ficar na segunda coluna e na primeira linha.
  11. Remova o código de exemplo do <TextField> e do <ListView>. Defina uma altura para <ListView>.
  12. Registre as novas tarefas no console.
  13. Adiciona as tarefas recém-adicionadas dentro de um array de tarefas. Use unshift para colocar novos itens no top da página.
  14. Limpe as caixas de textos após a entrada.
  15. Liste o nome das tarefas na tela.

No final desta etapa, seu código deve parecer com este exemplo:

const Vue = require("nativescript-vue");

new Vue({
  data() {
    return {
      todos: [],
      textFieldValue: "",
    }
  },
  methods: {
    onItemTap(args) {
      console.log('Task with index: ' + args.index + ' tapped'); // Registra log das tarefas tocadas no console para debug.
    },
    onButtonTap() {
      console.log("New task added: " + this.textFieldValue + "."); // Registra log da nova tarefa no console para debug.
      this.todos.unshift({ name: this.textFieldValue }); // Adiciona a nova tarefa no array `todos[]`. Novas tarefas são imediatamente exibidas na tela.
      this.textFieldValue = ""; // Limpa o input de texto, desta forma o usuário está apto a adicionar novas tarefas imediatamente.
    },
  },


  template: `
    <Page class="page">
      <ActionBar title="My Tasks" class="action-bar" />
      
      <TabView height="100%">
        <TabViewItem title="To Do">
          <!-- Posiciona uma caixa de texto, um botão e uma lista de tarefas na grade. -->
          <StackLayout orientation="vertical" width="100%" height="100%">
            <GridLayout columns="2*,*" rows="auto" width="100%">
              <TextField row="0" col="0" v-model="textFieldValue" hint="Type new task..." editable="true" @returnPress="onButtonTap" /> <!-- Configura o input de texto e garante que pressionar o Return no teclado produz o mesmo resultado que tocar no botão. -->
              <Button row="0" col="1" text="Add task" @tap="onButtonTap" />
            </GridLayout>
            <ListView for="todo in todos" @itemTap="onItemTap" height="100%"> <!-- Certifique-se de definir uma altura ou sua lista não será exibida no iOS. -->
              <v-template>
                <Label :text="todo.name" />
              </v-template>
            </ListView>
          </StackLayout> 
        </TabViewItem>

        <TabViewItem title="Completed">
          <Label text="This tab will list completed tasks for tracking." textWrap="true" />
        </TabViewItem>
      </TabView>

    </Page>
  `,

}).$start();

Funcionalidades básicas: Ver, completar e deletar tarefas da aba To Do

Progresso da seção

Veja como seu app vai parecer no começo e no fim desta seção.

Tab 1 - Tarefas adicionadasTab 1 - Item tocadoTab 2 - Tarefas concluídas
First tab with added tasksAction dialog toggledSecond tab with completed tasks

Alguns princípios básicos do NativeScript

Pronto para uso, o componente <ListView> detecta um gesto de toque para cada item e emite um evento para ele. O evento possui informações sobre o índice do item do array tocado e o próprio item do array. Para permitir que o usuário escolha o resultado do gesto de toque e expandir a funcionalidade do seu aplicativo, você pode conectar um diálogo ao evento.

dialogs é um módulo disponível globalmente que fornece vários tipos de diálogos configuráveis para o aplicativos: alert, action, prompt, login, confirmation. Esta implementação depende do action() para permitir os usuários escolherem se eles querem marcar uma tarefa como completa ou deleta-la da sua lista de tarefas ativas.

Implementação dos requisitos

  1. Em um segundo bloco <TabViewItem>, arraste e solte um elemento <ListView>, limpe seu conteúdo e defina uma altura para ele.

  2. No nosso recém-adicionado elemento <ListView> mostre os itens de um array de tarefas completas (dones).

    <ListView for="done in dones" @tap="onDoneTap" height="100%"> <!-- Certifique-se de definir uma altura ou sua lista não será exibida no iOS. -->
      <v-template>
        <Label :text="done.name" />
      </v-template>
    </ListView>
  3. Modifique o método onItemTap.

  • Método mostra um diálogo action().

  • Método registra uma seleção do usuário no console para debugging.

  • Baseado na seleção do usuário, o método move os elementos do array todos para o array dones, deleta os elementos do array todos ou descarta o diálogo. Use splice() para evitar deixar "buracos" no array, e unshift() para ter certeza que as tarefas recentes são mostradas no topo.

    onItemTap(args) {
        action('What do you want to do with this task?', 'Cancel', ['Mark completed', 'Delete forever'])
          .then(result => {
            console.log(result); // Registra as opções escolhidas para debugging.
            switch (result) {
              case 'Mark completed':
                this.dones.unshift(args.item); // Coloca a tarefa ativa tocada no topo de tarefas completadas.
                this.todos.splice(args.index, 1); // Remove a tarefa ativa tocada.
                break;
              case 'Delete forever':
                this.todos.splice(args.index, 1); // Remove a tarefa ativa tocada.
                break;
              case 'Cancel' || undefined: // Descarta o diálogo.
                break;
            }
        }) 
      },

No final desta etapa, seu código deve parecer com este exemplo:

const Vue = require("nativescript-vue");

new Vue({
  data() {
    return {
      todos: [],
      textFieldValue: "",
    }
  },
  methods: {
    onItemTap(args) {
      action('What do you want to do with this task?', 'Cancel', ['Mark completed', 'Delete forever'])
        .then(result => {
          console.log(result); // Registra as opções escolhidas para debugging.
          switch (result) {
            case 'Mark completed':
              this.dones.unshift(args.item); // Coloca a tarefa ativa tocada no topo de tarefas completadas.
              this.todos.splice(args.index, 1); // Remove a tarefa ativa tocada.
              break;
            case 'Delete forever':
              this.todos.splice(args.index, 1); // Remove a tarefa ativa tocada.
              break;
            case 'Cancel' || undefined: // Descarta o diálogo.
              break;
          }
      }) 
    },
    onButtonTap() {
      console.log("New task added: " + this.textFieldValue + "."); // Registra log da nova tarefa no console para debug.
      this.todos.unshift({ name: this.textFieldValue }); // Adiciona a nova tarefa no array `todos[]`. Novas tarefas são imediatamente exibidas na tela.
      this.textFieldValue = ""; // Limpa o input de texto, desta forma o usuário está apto a adicionar novas tarefas imediatamente.
    },
  },


  template: `
    <Page class="page">
      <ActionBar title="My Tasks" class="action-bar" />
      
      <TabView height="100%">
        <TabViewItem title="To Do">
          <!-- Posiciona uma caixa de texto, um botão e uma lista de tarefas na grade. -->
          <StackLayout orientation="vertical" width="100%" height="100%">
            <GridLayout columns="2*,*" rows="auto" width="100%">
              <TextField row="0" col="0" v-model="textFieldValue" hint="Type new task..." editable="true" @returnPress="onButtonTap" /> <!-- Configura o input de texto e garante que pressionar o Return no teclado produz o mesmo resultado que tocar no botão. -->
              <Button row="0" col="1" text="Add task" @tap="onButtonTap" />
            </GridLayout>
            <ListView for="todo in todos" @itemTap="onItemTap" height="100%"> <!-- Certifique-se de definir uma altura ou sua lista não será exibida no iOS. -->
              <v-template>
                <Label :text="todo.name" />
              </v-template>
            </ListView>
          </StackLayout> 
        </TabViewItem>

        <TabViewItem title="Completed">
          <ListView for="done in dones" @tap="onDoneTap" height="100%"> <!-- Certifique-se de definir uma altura ou sua lista não será exibida no iOS. -->
              <v-template>
                <Label :text="done.name" />
              </v-template>
            </ListView>
        </TabViewItem>
      </TabView>

    </Page>
  `,

}).$start();

Funcionalidades básicas: Ver, retornar para as tarefas ativas e deletar tarefas da aba das completas

Progresso da seção

Veja como seu aplicativo vai parecer no começo e no fim desta seção.

Tab 2 - Tarefas completasTab 2 - Item tocadoTab 1 - Tarefa ativa
Second tab with completed tasksAction dialog toggledFirst tab with active tasks

Alguns princípios básicos do NativeScript

Esta etapa da implementação não requer nenhum conhecimento adicional.

Implementação dos requisitos

Para a segunda aba, modifique o método OneDoneTap:

  • Método mostra um diálogo action.
  • Método registra uma seleção do usuário no console para debugging.
  • Baseado na seleção do usuário, o método move os elementos do array dones para o array todos, deleta os elementos do array dones ou descarta o diálogo. Use splice() para evitar deixar "buracos" no array, e unshift() para ter certeza que as tarefas recentes são mostradas no topo.
  onDoneTap(args) {
    action('What do you want to do with this task?', 'Cancel', ['Mark to do', 'Delete forever'])
    .then(result => {
      console.log(result); // Registra a opção selecionada para debugging.
      switch (result) {
        case 'Mark to do':
          this.todos.unshift(args.item); // Coloca a tarefa completa tocada no topo das tarefas para fazer
          this.dones.splice(args.index, 1); // Remove a tarefa tocada da lista das completas
          break;
        case 'Delete forever':
          this.dones.splice(args.index, 1);
          break;
        case 'Cancel'||undefined:
          break;
      }
    })
  },

Ao final dessa estapa, seu código deve se parecer com este exemplo:

const Vue = require("nativescript-vue");

new Vue({
  data() {
    return {
      todos: [],
      textFieldValue: "",
    }
  },
  methods: {
    onItemTap(args) {
      action('What do you want to do with this task?', 'Cancel', ['Mark completed', 'Delete forever'])
        .then(result => {
          console.log(result); // Registra as opções escolhidas para debugging.
          switch (result) {
            case 'Mark completed':
              this.dones.unshift(args.item); // Coloca a tarefa ativa tocada no topo de tarefas completadas.
              this.todos.splice(args.index, 1); // Remove a tarefa ativa tocada.
              break;
            case 'Delete forever':
              this.todos.splice(args.index, 1); // Remove a tarefa ativa tocada.
              break;
            case 'Cancel' || undefined: // Descarta o diálogo.
              break;
          }
      }) 
    },
    onDoneTap(args) {
      action('What do you want to do with this task?', 'Cancel', ['Mark to do', 'Delete forever'])
      .then(result => {
        console.log(result); // Registra a opção selecionada para debugging.
        switch (result) {
          case 'Mark to do':
            this.todos.unshift(args.item); // Coloca a tarefa completa tocada no topo das tarefas para fazer
            this.dones.splice(args.index, 1); // Remove a tarefa tocada da lista das completas
            break;
          case 'Delete forever':
            this.dones.splice(args.index, 1);
            break;
          case 'Cancel'||undefined:
            break;
        }
      })
    },
    onButtonTap() {
      console.log("New task added: " + this.textFieldValue + "."); // Registra log da nova tarefa no console para debug.
      this.todos.unshift({ name: this.textFieldValue }); // Adiciona a nova tarefa no array `todos[]`. Novas tarefas são imediatamente exibidas na tela.
      this.textFieldValue = ""; // Limpa o input de texto, desta forma o usuário está apto a adicionar novas tarefas imediatamente.
    },
  },


  template: `
    <Page class="page">
      <ActionBar title="My Tasks" class="action-bar" />
      
      <TabView height="100%">
        <TabViewItem title="To Do">
          <!-- Posiciona uma caixa de texto, um botão e uma lista de tarefas na grade. -->
          <StackLayout orientation="vertical" width="100%" height="100%">
            <GridLayout columns="2*,*" rows="auto" width="100%">
              <TextField row="0" col="0" v-model="textFieldValue" hint="Type new task..." editable="true" @returnPress="onButtonTap" /> <!-- Configura o input de texto e garante que pressionar o Return no teclado produz o mesmo resultado que tocar no botão. -->
              <Button row="0" col="1" text="Add task" @tap="onButtonTap" />
            </GridLayout>
            <ListView for="todo in todos" @itemTap="onItemTap" height="100%"> <!-- Certifique-se de definir uma altura ou sua lista não será exibida no iOS. -->
              <v-template>
                <Label :text="todo.name" />
              </v-template>
            </ListView>
          </StackLayout> 
        </TabViewItem>

        <TabViewItem title="Completed">
          <ListView for="done in dones" @tap="onDoneTap" height="100%"> <!-- Certifique-se de definir uma altura ou sua lista não será exibida no iOS. -->
              <v-template>
                <Label :text="done.name" />
              </v-template>
            </ListView>
        </TabViewItem>
      </TabView>

    </Page>
  `,

}).$start();

Design avançado: Estilizar uma caixa de entrada e botão

Progresso da seção

Veja como seu aplicativo vai parecer no começo e no fim desta seção.

Tab 1 - Sem estiloTab 1 - EstilizadoTab 1 - Estilizado
Unstyled inputStyled buttonStyled input

Alguns princípios básicos do NativeScript

Quando você trabalha com NativeScript e Vue.js, você pode usar CSS application-wide ou CSS inline para estilizar seu aplicativo. CSS aplication-wide é aplicado por primeiro e tratado em app.css na raiz do seu projeto. Veja também: Styling.

Com seletores de tipo, você pode selecionar um componente da UI e aplicar estilos nele. Para selecionar um tipo, use o nome do componente como fornecido no código. Por exemplo, para selecionar uma tab view, use TabView.

Implementação dos requisitos

Em app.css, mude o tamanho da fonte, a cor e as margens em volta de <TextField>.

TextField {
    font-size: 20;
    color: #53ba82;
    margin-top: 10;
    margin-bottom: 10;
    margin-right: 5;
    margin-left: 20;
}
  1. Em app.js na linha 63, adicione um id para o botão.

    <Button id="add-task-button" row="0" col="1" text="Add task" @tap="onButtonTap" />
  2. Em app.css, crie um estilo para o botão. Modifique o estilo para criar um botão colorido com as bordas arredondadas.

    #add-task-button {
      font-size: 20;
      font-weight: bold;
      color: white;
      background-color: #53ba82;
      margin-top: 20;
      margin-bottom: 10;
      margin-right: 20;
      margin-left: 5;
      border-radius: 20px;
    }

Design avançado: Estilizando a aba de navegação

Progresso da seção

Veja como seu aplicativo vai parecer no começo e no fim desta seção.

Aba - Sem estiloAba estilizada
Unstyled tabsStyled tabs

Alguns principios básicos do NativeScript

<TabView> fornece algumas propriedades de estilo prontas. Você pode aplicar uma transformação de texto para cada título das abas (textTransform) e mudar o tamanho da fonte e cor globalmente (tabTextFontSize, tabTextColor, selectedTabTextColor). You também pode mudar a cor de fundo das suas abas (tabBackgroundColor);

NOTA: Atualmente, tabTextFontSize não funciona no iOS e você não pode mudar o tamanho dos títulos das abas no iOS.

Implementação dos requisitos

Mudar a cor e o tamanho da fonte do título da aba selecionada

No app.js, na linha 57, adicione as propriedades selectedTabTextColor e tabTextFontSize. Se você está testando isto no iOS, a fonte não vai mudar, mas funciona tranquilo no Android.

<TabView height="100%" selectedTabTextColor="#53ba82" tabTextFontSize="20" >

Transformação de texto

No app.js, nas linhas 58 e 73, aplique a propriedade textTransform. Você pode usar esta propriedade apenas no nível <TabViewItem>.

<TabViewItem title="To Do" textTransform="uppercase" >
<TabViewItem title="Completed" textTransform="uppercase">

Design avançado: Estilizando tarefas ativas

Veja como seu aplicativo vai parecer no começo e no fim desta seção.

Tarefas ativas - Sem estiloTarefas ativas - sem separadorTarefas ativas - estilizado
Unstyled active tasksNo separatorStyled list

Alguns principios básicos do NativeScript

<ListView> e <Label> têm propriedades de estilos prontas que você pode usar para controlar os elementos como o separador de lista ou a quebra de texto automática do app.js. Para mudar o estilo da fonte, cor e posição do texto, você precisa usar CSS em app.css.

Para implementar um estilo particular para o texto das tarefas ativas, você pode definir um id para o elemento <Label>.

Implementação dos requisitos

  1. Em app.js, na linha 67, defina um id para o <Label> que representa as tarefas ativas e habilite a quebra de texto automática. Habilitando a quebra de texto automática garante que o texto mais longo seja exibido corretamente em sua lista.

    <Label id="active-task" :text="todo.name" textWrap="true" >
  2. Na linha 65, adicione a propriedade separatorColor e defina o como transparent. Desta forma, o separador não vai mais aparecer em sua lista.

    <ListView for="todo in todos" @itemTap="onItemTap" height="100%" separatorColor="transparent">
  3. Em app.css, crie um estilo para as tarefas tivas. Defina a o tamanho da fonte, cor e algum padding para posicionar o texto na página. Rode alterando margin e padding até você obter um resultado que agrade a você.

    #active-task {
      font-size: 20;
      font-weight: bold;
      color: #53ba82;
      margin-left: 20;
      padding-top: 5;
      padding-bottom: 10;
    }

Design avançado: Estilizando tarefas completas

Veja como seu aplicativo vai parecer no começo e no fim desta seção.

Tarefas completas - Sem estiloTarefas completas - Estilizadas
Unstyled completed tasksStyled completed tasks

Alguns principios básicos do NativeScript

Esta seção aplica o conhecimento básico do Native de Design avançado: Estilizando tarefas ativas

Implementação dos requisitos

  1. Em app.js, na linha 76, defina um id para o <Label> que representa tarefas completadas e habilite a quebra de texto automática. Habilitando a quebra de texto automática garante que o texto mais longo seja exibido corretamente em sua lista.

    <Label id="completed-task" :text="done.name" textWrap="true" />
  2. Na linha 74, defina um id, adicione a propriedade separatorColor e defina o como transparent. Desta forma, o separador não vai mais aparecer em sua lista. Você pode usar o id para estilizar as margens para o <ListView>.

    <ListView id="completed-list" for="done in dones" @itemTap="onDoneTap" height="100%" separatorColor="transparent" >
  3. Em app.css, crie um estilo para as tarefas tivas. Defina a o tamanho da fonte, cor e algum padding para posicionar o texto na página. Rode alterando margin e padding até você obter um resultado que agrade a você.

    #completed-task {
      font-size: 20;
      color: #d3d3d3;
      margin-left: 20;
      padding-top: 5;
      padding-bottom: 10;
      text-decoration: line-through;
    }
  4. Crie um estilo para todo <ListView> e defina um margin top. Desta forma, o texto não vai aparecer diretamente debaixo da action bar. Rode alterando o margin top até você obter um resultado que agrade a você.

    #completed-list {
      margin-top: 20;    
    }
Contributors