O componente de Guias, dos Componente principais, permite a organização do conteúdo em várias guias.
O componente de Guias permite que o autor de conteúdo organize o conteúdo da página em várias guias.
A caixa de diálogo de edição permite que o autor de conteúdo defina várias guias, bem como defina a guia ativa. Usando a caixa de diálogo de design, o autor do modelo pode definir quais componentes podem ser adicionados às guias e personalizar os estilos.
Os componentes de guia aninhados (guias dentro de guias) são compatíveis.
Componentes de guia simples (não aninhados) podem ser localizados/selecionados usando a árvore de conteúdo, no entanto, guias aninhadas não podem ser localizadas/selecionadas.
A versão atual do componente de Guias é a v1, introduzida com a versão 2.2.0 dos Componentes principais em outubro de 2018, e está descrita neste documento.
A tabela a seguir detalha todas as versões compatíveis do componente, as versões do AEM com as quais as versões do componente são compatíveis e os links para a documentação das versões anteriores.
Versão do componente | AEM 6.4 | AEM 6.5 | AEM as a Cloud Service |
---|---|---|---|
v1 | Compatível com a versão 2.17.4 e anteriores |
Compatível | Compatível |
Para mais informações sobre as versões dos Componentes principais, consulte o documento Versões dos Componentes principais.
Para experimentar o componente de Guias, e ver exemplos de suas opções de configuração e de saídas HTML e JSON, visite a Biblioteca de Componentes.
A documentação técnica mais recente sobre o componente de Guias pode ser encontrada no GitHub.
Mais detalhes sobre o desenvolvimento dos Componentes principais podem ser encontrados na documentação do desenvolvedor dos Componentes principais.
Os componentes de Guias, Carrossel e Acordeão podem ser vinculados diretamente a um painel do componente.
Para fazer isso:
id="accordion-86196c94d3-item-ca319dbb0b"
#
).
https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b
Ao navegar até o URL com o ID do painel como âncora, o navegador rolará diretamente para o componente específico e exibirá o painel especificado. Se o painel estiver configurado para não ser expandido por padrão, ele será expandido automaticamente.
A caixa de diálogo de edição permite que o autor de conteúdo crie, renomeie e reorganize as guias, e defina a guia ativa.
Use o botão Adicionar para abrir o seletor de componentes e escolher que componente adicionar como guia. Uma vez adicionado, uma entrada é adicionada à lista, contendo as seguintes colunas:
Se a janela de visualização da página for reduzida para que a caixa de diálogo de edição se torne tela cheia, o botão Adicionar ficará oculto. Os componentes ainda podem ser adicionados ao componente de Guias ao arrastar do navegador de componentes e soltar no componente de Guias no editor de páginas.
Na guia Acessibilidade, os valores podem ser definidos para rótulos de acessibilidade ARIA para o componente.
O autor de conteúdo pode usar a opção Selecionar painel na barra de ferramentas do componente para alterar para um painel diferente para edição, bem como para reorganizar facilmente a ordem das guias.
Depois de escolher a opção Selecionar painel na barra de ferramentas do componente, as guias configuradas são exibidas como uma lista suspensa.
As guias não podem ser selecionadas pelo autor quando estiverem no modo Editar. Use o modo de Visualização ou a opção Visualizar como publicado para interagir com as guias como um leitor do conteúdo publicado.
A caixa de diálogo de design permite que o autor do modelo defina quais componentes podem ser adicionados como itens ao componente de guias, e define quais estilos personalizados estão disponíveis para o autor de conteúdo.
A guia Componentes permitidos é usada para definir quais componentes podem ser adicionados como itens ao componente de guias pelo autor de conteúdo.
Ela funciona da mesma maneira que a guia de mesmo nome ao definir a política e as propriedades de um Contêiner de layout no Editor de modelo.
O componente de Guias é compatível com o Sistema de Estilos do AEM.
O componente de Guias oferece suporte à Camada de dados de clientes Adobe.