Carousel Page

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Subcomponente de Composição

O br-carousel-page é o subcomponente que representa uma página individual de conteúdo ou slide. Ele deve ser declarado dentro do componente orquestrador <br-carousel>.

Visão Geral

Representa um slide do br-carousel. Use somente dentro dele.

Coloque no slide a imagem, o texto e as ações. Para começar em um slide que não seja o primeiro, marque-o com active; depois disso, o br-carousel controla o slide ativo.

Propriedades

active

Atributo	active
Descrição	Marca este slide como visível e acessível. Pode ser usado declarativamente no HTML para definir o slide inicial: Em runtime, o br-carousel pai gerencia o estado via setActive().
Tipo	boolean
Valor padrão	false

customId

Atributo	custom-id
Descrição	Identificador único customizável do slide. Quando definido, é aplicado diretamente ao atributo id do elemento host, garantindo que referências ARIA externas, testes automatizados e âncoras funcionem corretamente. O br-carousel pai detecta este valor e usa-o também no controls-id do indicador de tabs, mantendo o vínculo ARIA entre tab e tabpanel automaticamente.
Tipo	string
Valor padrão	---

Slots

Nome	Descrição
"default"	Qualquer conteúdo: imagens, textos, cards, vídeos, outros componentes do Design System.

Métodos

setActive

Descrição	Ativa ou desativa o slide.
Assinatura	setActive(active: boolean) => Promise<void>
Parâmetros	active:

setLabel

Descrição	Define o label acessível (aria-label) do slide. Chamado pelo br-carousel pai para aplicar o label gerado automaticamente com base na posição do slide (ex: "Slide 1 de 3"). O aria-label declarado diretamente no elemento tem prioridade: se o consumidor definir aria-label no HTML ou via setAttribute, esse valor será mantido e o parâmetro defaultLabel será ignorado.
Assinatura	setLabel(defaultLabel: string) => Promise<void>
Parâmetros	defaultLabel: - Label de fallback gerado pelo br-carousel (ex: "Slide 2 de 4").

CSS Shadow Parts

Nome	Descrição
"content"	Wrapper interno do conteúdo do slide.

Dependências

Componente pai

• br-carousel