AMP

amp-selector

Rappresenta un controllo che apre un menu di opzioni e permette all'utente di scegliere quelle più adeguate.

Script obbligatorio <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
Layout supportati Tutti
Esempi Vedi l'esempio di amp-selector del sito AMP By Example.

Comportamento

Il selettore AMP è un controllo che apre un elenco di opzioni e consente all'utente di sceglierne una o più; i contenuti delle opzioni non si limitano al solo testo.

  • amp-selector può contenere elementi HTML o componenti AMP di qualsiasi tipo, ad esempio, amp-carousel, amp-img e così via.
  • amp-selector non può contenere alcun controllo amp-selector nidificato.
  • Le opzioni selezionabili possono essere impostate aggiungendo l'attributo option all'elemento e assegnando un valore all'attributo, ad esempio, <li option='value'></li>.
  • Le opzioni disattivate possono essere impostate aggiungendo l'attributo disabled all'elemento, ad esempio, <li option='d' disabled></li>.
  • Le opzioni preselezionate possono essere impostate aggiungendo l'attributo selected all'elemento, ad esempio, <li option='b' selected></li>.
  • Per consentire di selezionare più opzioni, aggiungi l'attributo multiple all'elemento amp-selector. Per impostazione predefinita, amp-selector consente una sola selezione alla volta.
  • Per disattivare l'intero amp-selector, aggiungi l'attributo disabled all'elemento amp-selector.
  • Quando un amp-selector contiene un attributo name e amp-selector si trova all'interno di un tag form, se nel modulo si verifica un evento di invio, amp-selector si comporta come un gruppo di pulsanti di opzione/caselle di controllo e invia i valori selezionati (quelli assegnati all'opzione) al nome dell'amp-selector.

Esempio:

<form id="form1" action="/" method="get" target="_blank">
  <amp-selector name="single_image_select" layout="container">
    <ul>
      <li><amp-img src="/img1.png" width="50" height="50" option="1"></amp-img></li>
      <li><amp-img src="/img2.png" width="50" height="50" option="2"></amp-img></li>
      <li option="na" selected="">Nessuna delle precedenti</li>
    </ul>
  </amp-selector>
  <amp-selector name="multi_image_select" layout="container" multiple="">
    <amp-img src="/img1.png" width="50" height="50" option="1"></amp-img>
    <amp-img src="/img2.png" width="50" height="50" option="2"></amp-img>
    <amp-img src="/img3.png" width="50" height="50" option="3"></amp-img>
  </amp-selector>
  <amp-selector name="multi_image_select_1" layout="container" multiple="">
    <amp-carousel id="carousel-1" width="200" height="60" controls="">
      <amp-img src="/img1.png" width="80" height="60" option="a"></amp-img>
      <amp-img src="/img2.png" width="80" height="60" option="b" selected=""></amp-img>
      <amp-img src="/img3.png" width="80" height="60" option="c"></amp-img>
      <amp-img src="/img4.png" width="80" height="60" option="d" disabled=""></amp-img>
    </amp-carousel>
  </amp-selector>
</form>

<p><amp-selector name="multi_image_select_2" layout="container" multiple="" form="form1">
  <amp-carousel height="300" id="carousel-1" type="slides" width="400" controls="">
    <amp-img height="60" src="/img1.png" width="80" option="a"></amp-img>
    <amp-img height="60" src="/img2.png" width="80" option="b" selected=""></amp-img>
    <amp-img height="60" src="/img3.png" width="80" option="c"></amp-img>
    <amp-img height="60" src="/img4.png" width="80" option="d"></amp-img>
  </amp-carousel>
</amp-selector>

Annullare le selezioni

Per fare in modo che tutte le selezioni vengano annullate quando l'utente fa clic o tocca un elemento, imposta l'attributo di azione on sull'attributo e specifica l'id del selettore AMP con il metodo di azione clear.

Esempio:

<button on="tap:mySelector.clear">Clear Selection</button>
<amp-selector id="mySelector" layout="container" multiple>
  <div option>Option One</div>
  <div option>Option Two</div>
  <div option>Option Three</div>
</amp-selector>

guarda le demo dal vivo sul sito AMP By Example.

Attributi

Attributi di <amp-selector>

disabled, form, multiple, name Questi attributi si comportano come quando utilizzati in un elemento HTML standardselect .
keyboard-select-mode L'attributo keyboard-select-mode determina il comportamento della navigazione tramite tastiera per le opzioni all'interno di amp-selector.
  • none (valore predefinito): il tasto TAB permette di spostare lo stato attivo da un elemento all'altro all'interno di amp-selector. L'utente deve premere Invio o Spazio per modificare la selezione. I tasti freccia sono disattivati.
  • focus: il tasto TAB imposta lo stato attivo su amp-selector. L'utente naviga tra gli elementi utilizzando i tasti freccia. È necessario premere Spazio o Invio per modificare la selezione.
  • select: Il tasto TAB imposta lo stato attivo su amp-selector. La selezione cambia quando l'utente naviga tra gli elementi utilizzando i tasti freccia.

Attributi delle opzioni <amp-selector>

option Indica che l'opzione è selezionabile. Se viene specificato un valore, i contenuti di tale valore vengono inviati insieme al modulo.
disabled, selected Questi attributi si comportano allo stesso modo di quando vengono utilizzati in un elemento HTML standard option.

Eventi

Gli eventi possono attivare delle azioni in altri componenti AMP utilizzando l'attributo on, ad esempio on="select: my-tab.show"

Ulteriori informazioni su azioni ed eventi AMP.

select amp-selector attiva l'evento select quando l'utente seleziona un'opzione. I selettori multipli e singoli lo utilizzano quando si selezionano o deselezionano delle opzioni. L'evento select non si attiva quando vengono toccate le opzioni disattivate.
  • event.targetOption contiene il valore dell'attributo option relativo all'elemento selezionato.
  • event.selectedOptions contiene un array dei valori relativi all'attributo option di tutti gli elementi selezionati.

Convalida

Consulta le regole di amp-selector nelle specifiche dello strumento di convalida AMP.

Serve ancora aiuto?

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