AMP
ES
English Deutsch Français العربية Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-sidebar

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Permite mostrar metacontenido pensado para accesos temporales como, por ejemplo, enlaces, botones o menús de navegación.

 

Required Scripts

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

Supported Layouts

Descripción Las barras laterales permiten mostrar metacontenido pensado para accesos temporales (enlaces, botones, menús u otros elementos de navegación). Las barras laterales se pueden mostrar tocando un botón, mientras el contenido principal sigue visible debajo.
Secuencia de comandos obligatoria <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
Diseños admitidos nodisplay
Ejemplos Consulta el ejemplo de amp-sidebar de AMP By Example.

Descripción general

<amp-sidebar> oculta el metacontenido destinado a accesos temporales (enlaces, botones, menús u otros elementos de navegación). <amp-sidebar> se puede abrir y cerrar tocando botones y tocando en un punto fuera de amp-sidebar. Sin embargo, los atributos opcionales que aceptan media queries se pueden utilizar para mostrar metacontenido en otras partes del sitio web. Los elementos secundarios de <nav toolbar="(media query)" toolbar-target="elementID"> permiten que el contenido de la barra lateral se muestre en otras partes del contenido principal.

Comportamiento

  • <amp-sidebar> debe ser un elemento secundario directo de <body>.
  • La barra lateral solo puede aparecer en la parte izquierda o derecha de las páginas.
  • <amp-sidebar> puede contener cualquier elemento HTML válido (compatible con AMP).
  • <amp-sidebar> puede contener cualquiera de los siguientes elementos AMP:
    • <amp-accordion>
    • <amp-img>
    • <amp-fit-text>
    • <amp-list>
    • <amp-live-list>
    • <amp-social-share>
  • La altura máxima de la barra lateral es de 100 vh. Si la altura supera los 100 vh, aparece una barra de desplazamiento vertical. La altura predeterminada son 100 vh en CSS y se puede anular en CSS.
  • El ancho de la barra lateral se puede definir y ajustar mediante CSS (ancho mínimo: 45 píxeles).
  • El zoom táctil está inhabilitado en amp-sidebar y se enmascara cuando se abre la barra lateral.

Ejemplo:

En el ejemplo siguiente, amp-sidebar sirve para contener los elementos de navegación. Sin embargo, el segundo y cuarto elemento, Nav Item 2 y Nav Item 4, están asignados al ID de elemento que aparece en la página. Al usar el atributo on, podemos desplazarnos sin problemas hasta el elemento utilizando el ID de elemento y scrollTo.

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>
</amp-sidebar>

Abrir y cerrar la barra lateral

Para alternar, abrir o cerrar la barra lateral al tocar o hacer clic en un elemento, asigna el atributo de acción on en el elemento y especifica uno de los siguientes métodos de acción:

Acción Descripción
open (predeterminado) Abre la barra lateral.
close Cierra la barra lateral.
toggle Alterna el estado de la barra lateral.

Si el usuario vuelve a tocar el área de contenido principal parcialmente visible, se cierra la barra lateral.

También puedes cerrarla pulsando la tecla Esc.

Ejemplo:

<button class="hamburger" on='tap:sidebar1.toggle'></button>
<button on='tap:sidebar1'>Open</button>
<button on='tap:sidebar1.open'>Open</button>
<button on='tap:sidebar1.close'>x</button>

Barra de herramientas

Puedes crear un elemento toolbar que se muestre en <body> especificando el atributo toolbar con una media query y un atributo toolbar-target con un ID de elemento en un elemento <nav> secundario de <amp-sidebar>. toolbar duplica el elemento <nav> y sus elementos secundarios, y añade el elemento al elemento toolbar-target.

