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>


Tags:

Share:

Related post

Comentarios

Disqus

Disqus comments:
Facebook

Facebook comments: