Bagaimana untuk membuat akordion bersarang menggunakan amp-akordion Google AMP?

Menu akordion bersarang ialah cara yang cekap untuk mengatur dan menyampaikan sejumlah besar maklumat dengan cara yang padat dan intuitif. Memandangkan peranti mudah alih menjadi semakin penting dalam mengakses internet, adalah semakin penting untuk mengoptimumkan halaman web untuk pemuatan yang lebih pantas dan pengalaman pengguna yang lebih baik. Di situlah projek Google Accelerated Mobile Pages (AMP) muncul, menyediakan cara yang lancar dan cepat dimuatkan untuk mencipta halaman web mesra mudah alih. Dalam artikel ini, kami akan meneroka cara membuat menu akordion bersarang menggunakan komponen amp-akordion Google AMP, memberikan halaman web mudah alih anda cara yang jelas dan teratur untuk menyampaikan maklumat yang kompleks.

Google AMP

Program Accelerated Mobile Pages (AMP) Google telah dilancarkan pada 2015 untuk meningkatkan penyemakan imbas web mudah alih dengan mempromosikan pemuatan halaman web yang lebih pantas dan responsif. Projek ini menyediakan cara untuk membangunkan halaman web yang fleksibel dan dimuatkan dengan pantas supaya ia dipaparkan hampir serta-merta pada peranti mudah alih.

Halaman AMP direka untuk mengurangkan jumlah data yang dimuat turun dan diproses oleh peranti mudah alih, sekali gus mempercepatkan masa muat halaman dan meningkatkan keseluruhan pengalaman pengguna. Halaman AMP lazimnya adalah versi halaman web standard yang dipermudahkan dan dimampatkan, yang mengandungi HTML ringkas, CSS yang dilucutkan dan JavaScript terhad.

Akordion

Accordion ialah elemen antara muka pengguna yang membolehkan pengguna mengembangkan dan meruntuhkan bahagian kandungan pada halaman web. Ia menyampaikan maklumat secara padat dan teratur, terutamanya apabila sejumlah besar kandungan perlu dipaparkan. Akordion biasanya terdiri daripada berbilang bahagian kandungan, setiap satu dengan tajuk. Dengan mengklik pada tajuk, bahagian kandungan yang sepadan boleh dikembangkan atau diruntuhkan, membolehkan pengguna melihat kandungan atau menyembunyikannya. Akordion membantu mengurangkan kekacauan dan meningkatkan pengalaman pengguna dengan membenarkan pengguna mengakses dan melihat kandungan yang menarik minat mereka dengan mudah.

Tatabahasa

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

Teg

amp-akordion ialah komponen AMP yang membolehkan anda membuat akordion pada halaman web anda. Komponen amp-akordion terdiri daripada satu set bahagian yang boleh dikembangkan dan boleh dilipat, masing-masing dengan tajuk dan kandungan. Tajuk biasanya elemen boleh klik yang digunakan untuk menogol keterlihatan bahagian kandungan. Apabila pengguna mengklik pada tajuk, bahagian kandungan mengembang atau runtuh, bergantung pada keadaan semasanya.

Mari kita teliti setiap harta dan kemungkinan nilainya satu demi satu -

• Id (pilihan) - Menentukan ID unik komponen akordion. Ini boleh digunakan untuk menggunakan gaya CSS atau komponen kedudukan menggunakan JavaScript.

• Kembangkan-bahagian-tunggal (pilihan) − Jika ada, hanya satu bahagian boleh dikembangkan pada satu-satu masa. Apabila bahagian baharu dikembangkan, bahagian yang dikembangkan sebelumnya akan diruntuhkan.

• Lumpuhkan-keadaan-sesi (pilihan) - Jika ada, keadaan sesi akan dilumpuhkan untuk komponen. Ini bermakna keadaan komponen tidak disimpan antara pemuatan halaman.

• Animasi (pilihan)− Jika ada, akordion akan bernyawa apabila mengembang atau meruntuhkan bahagian.

• Layout (pilihan)− Menentukan susun atur akordion. Nilai lalai ialah "bekas", yang menetapkan bekas kepada lebar dan ketinggian tetap. Nilai lain yang mungkin termasuk "tinggi tetap" dan "item fleksibel".

• Kelas (pilihan) - Tentukan satu atau lebih nama kelas CSS untuk digunakan pada komponen.

• Gaya (pilihan) - Tentukan satu atau lebih sifat gaya CSS sebaris untuk digunakan pada komponen.

Kaedah

Untuk membuat akordion bersarang menggunakan komponen amp-akordion dalam Google AMP, anda boleh mengikuti langkah yang disenaraikan di bawah -

• Sertakan skrip AMP dalam fail HTML. Ini boleh dilakukan dengan menambah baris berikut: .

• Gunakan tag amp-akordion untuk menentukan akordion luaran. Dalam akordion, anda boleh menentukan berbilang bahagian menggunakan tag

  .

• Tambahkan tajuk dan kandungan pada setiap bahagian. Pengepala hendaklah disertakan dalam teg

  , manakala kandungannya boleh berupa sebarang teg HTML yang anda mahu paparkan.

• Untuk mencipta akordion bersarang, tambahkan satu lagi tag amp-akordion pada kandungan satu bahagian akordion luar.

• Dalam akordion dalaman, anda boleh menentukan berbilang bahagian menggunakan tag

  . Setiap bahagian harus mempunyai tajuk dan kandungan, sama seperti bahagian dalam akordion luaran.

• Untuk menggayakan akordion, anda boleh menambah CSS tersuai pada fail anda. Sebagai contoh, anda boleh menambah sempadan pada akordion atau menukar saiz atau warna fon.

• Selepas menyediakan akordion, pengguna boleh mengklik pada tajuk untuk mengembangkan atau meruntuhkan bahagian kandungan. Ini menyediakan cara untuk menyusun maklumat dan memudahkan pengguna mencari perkara yang mereka cari.

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 页面的价值。

Atas ialah kandungan terperinci Bagaimana untuk membuat akordion bersarang menggunakan amp-akordion Google AMP?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!