Show Menu
SUJETS×

Composant Teaser

Le composant principal Teaser peut afficher une image, un titre, un texte enrichi et éventuellement un lien vers un contenu supplémentaire.

Utilisation

Le composant Teaser permet à l’auteur de contenu de créer facilement un teaser vers un contenu supplémentaire à l’aide d’une image, d’un titre ou d’un texte enrichi et de lier un contenu supplémentaire ou d’autres actions.
L’auteur du modèle peut utiliser la boîte de dialogue de conception définir si les options permettant de créer des actions à appeler et d’ajouter des liens sont disponibles, ainsi que de désactiver diverses options d’affichage. L’auteur du contenu peut utiliser la boîte de dialogue Configurer pour définir une image, des CTAS, des titres et descriptions et configurer des liens vers le teaser individuel. Vous pouvez accéder à la boîte de dialogue de modification du composant Image pour modifier l’image de teaser.

Version et compatibilité

La version actuelle du composant Teaser est v1, qui a été introduite avec la version 2.1.0 des composants principaux de juillet 2018 et est décrite dans ce document.
Le tableau ci-après présente en détail toutes les versions prises en charge du composant, les versions AEM avec lesquelles les versions du composant sont compatibles et les liens vers la documentation pour les versions précédentes.
Version du composant
AEM 6.3
AEM 6.4
AEM 6.5
v1
Compatible
Compatible
Compatible

Exemple de sortie de composant

Pour tester le composant Teaser, des exemples de ses options de configuration, ainsi que des sorties HTML et JSON, consultez la Bibliothèque de composants .

Détails techniques

La documentation technique la plus récente sur le composant Teaser est disponible sur GitHub .
Vous trouverez plus d’informations sur le développement des composants principaux dans la documentation destinée aux développeurs de composants principaux .

Boîte de dialogue de configuration

L’auteur du contenu peut utiliser la boîte de dialogue de configuration pour définir les propriétés du teaser individuel. Il existe également une boîte de dialogue de modification pour modifier l’image de teaser si celle-ci est sélectionnée.

Image

  • Ressource image
    • Drop an asset from the asset browser or tap the
      browse
      option to upload from a local file system.
    • Appuyez ou cliquez sur
      Effacer
      pour désélectionner l’image actuellement sélectionnée.
    • Tap or click
      Edit
      to mange the renditions of the asset in the asset editor.

Texte

  • Titre
    Titre à afficher comme titre du teaser.
  • Obtenir le titre de la page liée
    Lorsque cette option est cochée, le titre est renseigné avec le titre de la page liée.
  • Description
    Définit une description à afficher sous forme de sous-titre du teaser.
  • Obtenir la description de la page liée
    Lorsque cette option est cochée, la description est renseignée avec la description de la page liée.

Boîte de dialogue Modifier

Le composant Teaser délègue le rendu d’image au Composant Image . Par conséquent, # (image.md#edit-dialog du composant Image est accessible à l’auteur du contenu pour manipuler l’image de teaser).

Boîte de dialogue de conception

La boîte de dialogue de conception permet à l’auteur du modèle de définir les options de teaser que l’auteur du contenu a définies lors de l’utilisation de ce composant.

Onglet Teaser

  • Appels à l’action
    • Désactivation des appels à actions
      Masquez l’option
      Appel à actions
      pour les auteurs de contenu.
  • Eléments
    • Masquer le titre
      • Masque l’option
        Titre
        pour les auteurs de contenu.
      • Lorsqu’il est sélectionné,
        le type de titre
        est masqué.
    • Masquer la description
      Masquez l’option
      Description
      pour les auteurs de contenu.
  • Type de titre
    Définit la balise H à utiliser par le titre du teaser.
  • Liens
    • Ne pas lier l’image
      Lorsque cette option est sélectionnée, l’image de teaser n’est pas liée.
    • Ne pas lier le titre
      Lorsque sélectionné, le titre du teaser n’est pas lié.

Onglet Styles

Le composant Teaser prend en charge le système de style AEM.