A veces tenemos mucho contenido para mostrar y para que el sitio web se vea bonito y corto, usamos los cuadros de texto plegables. Los cuadros de texto plegables son esa división que es la combinación de encabezado y contenido, generalmente solo el encabezado es visible, pero cuando se presiona, se muestra el contenido.
Configuración: debe importar el componente amp-accordion en su encabezado para usar esta etiqueta.
HTML
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"> </script>
Para hacer la división de comparación, simplemente usaremos el CSS para hacer la división de comparación. Puede utilizar el código mencionado a continuación:
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>
Ejemplo:
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA