Seg (Segmented Control) Componentes

O que é

Alternativa compacta a um grupo de botões de rádio — bom pra filtros de período (Dia/Semana/Mês), alternância de visualização, poucas opções mutuamente exclusivas.

Como funciona

Funciona sobre <input type="radio"> nativos (acessível de fábrica, funciona com teclado) ou div.seg-it.is-act manual. Um .seg-thumb é injetado e posicionado via getBoundingClientRect() do item ativo.

Exemplos

<div class="seg">
  <input type="radio" name="periodo" id="segDia" checked><label for="segDia">Dia</label>
  <input type="radio" name="periodo" id="segSemana"><label for="segSemana">Semana</label>
  <input type="radio" name="periodo" id="segMes"><label for="segMes">Mês</label>
</div>

<div class="seg is-fl">
  <input type="radio" name="periodo-fl" id="segFlDia" checked><label for="segFlDia">Dia</label>
  <input type="radio" name="periodo-fl" id="segFlSemana"><label for="segFlSemana">Semana</label>
  <input type="radio" name="periodo-fl" id="segFlMes"><label for="segFlMes">Mês</label>
</div>

<div class="seg is-gst">
  <input type="radio" name="periodo-gst" id="segGstDia" checked><label for="segGstDia">Dia</label>
  <input type="radio" name="periodo-gst" id="segGstSemana"><label for="segGstSemana">Semana</label>
</div>

Atributos

Nenhum.

Variantes

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

• Com a variante div.seg-it (sem radio), o próprio módulo não alterna a classe is-act ao clicar — isso fica por sua conta; prefira sempre a versão com <input type="radio">, que funciona sozinha.