AMP
PT
English Français العربية Español Italiano Indonesia 日本語 한국어 Русский Türkçe 中文

amp-selector

Representa um controle que exibe um menu de opções para escolha do usuário.

Script obrigatório <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
Layouts compatíveis Todos
Exemplos Consulte um exemplo de amp-selector no site AMP By Example.

Comportamento

O seletor de AMP é um controle que representa uma lista de opções para que o usuário escolha uma ou mais delas. O conteúdo das opções não se limita apenas a texto.

  • Um amp-selector pode conter elementos HTML arbitrários ou componentes AMP (por exemplo, amp-carousel, amp-img etc.).
  • Um amp-selector não pode conter nenhum controle aninhado de amp-selector.
  • As opções selecionáveis podem ser definidas adicionando o atributo option ao elemento e atribuindo um valor ao atributo (por exemplo, <li option='value'></li>).
  • As opções desativadas podem ser definidas adicionando o atributo disabled ao elemento (por exemplo, <li option='d' disabled></li>).
  • Opções pré-selecionadas podem ser definidas adicionando o atributo selected ao elemento (por exemplo, <li option='b' selected></li>).
  • Para permitir várias seleções, adicione o atributo multiple ao elemento amp-selector. Por padrão, o amp-selector permite uma seleção por vez.
  • Para desativar o amp-selector inteiro, adicione o atributo disabled ao elemento amp-selector.
  • Quando um amp-selector contém um atributo name e o amp-selector está dentro de uma tag form, se um evento de envio ocorrer no formulário, o amp-selector se comportará como um botão de opção/caixa de seleção e enviará os valores selecionados (atribuídos à opção) para o nome do amp-selector.

Exemplo:

<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="">None of the Above</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>

Apagar seleções

Para limpar todas as seleções quando se toca ou clica em um elemento, defina o atributo de ação on no elemento e especifique o id seletor de AMP com o método de ação clear.

Exemplo:

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

veja demonstrações ativas no AMP By Example.

Atributos

Atributos em <amp-selector>

disabled, form, multiple, name Os atributos acima se comportam da mesma maneira que em um elemento HTML padrão select .
keyboard-select-mode O atributo keyboard-select-mode determina o comportamento de navegação do teclado para opções dentro de amp-selector.
  • none (padrão): a tecla Tab altera o foco entre os itens em amp-selector. O usuário precisa pressionar Enter ou espaço para alterar a seleção. As teclas de seta estão desativadas.
  • focus: a tecla Tab coloca o foco em amp-selector. O usuário navega entre os itens usando as teclas de seta. Pressione a tecla de espaço ou Enter para alterar a seleção.
  • select: a tecla Tab coloca o foco em amp-selector. A seleção muda conforme o usuário navega pelas opções com as teclas de seta.

Atributos nas opções de <amp-selector>

option Indica que a opção é selecionável. Se um valor for especificado, o conteúdo do valor será enviado junto com o formulário.
disabled, selected Os atributos acima se comportam da mesma maneira que em um elemento HTML padrão option.

Eventos

Os eventos podem acionar ações em outros componentes AMP usando o atributo on. Por exemplo, on="select: my-tab.show"

Leia mais sobre ações e eventos de AMP.

select amp-selector aciona o evento select quando o usuário seleciona uma opção. Os seletores múltiplos e únicos acionam essa opção ao selecionar ou desmarcar opções. Tocar em opções desativadas não aciona o evento select.
  • event.targetOption contém o valor do atributo option do elemento selecionado.
  • event.selectedOptions contém uma matriz dos valores do atributo option de todos os elementos selecionados.

Validação

Veja as regras do amp-selector (link em inglês) nas especificações do validador de AMP.

Precisa de mais ajuda?

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.

Ir para 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.

Ir para o GitHub