AMP
IT
English Deutsch Français العربية Español 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

consente di visualizzare meta contenuti destinati all'accesso temporaneo come navigazione, link, pulsanti, menu.

 

Required Scripts

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

Supported Layouts

Descrizione Una barra laterale consente di visualizzare meta contenuti destinati all'accesso temporaneo (link di navigazione, pulsanti, menu e così via). La barra laterale può essere visualizzata toccando un pulsante, mentre i contenuti principali rimangono visibili al di sotto.
Script obbligatorio <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
Layout supportati nodisplay
Esempi Vedi l'esempio di amp-sidebar sul sito AMP By Example.

Panoramica

<amp-sidebar> nasconde meta contenuti destinati all'accesso temporaneo (link di navigazione, pulsanti, menu e così via). <amp-sidebar> può essere aperta e chiusa toccando pulsanti e toccando all'esterno dell'amp-sidebar. Tuttavia, gli attributi facoltativi che accettano le media query possono essere utilizzati per visualizzare meta contenuti in altre parti del sito. Gli elementi secondari <nav toolbar="(media query)" toolbar-target="elementID"> consentono di visualizzare i contenuti della barra laterale in altre parti dei contenuti principali.

Comportamento

  • <amp-sidebar> deve essere un elemento secondario diretto di <body>.
  • La barra laterale può essere visualizzata solo sul lato sinistro o destro di una pagina.
  • <amp-sidebar> può contenere qualsiasi elemento HTML valido (supportato da AMP).
  • <amp-sidebar> può contenere uno dei seguenti elementi AMP:
    • <amp-accordion>
    • <amp-img>
    • <amp-fit-text>
    • <amp-list>
    • <amp-live-list>
    • <amp-social-share>
  • L'altezza massima della barra laterale è 100 vh. Se l'altezza supera 100 vh viene visualizzata una barra di scorrimento verticale. L'altezza predefinita è impostata su 100 vh in CSS ed è sovrascrivibile in CSS.
  • La larghezza della barra laterale può essere impostata e regolata tramite CSS (la larghezza minima è 45 px).
  • Touch zoom è disattivato nella amp-sidebar ed è nascosto quando la sidebar è aperta.

Esempio

Nel seguente esempio, utilizziamo amp-sidebar come contenitore degli elementi di navigazione. Tuttavia, il secondo e il quarto elemento, Nav Item 2 e Nav Item 4, vengono assegnati all'id elemento presente nella pagina. Utilizzando l'attributo on, possiamo scorrere facilmente fino all'elemento, utilizzando il relativo id e 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>

Apertura e chiusura della barra laterale

Per attivare/disattivare, aprire o chiudere la barra laterale quando un elemento viene toccato o cliccato, imposta l'attributo di azione on sull'elemento e specifica uno dei seguenti metodi di azione:

Azione Descrizione
apertura (predefinito) Apre la barra laterale
chiusura Chiude la barra laterale
attivazione/disattivazione Attiva o disattiva lo stato della barra laterale

Se l'utente tocca nuovamente l'area del contenuto principale parzialmente visibile, la barra laterale viene chiusa.

In alternativa, la barra laterale viene chiusa anche premendo il tasto Esc sulla tastiera.

Esempio

<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 degli strumenti

Puoi creare un elemento toolbar visualizzato in <body> specificando l'attributo toolbar con una media query e un attributo toolbar-target con un id elemento su un elemento <nav> secondario di <amp-sidebar>. La toolbar duplica l'elemento <nav> e i relativi elementi secondari e lo aggiunge all'elemento toolbar-target.

Comportamento

  • La barra laterale può implementare le barre degli strumenti aggiungendo elementi nav con gli attributi toolbar e toolbar-target.
  • L'elemento nav deve essere un elemento secondario di <amp-sidebar> e avere il seguente formato: <nav toolbar="(media-query)" toolbar-target="elementID">.
    • Ad esempio, questo è un uso valido dell'attributo toolbar: <nav toolbar="(max-width: 1024px)" toolbar-target="target-element">.
  • L'elemento nav contenente l'attributo toolbar deve contenere solo un singolo elemento <ul>, che a sua volta contiene elementi <li>.
    • Gli elementi <li> possono contenere qualsiasi elemento HTML valido (supportato da AMP) o qualsiasi elemento AMP supportato da <amp-sidebar>.
  • Il comportamento della barra degli strumenti viene applicato solo mentre la media query dell'attributo toolbar è valida. Inoltre, per poter applicare la barra degli strumenti, nella pagina deve essere presente un elemento con id attributo toolbar-target.

Esempio: barra degli strumenti di base

Nel seguente esempio, viene visualizzata una toolbar se la larghezza della finestra è inferiore o uguale a 767 px. La toolbar contiene un elemento di input di ricerca. L'elemento toolbar verrà aggiunto all'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="Cerca..."/>
      </li>
    </ul>
  </nav>
</amp-sidebar>

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

Stile della barra degli strumenti

All'elemento toolbar all'interno dell'elemento <amp-sidebar> verranno applicate classi a seconda che l'elemento toolbar-target sia visualizzato o nascosto. Questa funzione è utile per applicare stili diversi all'elemento toolbar e quindi all'elemento toolbar-target. Le classi sono amp-sidebar-toolbar-target-shown e amp-sidebar-toolbar-target-hidden. La classe amp-sidebar-toolbar-target-shown viene applicata all'elemento toolbar quando l'elemento toolbar-target è visualizzato. La classe amp-sidebar-toolbar-target-hidden viene applicata all'elemento toolbar quando l'elemento toolbar-target è nascosto.

