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 supportatiTutti
EsempiVedi 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, nameQuesti attributi si comportano come quando utilizzati in un elemento HTML standardselect [](https://developer.mozilla.org/en/docs/Web/HTML/Element/select).
keyboard-select-modeL'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>

optionIndica che l'opzione è selezionabile. Se viene specificato un valore, i contenuti di tale valore vengono inviati insieme al modulo.
disabled, selectedQuesti attributi si comportano allo stesso modo di quando vengono utilizzati in un elemento HTML standard [option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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.

selectamp-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