[TUTORIAL BUBBLE] Para iniciantes – Como criar uma tabela com cores alternadas no seu aplicativo

Este é um rápido tutorial que fiz no Bubble.io para mostrar uma das táticas que uso para deixar meus aplicativos mais atraentes: as linhas zebradas:



Quando você tem muitos dados para mostrar, as tabelas facilmente ficam poluídas e difíceis de compreender para o usuário do App, e por isso é importante que deixemos a tabela mais simples de se visualizar.

Ao fazermos uma simples mudança, colocando cores alternadas na planilha, todo o aplicativo fica mais organizado e mais agradável de se usar.

Para isso, basta criar um grupo dento do Grupo Repetidor que você colocou no seu aplicativo, e criar uma Formatação Condicional da seguinte forma:

O que fizemos aqui é o seguinte:

O índice da célula atual nada mais é que o número da célula dentro do grupo repetidor. Ou seja, se for a primeira célula, o índice será 1. Se for a segunda célula, o índice será 2, e por aí vai.

E a operação modulo é usada para se obter o resto de uma divisão. Calma, eu sei que parece confuso, mas é simples:

Quando fazemos a formatação Índice da célula atual <- modulo -> 2 é 0, estamos pedindo para o Bubble dividir o índice da célula atual por 2, e retornar o número inteiro restante depois de dividir, veja:

  • Na célula de índice 1, vamos dividir por 2. Dividimos 0 vezes. Sobra 1. Modulo = 1.
  • Na célula de índice 2, vamos dividir por 2. Dividimos 1 vez, e sobra zero. Modulo = 0.
  • Na célula de índice 3, vamos dividir por 2. Dividimos 1 vez, e sobra 1. Modulo = 1.
  • Na célula de índice 4, vamos dividir por 2. Dividimos 2 vezes, e sobra 0. Modulo = 0.
  • Na célula de índice 5, vamos dividir por 2. Dividmos 2 vezes, e sobra 1. Modulo = 1.
  • E por aí vai… Percebe que o resultado se alterna entre 0 e 1?

Por isso fizemos a formatação ali em cima. Quando o modulo = 1, pintamos a célula com uma cor mais escura, e quando modulo = 0, pintamos a célula com uma cor mais clara.

E assim temos o resultado abaixo:

Conseguiu?

Se tiver dúvidas, fale comigo por aqui ou pelo Youtube!


LINKS ÚTEIS:

Canal do YouTube Coaching No Code Apps (Tutoriais Bubble em Inglês)

Canal do YouTube Sem Codar

Tudo que você precisa saber sobre Desenvolvimento Visual de Aplicativos em uma aula Online e 100% Gratuita:

Renato Asse

Renato Asse

Sem Codar é onde empreendedores aprendem a criar aplicativos web e mobile sem programação ou código. Acesse nosso Canal no YouTube para ver os tutoriais e dicas de desenvolvimento.

Posts relacionados

INSCREVA-SE

Cadastre-se gratuitamente para receber dicas, tutoriais e novidades sobre o mundo do desenvolvimento sem código:

COMPARTILHE

Share on facebook
Share on whatsapp
Share on twitter
Share on email

FIQUE POR DENTRO DAS NOVIDADES

Cadastre-se Gratuitamente