Introducción:
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:
- Tienes que importar el componente amp-accordion en tu encabezado para usar esta etiqueta.
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"> </script>
Ejemplo:
<!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>
Producción:
Esta es la ventana de salida…
Estilo personalizado:
Aunque es una etiqueta muy simple, se puede personalizar según las necesidades del usuario, ya que tiene muchas opciones de personalización como:
- Encabezado dinámico
- Encabezado oculto
- Acordeón anidado
- Acordeón plegable automáticamente
- Acordeón animado
- Acordeón de comparación
A través de toda esta personalización, es muy fácil hacer un hermoso sitio web.
Referencias:
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