[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

COMPARTILHE ESSE POST

Quer aprender mais sobre Desenvolvimento Visual de Aplicativos (No-Code)?

1

Comece por essa Masterclass Gratuita, uma aula gratuita onde você irá aprender tudo sobre o que é programação visual, desenvolvimento sem código, quais as melhores ferramentas, o que é possível criar, e muito mais. Clique no botão abaixo para acessar essa aula 100% online e 100% gratuita:

2

Me siga no YouTube para receber toda semana novos vídeos ensinando tudo sobre desenvolvimento visual de aplicativos e No-Code.

3

Inscreva-se na Comunidade Sem Codar, um curso online com centenas de aulas passo-a-passo do zero, e ganhe acesso ao grupo exclusivo dos membros para tirar dúvidas sobre Bubble, AppGyver e desenvolvimento No-Code:

Posts relacionados