Comportamiento

  • La barra lateral puede implementar barras de herramientas añadiendo elementos de navegación con el atributo toolbar y toolbar-target.
  • El elemento de navegación debe ser un elemento secundario de <amp-sidebar> y debe tener este formato: <nav toolbar="(media-query)" toolbar-target="elementID">.
    • Por ejemplo, este sería un uso válido de la barra de herramientas: <nav toolbar="(max-width: 1024px)" toolbar-target="target-element">.
  • El elemento de navegación que contiene el atributo de la barra de herramientas solo puede incluir un elemento <ul> que contenga elementos <li>.
    • Los elementos <li> pueden contener cualquier elemento HTML válido (admitido por AMP) o cualquiera de los elementos AMP compatibles con <amp-sidebar>.
  • El comportamiento de la barra de herramientas solo se aplica durante el tiempo en que la media query del atributo toolbar es válido. Además, para que pueda aplicarse la barra de herramientas, debe haber un elemento con el ID del atributo toolbar-target en la página.

Ejemplo: Barra de herramientas básica

En el siguiente ejemplo, se muestra un elemento toolbar si el ancho de la ventana es igual o inferior a 767 píxeles. toolbar contiene un elemento de entrada de búsqueda. El elemento toolbar se añadirá al elemento <div id="target-element">.

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>

  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>
        <input placeholder="Search..."/>
      </li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element">
</div>

Barra de herramientas de estilo

El elemento toolbar que se incluye en el elemento <amp-sidebar> tendrá clases aplicadas al elemento en función de si el elemento toolbar-target se muestra o se oculta. Esto es útil para aplicar diferentes estilos en el elemento toolbar y luego en el elemento toolbar-target. Las clases son amp-sidebar-toolbar-target-shown y amp-sidebar-toolbar-target-hidden. La clase amp-sidebar-toolbar-target-shown se aplica al elemento toolbar cuando se muestra el elemento toolbar-target. La clase amp-sidebar-toolbar-target-hidden se aplica al elemento toolbar cuando se oculta el elemento toolbar-target.

Ejemplo: Clases de estado de la barra de herramientas

En el siguiente ejemplo, se muestra un elemento toolbar si el ancho de la ventana es igual o inferior a 767 píxeles. toolbar contiene un elemento de entrada de búsqueda. El elemento toolbar se añadirá al elemento <div id="target-element">. Sin embargo, hemos añadido algunos estilos personalizados para ocultar el elemento toolbar cuando se muestra el elemento <div id="toolbar-target">.

<style amp-custom="">
  .amp-sidebar-toolbar-target-shown {
      display: none;
  }
</style>

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>

  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>
        <input placeholder="Search..."/>
      </li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element">
</div>

Consulta varios ejemplos en AMP By Example.

Barra lateral para historias

Se admite el uso de amp-sidebar en el componente amp-story.

Comportamiento

  • <amp-sidebar> debe ser un elemento secundario directo de <amp-story>.
  • La barra lateral se define en el valor predeterminado "start" en los documentos AMP normales; es decir, a la derecha para los idiomas que se escriben de izquierda a derecha, y a la izquierda para los idiomas que se escriben de derecha a izquierda.
  • El color de fondo predeterminado de <amp-sidebar> es el blanco y se puede anular en CSS.
  • El ancho máximo de <amp-sidebar> se aplica cuando el valor es 280px y, en el caso de los ordenadores, cuando el valor es 320px.
  • En la UI de la historia aparecerá un botón de estilo "hamburger" que abre y cierra la barra lateral.

Para ofrecer una experiencia coherente en la UI de la plataforma de la historia, no se puede usar cualquier atributo o función. Estos son los atributos y las funciones que pueden usarse en amp-sidebar dentro del componente amp-story.

Atributos permitidos

Ejemplo: Barra lateral básica en una historia

En el siguiente ejemplo se muestra un amp-sidebar simple dentro del componente amp-story.

