Como construir uma tabela de preços com uma chave de alternância CSS mensal/anual

Os botões de alternância são uma tendência clássica de UX, muitas vezes encontrada em diferentes partes de um site ou aplicativo. Em um tutorial anterior, discutimos como criar um componente de switch somente CSS para uma lista de tarefas simples. Hoje, criaremos outro switch: um switch mensal/anual que permitirá que os visitantes passem por diferentes planos de preços.

Nosso componente de comutação

Aqui está nossa demonstração de componentes:

Vitrine de comutadores de preço

Antes de começarmos a construir nosso switch, vamos primeiro nos inspirar em algumas páginas de preços que usam switches de alternância.

1. Comece com a marcação HTML

Definiremos um contêiner que incluirá dois wrappers aninhados: o wrapper de switch e o wrapper de tabela.

Dentro do switch wrapper, colocaremos dois botões de opção seguidos de seus rótulos associados e um vazio span elemento com a classe de highlighter. Por padrão, o primeiro botão de opção será verificado.

Dentro do invólucro da mesa, colocaremos a mesa.

Aqui está a marcação inicial:

  

    
    
    Monthly
    Yearly
    
  
  

    ...
  

A maior parte do conteúdo e estilo da tabela virá de um tutorial anterior onde construímos uma tabela de preços com um cabeçalho fixo. A partir deste tutorial, limpei todos os estilos desnecessários. Também fiz alguns ajustes de estilo para corresponder ao objetivo desta demonstração. De qualquer forma, os estilos de tabela são de importância secundária.

Para este exercício, atualizaremos apenas os títulos das tabelas, de modo que o .info elemento incluirá dois montantes diferentes, dependendo do plano. Por padrão, apenas o valor mensal será visível.

Veja como será a marcação de um cabeçalho de tabela:

...

  
Starter
  

    

      
$10 month
    
    

      
$7 month
      
billed annually
    
    Get started
  

...

2. Definir os estilos de switch

Semelhante ao nosso componente de switch anterior, também aproveitaremos a “técnica de hack de caixa de seleção CSS” para alternar o switch.

Já existem muitas implementações deste método no Tuts+ biblioteca, então não vou entrar em mais detalhes. Eu recomendaria passar por todos esses exemplos para se familiarizar com como simular o JavaScript clique evento em elementos CSS embora.

Aqui estão (brevemente) as etapas que seguiremos:

Aqui estão todos os estilos anexados ao nosso componente:

/*CUSTOM VARIABLES HERE*/

.switch-wrapper {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border: 1px solid lightgrey;
  margin-bottom: 40px;
  border-radius: 30px;
  background: var(--white);
}

.switch-wrapper [type="radio"] {
  position: absolute;
  left: -9999px;
}

.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"],
.switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"] {
  color: var(--white);
}

.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"]:hover,
.switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"]:hover {
  background: transparent;
}

.switch-wrapper
  [type="radio"]:checked#monthly
  + label[for="yearly"]
  ~ .highlighter {
  transform: none;
}

.switch-wrapper
  [type="radio"]:checked#yearly
  + label[for="monthly"]
  ~ .highlighter {
  transform: translateX(100%);
}

.switch-wrapper label {
  font-size: 16px;
  z-index: 1;
  min-width: 100px;
  line-height: 32px;
  cursor: pointer;
  border-radius: 30px;
  transition: color 0.25s ease-in-out;
}

.switch-wrapper label:hover {
  background: var(--lightgray);
}

.switch-wrapper .highlighter {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 30px;
  background: var(--darkgreen);
  transition: transform 0.25s ease-in-out;
}

3. Alternar informações da tabela com JavaScript

Até este ponto, criamos com sucesso o switch. Mas, há uma coisa extra que temos que fazer; mostrar os preços de tabela relevantes dependendo da seleção ativa.

Para fazer isso, usaremos um pouco de JavaScript. Especificamente, sempre que um usuário alternar a opção, faremos o seguinte:

• Pegue o ID do botão de opção selecionado.
• Oculte todos os elementos da tabela com a classe de .price.
• Mostrar apenas o .price elementos cuja classe corresponde a este ID.

Aqui está o código JavaScript necessário:

const tableWrapper = document.querySelector(".table-wrapper");
const switchInputs = document.querySelectorAll(".switch-wrapper input");
const prices = tableWrapper.querySelectorAll(".price");
const toggleClass = "hide";

for (const switchInput of switchInputs) {
  switchInput.addEventListener("input", function () {
    for (const price of prices) {
      price.classList.add(toggleClass);
    }
    const activePrices = tableWrapper.querySelectorAll(
      `.price.${switchInput.id}`
    );
    for (const activePrice of activePrices) {
      activePrice.classList.remove(toggleClass);
    }
  });
}

E a classe CSS associada:

table .hide {
  display: none;
}

Conclusão

Obrigado por seguir outro tutorial, pessoal! Espero que este exercício tenha lhe dado conhecimento suficiente para criar uma chave de alternância somente CSS para filtrar partes do seu site ou aplicativo. Aqui abordamos como usar essa opção como parte de uma página de preços – outro caso de uso pode ser alternar as visualizações de layout (visualizações de grade e lista).

Obviamente, se você precisar criar switches com funcionalidades complexas, o JavaScript provavelmente será uma abordagem melhor.

Aqui está um lembrete do que construímos:

Como sempre, muito obrigado por ler!