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 deamp-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 elementoamp-selector
. Por padrão, oamp-selector
permite uma seleção por vez. - Para desativar o
amp-selector
inteiro, adicione o atributodisabled
ao elementoamp-selector
. - Quando um
amp-selector
contém um atributoname
e oamp-selector
está dentro de uma tagform
, se um evento de envio ocorrer no formulário, oamp-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 doamp-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>
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 .
|
Validação
Veja as regras do amp-selector (link em inglês) nas especificações do validador de AMP.
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