Exemplos: cada padrão, ao vivo, com a fonte completa
Cada exemplo é uma demo funcional do pacote npm publicado mais o arquivo completo por trás dela: pronto para copiar e colar, e editável ao vivo no Storybook. Renderizado no servidor como tudo mais neste site.
Básico
- Primeiros passosO menu mínimo: itens, duas setas, visibilidade pronta para usar.
- Um item por visãoUm menu com a largura de um item — um cartão preenche a linha.
- Rolar um item por vezAs setas avançam um único item em vez de uma página inteira.
- Setas abaixo do menuAs setas são seus componentes — coloque-as onde quiser.
Posição e rolagem
- Centralizar o item clicadoscrollToItem com inline: center — o padrão de abas roláveis.
- Rolar até um item por idAcesse o menu de fora com apiRef.
- Salvar e restaurar a posição de rolagemMantenha o deslocamento de rolagem entre desmontagens e recargas.
- Animação de rolagem personalizadaTraga seu próprio easing e duração para rolagens programáticas.
- Indicador de progresso de rolagemUma barra de progresso guiada por quais itens estão visíveis.
Entrada e gestos
- Arrastar para rolar com o mouseArraste com o mouse que ainda deixa os cliques funcionarem.
- Deslizar no desktopDeslize com inércia para usuários de mouse.
- Ocultar as setas no mobileRolagem apenas por toque em telas pequenas, setas no desktop.
- Impedir a rolagem do bodyA roda sobre o menu rola o menu, não a página.
Itens dinâmicos
- Carregar mais quando o fim apareceAcréscimo infinito guiado pela visibilidade do último item.
- Adicionar um item e rolar até eleO padrão de chips de filtro: adicionar e então trazer à vista.
- Animar itens ao entrar e sairAnimações de adicionar/remover com @formkit/auto-animate.
- 5.000 itens e ainda rápidoA rolagem nativa escala — sem necessidade de virtualização aqui.