Show Menu
TOPICS×

Componente Teaser

O Componente principal do teaser do componente pode mostrar uma imagem, um título, rich text e, opcionalmente, um link para conteúdo adicional.

Uso

O componente Teaser permite que o autor do conteúdo crie facilmente um teaser para obter mais conteúdo usando uma imagem, um título ou texto formatado e vinculando a conteúdo adicional ou outras ações.
O autor do modelo pode usar a caixa de diálogo de design para definir se as opções para criar chamadas para ações e adicionar links estão disponíveis, além de desativar várias opções de exibição. O autor do conteúdo pode usar a caixa de diálogo de configuração para definir uma imagem, definir CTAs, definir títulos e descrições e configurar links para o teaser individual. A caixa de diálogo de edição do Componente de imagem pode ser acessada para modificar a imagem do teaser.

Versão e compatibilidade

A versão atual do Teaser Component é v1, que foi introduzida com a versão 2.1.0 dos Componentes Principais em julho de 2018, e é 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 de versões anteriores.
Versão do componente
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v1
Compatível
Compatível
Compatível

Exemplo de saída de componente

Para experimentar o componente Teaser e ver exemplos de suas opções de configuração, bem como a saída HTML e JSON, visite a Biblioteca de componentes.

Detalhes técnicos

A documentação técnica mais recente sobre o componente Teaser pode ser encontrada no GitHub .
Para obter mais detalhes sobre o desenvolvimento dos Componentes principais, consulte a documentação do desenvolvedor dos Componentes principais.

Configurar caixa de diálogo

O autor do conteúdo pode usar a caixa de diálogo de configuração para definir as propriedades do teaser individual. Também há uma caixa de diálogo de edição para modificar a imagem do teaser, se ela estiver selecionada.

Imagem

  • Ativos da imagem
    • Solte um ativo do navegador de ativos ou toque na opção de
      navegação
      para fazer upload de um sistema de arquivos local.
    • Toque ou clique em
      Limpar
      para desmarcar a imagem atualmente selecionada.
    • Toque ou clique em
      Editar
      para gerenciar as representações do ativo no editor de ativos.

Texto

  • Pretitle
    - O pretitle será exibido antes do título do teaser.
  • Título
    - Define um título a ser exibido como o título do teaser.
    • Obter título da página
      vinculada - Quando marcado, o título será preenchido com o título da página vinculada.
  • Descrição
    - Define uma descrição para ser exibida como o subtítulo do teaser.
    • Obter descrição da página
      vinculada - Quando marcada, a descrição será preenchida com a descrição da página vinculada.
  • ID
    - Essa opção permite controlar o identificador exclusivo do componente no HTML e na Camada de dados.
    • Se deixado em branco, uma ID exclusiva é gerada automaticamente para você e pode ser encontrada inspecionando a página resultante.
    • Se uma ID for especificada, é responsabilidade do autor garantir que seja exclusiva.
    • A alteração da ID pode afetar o CSS, o JS e o rastreamento da camada de dados.

Edit Dialog

O componente Teaser delega a renderização de imagem ao componente de imagem. Portanto, a caixa de diálogo # edição (image.md#edit-dialog) do Componente de imagem está disponível para o autor do conteúdo para manipular a imagem do teaser.

Caixa de diálogo Design

A caixa de diálogo de design permite que o autor do modelo defina as opções do teaser que o autor do conteúdo possui ao usar esse componente.

Guia Teaser

  • Frases de chamariz
    • Desabilitar ações
      de chamada - Ocultar a opção
      Chamada para ações
      para autores de conteúdo
  • Elementos
    • Ocultar pretítulo
      - Oculta a opção
      Pretítulo
      para autores de conteúdo
    • Ocultar título
      - Oculta a opção
      Título
      para autores de conteúdo
      • Quando selecionado, o Tipo
        de
        Título fica oculto
    • Ocultar descrição
      - Ocultar a opção
      Descrição
      para autores de conteúdo
  • Tipo
    de título - Define a tag H a ser usada pelo título do teaser.
  • Links
    • Não vincular a imagem
      - quando selecionada, a imagem do teaser não está vinculada
    • Não vincular o título
      - Quando selecionado, o título do teaser não está vinculado
  • Delegar
    imagem - exibição informativa indicando para qual componente o Teaser delega o gerenciamento de imagens.

Guia Estilos

O componente Teaser suporta o sistema AEM Style.