Esempio: classi di stato della barra degli strumenti

Nel seguente esempio, viene visualizzata una toolbar se la larghezza della finestra è inferiore o uguale a 767 px. La toolbar contiene un elemento di input di ricerca. L'elemento toolbar verrà aggiunto all'elemento <div id="target-element">. Tuttavia, abbiamo aggiunto alcuni stili personalizzati per nascondere l'elemento toolbar quando è visualizzato l'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="Cerca..."/>
      </li>
    </ul>
  </nav>
</amp-sidebar>

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

guarda le demo dal vivo sul sito AMP By Example.

Barra laterale per le storie

L'uso di amp-sidebar è supportato nel componente amp-story.

Comportamento

  • <amp-sidebar> deve essere un elemento secondario diretto di <amp-story>.
  • Per impostazione predefinita, la barra laterale è sul lato "start" per i normali documenti AMP, ovvero quelli redatti in lingue con scrittura da sinistra a destra e da destra a sinistra.
  • Il colore di sfondo predefinito di <amp-sidebar> è bianco ed è sovrascrivibile in CSS.
  • La larghezza massima obbligatoria della <amp-sidebar> è 280 px e 320 px per i computer desktop.
  • Un pulsante "hamburger" che apre/chiude la barra laterale sarà visualizzato nell'interfaccia utente della storia.

Per fornire un'esperienza di interfaccia utente coerente sull'intera piattaforma della storia, esistono alcune restrizioni relative agli attributi e alle funzionalità consentiti. Di seguito sono riportati gli attributi e le funzionalità consentiti di un amp-sidebar all'interno di un amp-story.

Attributi consentiti

Esempio: barra laterale di base in una Storia

Il seguente esempio mostra una semplice amp-sidebar all'interno di un'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>

Attributi

side

Indica da che lato della pagina si deve aprire la barra laterale: left o right. Se non viene specificato un side, il valore side viene ereditato dall'attributo dir del tag body (ltr => left , rtl => right). Se non esiste alcuna dir, il side predefinito è left.

layout

Specifica il layout di visualizzazione della barra laterale, che deve essere nodisplay.

open

Questo attributo è presente quando la barra laterale è aperta.

data-close-button-aria-label

Attributo facoltativo utilizzato per impostare l'etichetta ARIA per il pulsante di chiusura aggiunto per l'accessibilità.

toolbar

Questo attributo è presente negli elementi secondari <nav toolbar="(media-query)" toolbar-target="elementID"> e accetta una media query relativa a quando mostrare una barra degli strumenti. Per ulteriori informazioni su come utilizzare le barre degli strumenti, consulta la sezione Barra degli strumenti.

toolbar-target

Questo attributo è presente nell'elemento secondario <nav toolbar="(media-query)" toolbar-target="elementID"> e accetta un ID di un elemento nella pagina. L'attributo toolbar-target inserisce la barra degli strumenti nell'ID specificato dell'elemento sulla pagina, senza utilizzare lo stile predefinito della barra degli strumenti. Per ulteriori informazioni su come utilizzare le barre degli strumenti, consulta la sezione Barra degli strumenti.

attributi comuni

Questo elemento include attributi comuni estesi ai componenti AMP.

Stili

Il componente amp-sidebar può essere in stile CSS standard.

  • La width della amp-sidebar può essere impostata in modo da rientrare tra i valori minimi e massimi predefiniti, rispettivamente 45 px e 80 vw.
  • Se necessario, l'altezza della amp-sidebar può essere impostata in modo da adattare l'altezza della barra laterale. Se l'altezza supera 100 vw, la barra laterale avrà una barra di scorrimento verticale. L'altezza preimpostata della barra laterale è 100 vw e può essere ignorata in CSS per accorciarla.
  • Lo stato corrente della barra laterale viene esposto tramite l'attributo open impostato nel tag amp-sidebar quando la barra laterale è aperta nella pagina.

consulta AMP Start per menu di navigazione reattivi e con stile predefinito, da utilizzare nelle tue pagine AMP.

Scorrimento automatico all'interno delle aree in overflow

amp-sidebar può far scorrere automaticamente il contenitore in overflow al primo elemento decorato con autoscroll come attributo sia per la barra laterale che per la barra degli strumenti.

Questa funzione è utile quando utilizzi un elenco di navigazione lungo e vuoi che la barra laterale scorra fino agli elementi di navigazione correnti quando la pagina si carica.

Quando utilizzi la funzione toolbar, autoscroll funziona solo se l'elemento <nav toolbar> è impostato su 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>

Per un esempio funzionante di codice, consulta questo file di esempio.

Considerazioni relative all'esperienza utente

Quando utilizzi <amp-sidebar>, tieni presente che gli utenti visualizzano spesso la tua pagina sui dispositivi mobili in un visualizzatore AMP, che potrebbe visualizzare un'intestazione fissa. Inoltre, spesso i browser visualizzano la propria intestazione fissa nella parte superiore della pagina. Un ulteriore elemento con posizione fissa nella parte superiore dello schermo occuperebbe molto spazio sullo schermo del dispositivo mobile, con contenuti che non forniscono all'utente nuove informazioni.

Per questo motivo, consigliamo che gli inviti ad aprire la barra laterale non siano posizionati in un'intestazione fissa a larghezza massima.

Convalida

Consulta le regole amp-sidebar nella specifica dello strumento di convalida AMP.

Ti servono altre informazioni?

Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.

Vai a Stack Overflow
Hai trovato un bug o una funzione mancante?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Vai a GitHub