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

amp-selector

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

Description

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

 

Required Scripts

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

Supported Layouts

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 [](https://developer.mozilla.org/en/docs/Web/HTML/Element/select).
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](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.

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.

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