Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
PT
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Русский Türkçe 中文

amp-selector

Description

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

Required Scripts

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

Supported Layouts

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?

Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.

Ir para o Stack Overflow
Encontrou um bug ou sente falta de um recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Ir para o GitHub