Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Carousel

Carrossel que mostra um slide por vez de um conjunto curto, como novidades, passos de um tour ou avaliações, com botões de anterior e próximo e uma fileira de pontos. O que a pessoa precisa ler fica na página, não no slide 3.

Padrão WAI-ARIA CarouselComponente clienteCódigo ↗
minimal · light · #3fa34d

Novo

Cobranças recorrentes

Envie a mesma cobrança todo mês, no dia que você escolher.

autoPlay
showAutoPlayToggle

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele roda no cliente, porque guarda o slide atual.

import { Carousel, CarouselSlide } from "@camaleo/react";

Anatomia

Uma <section> com os slides e, abaixo, uma fileira de controles. CarouselSlide é um layout opcional para cada slide; qualquer elemento serve. Cada parte tem um data-slot que você pode usar no CSS.

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.

minimal · light · #3fa34d

Novo

Cobranças recorrentes

Envie a mesma cobrança todo mês, no dia que você escolher.

Passo 1

Conecte seu banco

Escolha o banco e entre uma vez. Só lemos as transações.

Passos entre os quais a pessoa pula

Cada ponto é uma aba: o Tab chega à fileira uma vez, e as setas trocam de slide. Esconda o botão Reproduzir com showAutoPlayToggle={false} quando a pessoa lê no próprio ritmo.

Novo

Cobranças recorrentes

Envie a mesma cobrança todo mês, no dia que você escolher.

Rotação que a pessoa inicia

Deixe autoPlay desligado e mantenha o botão Reproduzir: quem quer que os slides andem aperta nele, e Pausar para. A rotação nunca roda quando o sistema pede menos movimento.

qui., 14/11 · 9h

Design tokens em escala

Ana Ribeiro, Nubank

Sala 2

Todas as partes de um slide

CarouselSlide organiza kicker, title, description e badge. Coloque a data ou a categoria no kicker, para o título caber no celular.

Feche o mês em minutos

Classifique cada transação antes do dia 5.

Conteúdo próprio no slide

Qualquer elemento pode ser um slide. Comece com um título, porque o nome do slide é só a posição, como "2 de 3".

Passo 1

Conecte seu banco

Escolha o banco e entre uma vez. Só lemos as transações.

Passo 1 de 4

Reagir ao slide

Avance pelos passos e aperte Recomeçar. Controle activeIndex quando a página precisa saber o slide, como num contador de passos ou num botão de concluir.

Inicial

1 usuário, 50 notas por mês.

R$ 29/mês

Nomes no seu idioma

Sem tradução, o leitor de tela anuncia cada slide como "2 of 3, slide". Passe slideLabel, slideRoleDescription e os rótulos dos botões para ele dizer "Plano 2 de 3".

Em contexto

Carrosséis costumam ficar num card ou numa seção da página, ao lado de conteúdo que está sempre visível. Estas são peças inteiras de interface que você pode copiar, no estilo que escolheu.

Primeiros passos

Passo 1

Conecte seu banco

Escolha o banco e entre uma vez. Só lemos as transações.

Tour de primeiros passosCard · Carousel · Button

O que dizem os clientes

“Fechamos março em dois dias, e não em uma semana.”

Carla Mendes, diretora financeira da Pátio Foods

Avaliações de clientesCard · Carousel · Avatar

Ofertas da semana

Até domingo

Fone com cancelamento de ruído

De R$ 1.499,00 por R$ 1.099,00.

27% off
Ofertas da lojaCard · Carousel · Badge · Button

Boas práticas

Cobranças recorrentes

Envie a mesma cobrança todo mês, no dia que você escolher.

FaçaDe três a cinco slides.

Pouca gente passa do terceiro slide, então um conjunto curto é visto e os pontos continuam fáceis de distinguir.

Cobranças recorrentes

Envie a mesma cobrança todo mês, no dia que você escolher.

EviteUm slide para cada recado.

Oito pontos parecem iguais, e os últimos slides só são vistos por quem clica em todos.

“Fechamos março em dois dias, e não em uma semana.”

Carla Mendes, diretora financeira da Pátio Foods

FaçaUm título em cada slide.

Quem passa o olho, e quem usa leitor de tela e pula por títulos, sabe do que o slide trata antes de ler.

