个性化阅读
专注于IT技术分析

如何使用Google AMP amp手风琴创建比较手风琴?

本文概述

如何使用Google AMP amp手风琴创建比较手风琴?1

有时我们会显示很多内容, 为了使网站看起来既漂亮又简短, 我们使用了可折叠的文本框。可折叠的文本框是标题和内容的组合, 通常只有标题可见, 但是当标题被击中时, 将显示内容。

设定:你必须在标题中导入amp-accordion组件才能使用此标记。

HTML代码示例

<script async custom-element = "amp-accordion"
     src = "https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
</script>

为了进行比较划分, 我们将简单地使用CSS进行比较划分。你可以使用以下代码:

HTML代码示例

<style>
     #content-head {
         display: flex;
     }
  
     .title {
         width: 50%;
     }
  
     .compare-data {
         display: flex;
     }
  
     .compare-value {
         width: 50%;
         border: 1px solid;
         padding: 5px 18px;
         display: flex;
     }
</style>

例子:

HTML代码示例

<!doctype html>
<html amp>
  
<head>
     <meta charset = "utf-8">
     <title>Google AMP amp-accordion</title>
  
     <!-- Important scripts and links 
         to be imported -->
     <script async src =
         "https://cdn.ampproject.org/v0.js">
     </script>
      
     <script async custom-element = "amp-list" 
src = "https://cdn.ampproject.org/v0/amp-list-0.1.js">
     </script>
      
     <script async custom-template = "amp-mustache" 
src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
     </script>
      
     <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 CSS -->
     <style amp-custom>
         amp-accordion section[expanded] .show-more {
             display: none;
         }
  
         amp-accordion section:not([expanded]) .show-less {
             display: none;
         }
  
         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;
         }
  
         h1, h4 {
             color: forestgreen;
         }
  
         section {
             color: crimson;
         }
     </style>
     <meta name = "robots" content = "noindex, nofollow">
</head>
  
<body>
     <center>
         <h1>
             Geeks For Geeks
         </h1>
     </center>
  
     <div>
         <amp-list src =
"/static/samples/json/accordion-fruit.json" 
             height = "170" width = "auto" 
             layout = "fixed-height"
             items = "." single-item id = "fruitList">
  
             <template type = "amp-mustache">
                 <div id = "content-head">
                     <div class = "fruit-title">
                          
<p>
                             {{primaryFruit.subType}} 
                             {{primaryFruit.fruit}}
                         </p>
  
                         <amp-img src =
                             "{{primaryFruit.imageURL}}" 
                             width = "50" height = "50">
                         </amp-img>
                     </div>
                     <div class = "fruit-title">
                         {{#competitorFruit}}
                          
<p>
                             {{subType}} {{fruit}}
                         </p>
  
                         <amp-img src = "{{imageURL}}" 
                             width = "50" height = "50">
                         </amp-img>
                         {{/competitorFruit}}
                     </div>
                 </div>
                 <section>
                     <amp-accordion animate 
                         disable-session-states 
                         expand-single-section on=
                 "expand:fruitList.changeToLayoutContainer;
                 collapse:fruitList.changeToLayoutContainer">
                         {{#comparisonData}}{{#heading}}
                         <section [class]="'{{headingName}}'.split(' ')[0]">
                             <span>
                                 <h1>{{headingName}}</h1>
                             </span>
                             <div>
                                 {{#rowAndSubHeading}}
                                 <h3>{{rowLabel}}</h3>
                                 <div class = "comp-data">
                                     {{#fruitData}}
                                     <div class = "comp-value">
                                         {{colData}}
                                     </div>
                                     {{/fruitData}}
                                 </div>
                                 {{/rowAndSubHeading}}
                             </div>
                         </section>
                         {{/heading}}{{/comparisonData}}
                     </amp-accordion>
                 </section>
             </template>
         </amp-list>
     </div>
</body>
  
</html>

输出如下:

如何使用Google AMP amp手风琴创建比较手风琴?2

赞(0) 打赏
未经允许不得转载:srcmini » 如何使用Google AMP amp手风琴创建比较手风琴?
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