Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
ES
English Deutsch Français العربية Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文

amp-accordion

Description

Permite a los usuarios echar un vistazo al esquema del contenido e ir directos a la sección que quieran cuando lo deseen.

Required Scripts

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

Supported Layouts

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 atributo disable-session-states al elemento amp-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

Content in 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>
Abrir este fragmento en Playground

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 tienen display: block.
  • Los elementos <section>, título y contenido no pueden ser flotantes.
  • Cuando se expande una sección, el elemento <section> tiene un atributo expanded.
  • 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.

¿Necesita ayuda adicional?

¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.

Ir a Stack Overflow
¿Encontró un error o considera que falta una función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Ir a GitHub