Fechamos março em dois dias, e não em uma semana, e a equipe finalmente parou de pedir planilhas ao financeiro toda sexta à tarde.

EviteSlides que são só um parágrafo.

Sem título, a pessoa precisa ler o slide inteiro para saber se ele importa.

Props

PropriedadeTipoPadrãoDescrição
activeIndexnumber—Índice do slide à mostra, a partir de 0 (controlado).
defaultIndexnumber0Índice do primeiro slide mostrado, a partir de 0 (não controlado).
onIndexChange((index: number) => void)—Chamado com o novo índice quando o slide muda, por botão, ponto ou rotação.
autoPlaybooleanfalseComeça a girar ao carregar. Nunca gira quando a pessoa prefere menos movimento, e só o botão Pausar para.
intervalMsnumber5000Tempo de cada slide durante a rotação, em milissegundos.
showAutoPlayTogglebooleantrueMostra o botão Reproduzir/Pausar, também com autoPlay desligado, para a pessoa iniciar a rotação.
previousLabelstring"Previous slide"Nome do botão anterior, lido pelo leitor de tela.
nextLabelstring"Next slide"Nome do botão próximo, lido pelo leitor de tela.
playLabelReactNode"Play"Texto do botão de rotação quando parado.
pauseLabelReactNode"Pause"Texto do botão de rotação quando girando.
indicatorsLabelstring"Choose slide"Nome da fileira de pontos, lido pelo leitor de tela.
roleDescriptionstring"carousel"Como o leitor de tela chama o componente (aria-roledescription). Traduza em páginas que não estão em inglês.
slideRoleDescriptionstring"slide"Como o leitor de tela chama cada slide, como "plano" ou "foto".
slideLabel(index, total) => string(i, total) => `${i} of ${total}`Nome de cada slide a partir da posição (desde 1) e do total. Traduza em páginas que não estão em inglês.
goToSlideLabel(index) => string(i) => `Go to slide ${i}`Nome de cada ponto a partir da posição (desde 1).
Aceita também todas as props da primitiva por baixo e os atributos nativos.
PropriedadeTipoPadrãoDescrição
kickerReactNode—Linha curta acima do título, como uma categoria ou uma data.
descriptionReactNode—Frase abaixo do título.
badgeReactNode—Elemento no fim do slide, como um Badge ou um Avatar.

Os dois aceitam os atributos do seu elemento: Carousel os de <section> (o aria-label padrão é "Carousel", então sempre passe um), CarouselSlide os de <div>, com os children depois da descrição.

Styling hooks

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio carrossel.

Atributos

data-activeno slide à mostra e no ponto dele
aria-selectedtrue no ponto do slide à mostra

Tokens que ele lê

Cor

--cml-accent-text--cml-border--cml-border-control--cml-button-outline-bg--cml-button-outline-shadow--cml-card-border--cml-card-shadow--cml-fg--cml-fg-secondary--cml-focus-offset--cml-focus-ring--cml-focus-width--cml-surface-raised

Forma e tamanho

--cml-border-width--cml-radius-control--cml-radius-control-sm--cml-radius-pill--cml-radius-popover

Tipografia e movimento

--cml-duration-fast--cml-ease-standard--cml-font-control--cml-font-display--cml-font-label--cml-font-weight-control--cml-font-weight-display

Só deste componente

--cml-carousel-dot-radius--cml-carousel-slide-border--cml-carousel-slide-radius--cml-corner-shape

Acessibilidade

TabPassa por anterior, próximo, Reproduzir/Pausar e pela fileira de pontos, que é uma parada só.
Enter / EspaçoAperta anterior, próximo ou Reproduzir/Pausar.
← / →Na fileira de pontos, mostra o slide anterior ou o próximo e leva o foco ao ponto dele. ↑ / ↓ também.
Home / EndNa fileira de pontos, mostra o primeiro ou o último slide.

Relacionados

CardA superfície que costuma conter o carrossel numa seção da página.ImageImagens responsivas com proporção fixa, para slides de fotos.AccordionSeções que ficam todas na página, quando a pessoa precisa de todos os recados.
Esta página foi útil? · Editar esta página no GitHub