...
<body>
  <amp-story standalone>
  <amp-sidebar id="sidebar1" layout="nodisplay">
    <ul>
      <li><a href="https://amp.dev"> External Link </a></li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
    </ul>
  </amp-sidebar>
  <amp-story-page id="cover">
    <amp-story-grid-layer template="fill">
      <h1>Hello World</h1>
      <p>This is the cover page of this story.</p>
    </amp-story-grid-layer>
  </amp-story-page>
  ...
</body>

Atributos

side

Indica en qué lado de la página debe abrirse la barra lateral, es decir, left o right. Si no se asigna un valor a side, se heredará del atributo dir de la etiqueta body (ltr => left , rtl => right); si el atributo dir no existe, a side se le asigna el valor predeterminado left.

layout

Especifica el diseño en que se muestra la barra lateral, que debe ser nodisplay.

open

Este atributo está presente cuando la barra lateral está abierta.

data-close-button-aria-label

Atributo opcional que se utiliza para definir la etiqueta ARIA en el botón de cierre; se añade para incluir la función de accesibilidad.

toolbar

Este atributo se encuentra en elementos <nav toolbar="(media-query)" toolbar-target="elementID"> secundarios y acepta una media query sobre cuándo mostrar una barra de herramientas. Consulta la sección Barra de herramientas para obtener más información sobre cómo usar este elemento.

toolbar-target

Este atributo se encuentra en elementos <nav toolbar="(media-query)" toolbar-target="elementID"> secundarios y acepta un ID de un elemento en la página. El atributo toolbar-target colocará la barra de herramientas en el ID especificado del elemento de la página, sin el estilo de barra de herramientas predeterminado. Consulta la sección Barra de herramientas para obtener más información sobre cómo usar este elemento.

atributos comunes

Este elemento incluye atributos comunes que también se usan en componentes AMP.

Estilo

Al componente amp-sidebar se le pueden aplicar estilos con CSS estándar.

  • Se puede usar width de amp-sidebar para ajustar la anchura entre los valores mínimos (45 píxeles) y máximos (80 vw) predefinidos.
  • Se puede ajustar la altura de amp-sidebar. Si la altura supera los 100 vw, la barra lateral tendrá una barra de desplazamiento vertical. La altura predeterminada de la barra lateral es de 100 vw y se puede anular en CSS para acortarla.
  • El estado actual de la barra lateral se muestra mediante el atributo open, el cual se define en la etiqueta amp-sidebar cuando la barra lateral está abierta en la página.

En AMP Start encontrarás menús de navegación prediseñados que podrás adaptar para tus páginas AMP.

Desplazamiento automático en áreas adicionales

amp-sidebar permite desplazar automáticamente el contenedor adicional al primer elemento que está decorado con autoscroll como atributo, tanto en barras laterales como en barras de herramientas.

Esta función es útil si la lista de navegación es larga y la barra lateral debe desplazarse hasta los elementos de navegación actuales al cargarse la página.

Cuando se usa la función toolbar, autoscroll solo funciona si el elemento <nav toolbar> está definido en overflow: auto o overflow: scroll.

<style amp-custom="">
  nav [toolbar] {
    overflow: auto;
  }
</style>

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li autoscroll class="currentPage">Nav item 4</li>
      <li>Nav item 5</li>
      <li>Nav item 6</li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element">
</div>

En este archivo de ejemplo se incluye código de muestra que funciona.

Consideraciones relacionadas con la experiencia de usuario

Cuando uses <amp-sidebar>, ten en cuenta que los usuarios suelen ver tus páginas en un visor de AMP desde el móvil, que puede mostrar un encabezado de posición fija. Además, los navegadores suelen mostrar su propio encabezado fijo en la parte superior de las páginas. Añadir otro elemento de posición fija en la parte superior de la pantalla ocuparía mucho espacio en las pantallas de los móviles y tampoco proporcionaría información nueva al usuario.

Por ello, se recomienda que las funciones para abrir la barra lateral no se coloquen en un encabezado fijo que ocupe el ancho de la página.

Validación

Consulta las reglas de amp-sidebar 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