Comment créer un accordéon imbriqué à l'aide de Google AMP amp-accordion ?

Les menus accordéon imbriqués sont un moyen efficace d'organiser et de présenter de grandes quantités d'informations de manière compacte et intuitive. Alors que les appareils mobiles deviennent de plus en plus importants pour accéder à Internet, il est de plus en plus important d'optimiser les pages Web pour un chargement plus rapide et une expérience utilisateur améliorée. C'est là qu'intervient le projet Google Accelerated Mobile Pages (AMP), offrant un moyen fluide et rapide de créer des pages Web adaptées aux mobiles. Dans cet article, nous verrons comment créer des menus accordéon imbriqués à l'aide du composant amp-accordéon de Google AMP, offrant ainsi à vos pages Web mobiles un moyen clair et organisé de présenter des informations complexes.

Google AMP

Le programme Accelerated Mobile Pages (AMP) de Google a été lancé en 2015 pour améliorer la navigation Web mobile en favorisant un chargement de pages Web plus rapide et plus réactif. Ce projet fournit un moyen de développer des pages Web flexibles et à chargement rapide afin qu'elles s'affichent presque instantanément sur les appareils mobiles.

Les pages AMP sont conçues pour réduire la quantité de données téléchargées et traitées par les appareils mobiles, accélérant ainsi les temps de chargement des pages et améliorant l'expérience utilisateur globale. Les pages AMP sont généralement des versions simplifiées et compressées de pages Web standard, contenant du HTML simple, du CSS allégé et du JavaScript restreint.

Accordéon

Accordion est un élément d'interface utilisateur qui permet aux utilisateurs de développer et de réduire des sections de contenu sur une page Web. Il présente les informations de manière compacte et organisée, en particulier lorsqu'une grande quantité de contenu doit être affichée. Les accordéons se composent généralement de plusieurs sections de contenu, chacune avec un titre. En cliquant sur un titre, la section de contenu correspondante peut être développée ou réduite, permettant à l'utilisateur d'afficher le contenu ou de le masquer. Les accordéons aident à réduire l'encombrement et à améliorer l'expérience utilisateur en permettant aux utilisateurs d'accéder et de visualiser facilement le contenu qui les intéresse.

Grammaire

<amp-accordion [id=”<accordion-id>”]
   [expand-single-section]
   [disable-session-states]
   [animate]
   [layout=”container”]
   [class=”<class-name>”]
   [style=”<style-properties>”]>
   <!—accordion sections go here 
</amp-accordion>

Tag ampli-accordéon

amp-accordion est un composant AMP qui vous permet de créer un accordéon sur votre page web. Le composant ampli-accordéon se compose d'un ensemble de sections extensibles et pliables, chacune avec un titre et un contenu. Les titres sont généralement des éléments cliquables utilisés pour basculer la visibilité des sections de contenu. Lorsque l'utilisateur clique sur le titre, la section de contenu s'agrandit ou se réduit, en fonction de son état actuel.

Passons en revue chaque propriété et ses valeurs possibles une par une -

• Id (facultatif) - Spécifie l'ID unique du composant accordéon. Cela peut être utilisé pour appliquer des styles CSS ou positionner des composants à l'aide de JavaScript.

• Développer une seule section (facultatif) − Si elle est présente, une seule section peut être développée à la fois. Lorsqu’une nouvelle section est développée, la section précédemment développée sera réduite.

• Disable-session-states (facultatif) - S'ils sont présents, les états de session seront désactivés pour le composant. Cela signifie que l'état du composant n'est pas enregistré entre les chargements de page.

• Animation (facultatif)− S'il est présent, l'accordéon s'animera lors de l'agrandissement ou de la réduction des sections.

• Layout (facultatif)− Spécifie la disposition de l'accordéon. La valeur par défaut est « conteneur », qui définit le conteneur sur une largeur et une hauteur fixes. D'autres valeurs possibles incluent "fixed-height" et "flex-item".

• Class (facultatif) - Spécifiez un ou plusieurs noms de classe CSS à appliquer au composant.

• Styles (facultatif) - Spécifiez une ou plusieurs propriétés de style CSS en ligne à appliquer au composant.

Méthode

Pour créer un accordéon imbriqué à l'aide du composant amp-accordéon dans Google AMP, vous pouvez suivre les étapes répertoriées ci-dessous -

• Incluez le script AMP dans du fichier HTML. Cela peut être fait en ajoutant la ligne suivante : .

• Utilisez la balise amp-accordéon pour définir un accordéon externe. Dans un accordéon, vous pouvez définir plusieurs sections à l'aide de la balise

  .

• Ajoutez un titre et du contenu à chaque section. L'en-tête doit être entouré d'une balise

  , tandis que le contenu peut être n'importe quelle balise HTML que vous souhaitez afficher.

• Pour créer un accordéon imbriqué, ajoutez une autre balise amp-accordéon au contenu d'une section de l'accordéon externe.

• Dans un accordéon intérieur, vous pouvez définir plusieurs sections à l'aide des balises

  . Chaque section doit avoir un titre et un contenu, tout comme les sections de l'accordéon externe.

• Pour styliser l'accordéon, vous pouvez ajouter du CSS personnalisé à votre fichier. Par exemple, vous pouvez ajouter une bordure à l'accordéon ou modifier la taille ou la couleur de la police.

• Après avoir configuré l'accordéon, les utilisateurs peuvent cliquer sur le titre pour développer ou réduire les sections de contenu. Cela permet d’organiser les informations et de permettre aux utilisateurs de trouver plus facilement ce qu’ils recherchent.

Example

示例

以下HTML代码旨在使用Google AMP amp-accordion创建嵌套手风琴。代码包括两个amp-accordion元素，一个在另一个内部，以创建嵌套手风琴结构。外部手风琴和内部手风琴类用于为手风琴添加边框和边距样式。使用section、h2、h3和p标签添加手风琴的内容。当用户点击手风琴标题时，根据Google AMP amp-accordion的功能，内容会展开或折叠。

<!DOCTYPE html>
<html>
<head>
   <title>How to create Nested Accordion using Google AMP amp-accordion?</title>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
   <style amp-custom>
      .outer-accordion {
         border: 1px solid #ccc;
         margin: 10px 0;
      }
      .inner-accordion {
         border: 1px solid #eee;
         margin: 10px 0;
      }
   </style>
</head>
<body>
   <h4>How to create Nested Accordion using Google AMP amp-accordion?</h4>
   <amp-accordion class="outer-accordion">
      <section>
         <h2>Outer Section 1</h2>
         <amp-accordion class="inner-accordion">
            <section>
               <h3>Inner Section 1</h3>
               <p>Content for inner section 1.</p>
            </section>
            <section>
               <h3>Inner Section 2</h3>
               <p>Content for inner section 2.</p>
            </section>
         </amp-accordion>
      </section>
      <section>
         <h2>Outer Section 2</h2>
         <p>Content for outer section 2.</p>
      </section>
   </amp-accordion>
</body>
</html>

结论

总而言之，利用 Google AMP 的 amp-accordion 组件在 AMP 页面上制作嵌套的手风琴是一种简单的方法，使您能够以压缩且直观的方式订购内容。嵌套的手风琴形成是通过将 amp-accordion 组件嵌入彼此来完成的，该产品是一个多功能的交互式 UI 元素，可以改善 AMP 页面上的用户体验。通过这篇文章，我们的愿望是清楚地了解如何使用 amp-accordion 创建嵌套手风琴，以及它如何提高 AMP 页面的价值。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!