Wie erstelle ich ein verschachteltes Akkordeon mit Google AMP amp-accordion?-CSS-Tutorial-php.cn

如何使用 Google AMP amp-accordion 创建嵌套手风琴？

Verschachtelte Akkordeonmenüs sind eine effiziente Möglichkeit, große Informationsmengen kompakt und intuitiv zu organisieren und darzustellen. Da mobile Geräte beim Zugriff auf das Internet immer wichtiger werden, wird es immer wichtiger, Webseiten für schnelleres Laden und ein verbessertes Benutzererlebnis zu optimieren. Hier kommt das Google Accelerated Mobile Pages (AMP)-Projekt ins Spiel, das eine reibungslose und schnell ladende Möglichkeit bietet, für Mobilgeräte optimierte Webseiten zu erstellen. In diesem Artikel erfahren Sie, wie Sie mit der Amp-Akkordeon-Komponente von Google AMP verschachtelte Akkordeon-Menüs erstellen und so Ihren mobilen Webseiten eine klare und organisierte Möglichkeit geben, komplexe Informationen darzustellen.

Google AMP

Das Accelerated Mobile Pages (AMP)-Programm von Google wurde 2015 ins Leben gerufen, um das mobile Surfen im Internet zu verbessern, indem es ein schnelleres und reaktionsschnelleres Laden von Webseiten fördert. Dieses Projekt bietet eine Möglichkeit, flexible und schnell ladende Webseiten zu entwickeln, sodass sie auf Mobilgeräten nahezu sofort gerendert werden.

AMP-Seiten sind darauf ausgelegt, die von Mobilgeräten heruntergeladene und verarbeitete Datenmenge zu reduzieren, wodurch die Ladezeiten der Seiten beschleunigt und das Benutzererlebnis insgesamt verbessert werden. AMP-Seiten sind in der Regel vereinfachte und komprimierte Versionen von Standard-Webseiten, die einfaches HTML, abgespecktes CSS und eingeschränktes JavaScript enthalten.

Akkordeon

Accordion ist ein Benutzeroberflächenelement, das es Benutzern ermöglicht, Inhaltsabschnitte auf einer Webseite zu erweitern und zu reduzieren. Es stellt Informationen kompakt und organisiert dar, insbesondere wenn eine große Menge an Inhalten angezeigt werden muss. Akkordeons bestehen normalerweise aus mehreren Inhaltsabschnitten mit jeweils einem Titel. Durch Klicken auf einen Titel kann der entsprechende Inhaltsbereich erweitert oder reduziert werden, sodass der Benutzer den Inhalt anzeigen oder ausblenden kann. Akkordeons tragen dazu bei, Unordnung zu reduzieren und die Benutzererfahrung zu verbessern, indem sie Benutzern den einfachen Zugriff und die Anzeige von Inhalten ermöglichen, die sie interessieren.

Grammatik

<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>

Nach dem Login kopieren

Amp-Akkordeon-Tag

Das

amp-accordion-Tag ist eine AMP-Komponente, mit der Sie ein Akkordeon auf Ihrer Webseite erstellen können. Die Amp-Akkordeon-Komponente besteht aus einer Reihe erweiterbarer und reduzierbarer Abschnitte mit jeweils einem Titel und Inhalt. Titel sind in der Regel anklickbare Elemente, mit denen die Sichtbarkeit von Inhaltsabschnitten umgeschaltet wird. Wenn der Benutzer auf den Titel klickt, wird der Inhaltsbereich je nach aktuellem Status erweitert oder reduziert.

Lassen Sie uns jede Eigenschaft und ihre möglichen Werte einzeln durchgehen -

Id (optional) – Gibt die eindeutige ID der Akkordeonkomponente an. Dies kann verwendet werden, um CSS-Stile anzuwenden oder Komponenten mithilfe von JavaScript zu positionieren.
Einzelnen Abschnitt erweitern (optional) − Falls vorhanden, kann jeweils nur ein Abschnitt erweitert werden. Wenn ein neuer Abschnitt erweitert wird, wird der zuvor erweiterte Abschnitt reduziert.
Disable-session-states (optional) – Falls vorhanden, werden Sitzungszustände für die Komponente deaktiviert. Das bedeutet, dass der Zustand der Komponente zwischen dem Laden der Seite nicht gespeichert wird.
Animation (optional)− Falls vorhanden, wird das Akkordeon beim Erweitern oder Reduzieren eines Abschnitts animiert.
Layout (optional)− Gibt das Layout des Akkordeons an. Der Standardwert ist „container“, wodurch der Container auf eine feste Breite und Höhe festgelegt wird. Weitere mögliche Werte sind „fixed-height“ und „flex-item“.
Klasse (optional) – Geben Sie einen oder mehrere CSS-Klassennamen an, die auf die Komponente angewendet werden sollen.
Stile (optional) – Geben Sie eine oder mehrere Inline-CSS-Stileigenschaften an, die auf die Komponente angewendet werden sollen.

Methode

Um ein verschachteltes Akkordeon mit der amp-accordion-Komponente in Google AMP zu erstellen, können Sie die unten aufgeführten Schritte ausführen -

Fügen Sie das AMP-Skript in der HTML-Datei ein. Dies kann durch Hinzufügen der folgenden Zeile erfolgen: .
Verwenden Sie das amp-accordion-Tag, um ein externes Akkordeon zu definieren. In einem Akkordeon können Sie mithilfe des
-Tags mehrere Abschnitte definieren.
Fügen Sie jedem Abschnitt Titel und Inhalt hinzu. Der Header sollte in einem
-Tag eingeschlossen sein, während der Inhalt ein beliebiges HTML-Tag sein kann, das Sie anzeigen möchten.
Um ein verschachteltes Akkordeon zu erstellen, fügen Sie ein weiteres amp-accordion-Tag innerhalb des Inhalts eines Abschnitts des äußeren Akkordeons hinzu.
In einem inneren Akkordeon können Sie mehrere Abschnitte mithilfe von
-Tags definieren. Jeder Abschnitt sollte einen Titel und Inhalt haben, genau wie die Abschnitte im externen Akkordeon.
Um das Akkordeon zu gestalten, können Sie Ihrer Datei benutzerdefiniertes CSS hinzufügen. Beispielsweise können Sie dem Akkordeon einen Rahmen hinzufügen oder die Schriftgröße oder -farbe ändern.
Nach dem Einrichten des Akkordeons können Benutzer auf den Titel klicken, um Inhaltsabschnitte zu erweitern oder zu reduzieren. Dies bietet eine Möglichkeit, Informationen zu organisieren und Benutzern das Auffinden der gesuchten Informationen zu erleichtern.

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>

Nach dem Login kopieren

结论

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein verschachteltes Akkordeon mit Google AMP amp-accordion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!