當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

Google AMP amp-accordion用法及代碼示例


介紹：

有時我們會顯示很多內容，為了使網站看起來既漂亮又簡短，我們使用了可折疊的文本框。可折疊文本框是指標題和內容的組合，通常隻有標題可見，但是當標題被擊中時，將顯示內容。

設置：

  • 您必須在標頭中導入amp-accordion組件才能使用此標記。
<script async custom-element="amp-accordion" 
        src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"> 
</script>

例：



<!DOCTYPE html> 
<html ⚡> 
    <head> 
        <meta charset="utf-8" /> 
        <script async src="https://cdn.ampproject.org/v0.js"> 
      </script> 
        <!-- 
    Import the `amp-accordion` component in the header. 
  -->
        <script async custom-element="amp-accordion" 
                src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"> 
      </script> 
        <link rel="canonical" 
              href= 
"https://amp.dev/documentation/examples/components/amp-accordion/index.html" /> 
        <meta
            name="viewport"
            content="width=device-width,  
                       minimum-scale=1, 
                       initial-scale=1" 
        /> 
        <style amp-boilerplate> 
            body { 
                -webkit-animation:  
                  -amp-start 8s steps(1, end) 0s 1 normal both; 
                -moz-animation:  
                  -amp-start 8s steps(1, end) 0s 1 normal both; 
                -ms-animation:
                  -amp-start 8s steps(1, end) 0s 1 normal both; 
                animation:
                  -amp-start 8s steps(1, end) 0s 1 normal both; 
            } 
            @-webkit-keyframes -amp-start { 
                from { 
                    visibility:hidden; 
                } 
                to { 
                    visibility:visible; 
                } 
            } 
            @-moz-keyframes -amp-start { 
                from { 
                    visibility:hidden; 
                } 
                to { 
                    visibility:visible; 
                } 
            } 
            @-ms-keyframes -amp-start { 
                from { 
                    visibility:hidden; 
                } 
                to { 
                    visibility:visible; 
                } 
            } 
            @-o-keyframes -amp-start { 
                from { 
                    visibility:hidden; 
                } 
                to { 
                    visibility:visible; 
                } 
            } 
            @keyframes -amp-start { 
                from { 
                    visibility:hidden; 
                } 
                to { 
                    visibility:visible; 
                } 
            } 
        </style> 
        <noscript> 
            <style amp-boilerplate> 
                body { 
                    -webkit-animation:none; 
                    -moz-animation:none; 
                    -ms-animation:none; 
                    animation:none; 
                } 
            </style> 
        </noscript> 
        <!-- Custom Styling -->
        <style amp-custom> 
            h1, 
            h4 { 
                color:forestgreen; 
            } 
            section { 
                color:crimson; 
            } 
  
            amp-accordion section[expanded] .show-more { 
                display:none; 
            } 
  
            amp-accordion section:not([expanded]) .show-less { 
                display:none; 
            } 
  
            .nested-accordion h4 { 
                font-size:20px; 
                background-color:#ddd; 
            } 
  
            amp-accordion.hidden-header section[expanded] h4 { 
                border:none; 
            } 
            #content-head { 
                display:flex; 
            } 
            .fruit-title { 
                width:50%; 
            } 
            .comp-data { 
                display:flex; 
            } 
            .comp-value { 
                width:50%; 
                border:1px solid; 
                padding:5px 18px; 
                display:flex; 
            } 
  
            /* these styles are not required 
          for the samples to work */ 
            :root { 
                --space-2:1rem; 
                /* 16px */ 
            } 
  
            amp-accordion.sample { 
                margin:var(--space-2); 
            } 
        </style> 
        <meta name="robots" content="noindex, nofollow" /> 
    </head> 
    <body> 
        <!-- Body of the Page -->
        <center> 
            <h1> 
                Geeks For Geeks 
            </h1> 
        </center> 
        <amp-accordion class="sample"> 
            <section expanded> 
                <h4>Section 1 | Paragraph</h4> 
                <p>GeeksforGeeks is a Computer Science portal  
                  for geeks. It contains well written,  
                  well thought and well explained 
                  computer science and programming 
                  articles, quizzes etc.</p> 
            </section> 
            <section> 
                <h4>Section 2 | Description</h4> 
                <p> 
                    GeeksforGeeks is a Computer Science  
                  portal for geeks. It contains well written,  
                  well thought and well explained computer  
                  science and programming articles, quizzes 
                  etc. <br /> 
                    <br /> 
                    GeeksforGeeks is a Computer Science 
                  portal for geeks. It contains well written,  
                  well thought and well explained computer 
                  science and programming articles, quizzes  
                  etc. 
                </p> 
            </section> 
            <section> 
                <h4>Section 3 | Image</h4> 
                <figure> 
                    <center> 
                        <amp-img src= 
"https://pbs.twimg.com/profile_images/1138375574726955008/1fNUyEdv.png"
                                 width="200px" 
                                 height="200px"> 
                      </amp-img> 
                        <figcaption> 
                          Images work as well.</figcaption> 
                    </center> 
                </figure> 
            </section> 
        </amp-accordion> 
    </body> 
</html>

輸出：

這是輸出窗口…

自定義樣式：

盡管它是一個非常簡單的標簽，但是它具有許多自定義選項，因此可以根據用戶需要進行自定義，例如：

  • 動態標題
  • 隱藏的標題
  • 嵌套手風琴
  • Auto-collapsing手風琴
  • 動畫手風琴
  • 比較手風琴

通過所有這些定製，可以輕鬆製作一個漂亮的網站。

參考文獻：




相關用法


注：本文由純淨天空篩選整理自aditya_taparia大神的英文原創作品 Google AMP amp-accordion。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。