amp-accordion
Permite a los usuarios echar un vistazo al esquema del contenido e ir directos a la sección que quieran. Resulta útil para los dispositivos móviles en los que hace falta desplazarse casi cada dos frases de una sección.
Secuencia de comandos obligatoria | <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script> |
Diseños admitidos | container |
Ejemplos | Ejemplo comentado de código de amp-accordion |
Comportamiento
El componente amp-accordion
permite mostrar secciones de contenido que se pueden ocultar y expandir. Cada uno de los elementos secundarios de amp-accordion
se considera una sección del "acordeón". Cada uno de estos nodos debe ser una etiqueta <section>
.
amp-accordion
puede contener uno o varios elementos secundarios directos<section>
.- Cada
<section>
debe contener exactamente dos elementos secundarios directos. - El primer elemento secundario de la sección (es decir, de
) representa el título de esta y debe ser un elemento de título (es decir, h1
,h2
, ...,h6
,header
). - El segundo elemento secundario de la sección puede ser cualquier etiqueta permitida en AMP HTML y representa el contenido de la sección.
- Al tocar o hacer clic en el título de una sección, el contenido se expande o se oculta.
- El estado (oculto o expandido) de cada sección del elemento
amp-accordion
se guardará para el nivel de sesión. Si no quieres que se mantenga, añade el atributodisable-session-states
al elementoamp-accordion
.
Ejemplo: Mostrar un acordeón
En este ejemplo, se muestran tres secciones; la tercera se expande cuando se carga la página. Además, hemos añadido disable-session-states
para que no se mantenga el estado expandido u oculto de las secciones.
Section 1
Content in section 1.
Section 2
Section 3
<amp-accordion disable-session-states> <section> <h2>Section 1</h2> <p>Content in section 1.</p> </section> <section> <h2>Section 2</h2> <div>Content in section 2.</div> </section> <section expanded> <h2>Section 3</h2> <amp-img src="/static/inline-examples/images/squirrel.jpg" width="320" height="256"></amp-img> </section> </amp-accordion>
Para ver más ejemplos del componente amp-accordion
, visita AMP By Example.
Eventos
Los eventos que aparecen a continuación se activarán en las section
de accordion
.
expand |
Este evento se activa en una section para que pase de estar oculta a expandida. Ten en cuenta que, si se hace una llamada a expand en una section que ya está expandida, no se activará este evento. |
collapse |
Este evento se activa en una section para que pase de estar expandida a oculta. Ten en cuenta que, si se hace una llamada a collapse en una section que ya está oculta, no se activará este evento. |
Acciones
expand |
Este evento se activa en una section para que pase de estar oculta a expandida. Ten en cuenta que, si se hace una llamada a expand en una section que ya está expandida, no se activará este evento. |
toggle |
Esta acción alterna entre los estados expanded y collapsed de amp-accordion . Si se llama a la acción sin argumentos, se alternarán todas las secciones del acordeón. Se puede especificar una sola sección mediante el argumento section y el id correspondiente como valor. |
expand |
Esta acción expande un amp-accordion . Si ya está expandido, seguirá estándolo. Si se llama a la acción sin argumentos, expandirá todas las secciones del acordeón. Se puede especificar una sola sección mediante el argumento section y el id correspondiente como valor. |
collapse |
Esta acción oculta un amp-accordion . Si ya está oculto, seguirá estándolo. Si se llama a la acción sin argumentos, ocultará todas las secciones del acordeón. Se puede especificar una sola sección mediante el argumento section y el id correspondiente como valor. |
Atributos
animate |
Define este atributo en <amp-accordion> para animar la función para expandir u ocultar de todas las secciones del acordeón. |
disable-session-states |
Define este atributo en <amp-accordion> para que no se mantenga el estado expandido u oculto de las secciones del acordeón. |
expanded |
Define este atributo en <section> para que la sección se muestre expandida al cargar la página. |
expand-single-section |
Define este atributo en <amp-accordion> para que solo se pueda expandir una <section> a la vez. Si el usuario selecciona una <section> , se ocultarán las otras <section> que se hayan expandido previamente. |
Estilo
- Puedes utilizar el selector de elementos de
amp-accordion
para aplicarle los estilos que quieras. - Los elementos
amp-accordion
siempre tienendisplay: block
. - Los elementos
<section>
, título y contenido no pueden ser flotantes. - Cuando se expande una sección, el elemento
<section>
tiene un atributoexpanded
. - El elemento de contenido se ha corregido mediante clearfix utilizando
overflow: hidden
y, por lo tanto, no puede incluir barras de desplazamiento. - Los márgenes de los elementos de título, contenido,
<amp-accordion>
y<section>
están en 0 de forma predeterminada y se pueden definir mediante estilos personalizados. - Tanto el elemento de título como el de contenido tienen
position: relative
.
Validación
Consulta las reglas de amp-accordion en la especificación de la herramienta de validación de AMP.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.
Go to Stack Overflow Found a bug or missing a feature?The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.
Go to GitHub