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)
