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

Subcomponente especializado de br-carousel, responsável por encapsular exatamente um slide ou página individual dentro da sequência de apresentação.

Papel na composição

• Contém a mídia visual (imagem, ilustração ou vídeo), textos informativos e botões de ação associados àquele slide específico.
• Recebe as classes e propriedades de visibilidade ativa gerenciadas pelo carrossel pai.

Regra de uso e relacionamento

Deve ser instanciado exclusivamente dentro do slot padrão do orquestrador br-carousel. O componente pai coordena as transições de deslize, calcula o índice do slide e gerencia a acessibilidade. Não deve ser usado como elemento autônomo fora de um carrossel.

Para a documentação completa de design, consulte o Design System do GovBR.

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