Instrucciones ¿Agregar amp-accordion?


amp-accordion


Un acordeón proporciona una manera para que los espectadores tengan una mirada en el contorno del contenido y salten a una sección o su opción en su voluntad.

Agregar

Importe el componente amp-accordion justo después de la apertura <head>


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


Uso básico

Cada uno de los componentes amp-accordion se considera una sección en el acordeón. Cada uno de estos nodos debe ser una etiqueta <section>. Cada <section> debe contener sólo dos hijos directos. El primer hijo (de la sección) será considerado como el encabezamiento de la sección. Al hacer clic / pulsar en esta sección, se disparará el comportamiento de expansión / contracción. Utilice el atributo disable-session-states para deshabilitar la preservación del estado de acordeón en una sesión.


Ejemplo

Section 1

Bunch of awesome content.

Section 2

Bunch of even more awesome content. This time in a <div>.

Section 3

Images work as well.
<amp-accordion>   <section expanded>     <h4>Section 1</h4>     <p>Bunch of awesome content.</p>   </section>   <section>     <h4>Section 2</h4>     <div>Bunch of even more awesome content. This time in a       <code>&lt;div&gt;</code>.</div>   </section>   <section>     <h4>Section 3</h4>     <figure>       <amp-img src="/img/amp.jpg"         width="1080"         height="610"         layout="responsive"         alt="an image"></amp-img>       <figcaption>Images work as well.</figcaption>     </figure>   </section> </amp-accordion>

Estilizar el acordeón

amp-accordion añade el atributo expanded a cualquier elemento expandido. Puede utilizar selectores de atributos CSS para diseñar una sección de acordeón en función de si se ha expandido o contraído. Utilice la section[expanded] para diseñar el estado expandido y la section:not([expanded]) para diseñar el estado de colapsado


amp-accordion section[expanded] .show-more {
  display: none;
}
amp-accordion section:not([expanded]) .show-less {
  display: none;
}


Este ejemplo muestra un título diferente basado en si la sección está expandida o no.


Ejemplo

Show more Show less

Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu in eu wisi.

<amp-accordion disable-session-states>   <section>     <h4>       <span class="show-more">Show more</span>       <span class="show-less">Show less</span>     </h4>     <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu       in eu wisi. </p>   </section> </amp-accordion>

Aquí hay otro ejemplo, que oculta el botón "Mostrar más" una vez que se ha hecho clic.


Ejemplo

Show more

Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu in eu wisi.

<amp-accordion id="hidden-header"   disable-session-states>   <section>     <h4>       <span class="show-more">Show more</span>     </h4>     <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu       in eu wisi. </p>   </section> </amp-accordion>

Acordeones anidados

Incluso puede anidar múltiples acordeones. Sólo asegúrese de evitar elementos de estilo basado en el estado expandido del amplificador de acordeón incluido. En particular, evite reglas demasiado genéricas como:


section[expanded] h4 {
  ...
}


En lugar de los elementos directamente objetivo:


section[expanded] > h4 {
  ...
}


Un acordeón anidado:


Ejemplo

Section 1

Bunch of content.

Section 2

Nested Section 2.1

Bunch of content.

Nested Section 2.2

Bunch of more content.

<amp-accordion disable-session-states>   <section>     <h4>Section 1</h4>     <p>Bunch of content.</p>   </section>   <section>     <h4>Section 2</h4>     <amp-accordion class="nested-accordion">       <section>         <h4>Nested Section 2.1</h4>         <p>Bunch of content.</p>       </section>       <section>         <h4>Nested Section 2.2</h4>         <p>Bunch of more content.</p>       </section>     </amp-accordion>   </section> </amp-accordion>



Share:

Related post

Disqus

Disqus comments:


Facebook

Facebook comments: