AMP

amp-selector

Representa un control que muestra un menú de varias opciones entre las que el usuario puede elegir.

Secuencia de comandos obligatoria<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
Diseños admitidosTodos
EjemplosConsulta el ejemplo de amp-selector de AMP By Example.

Comportamiento

El selector de AMP es un control que muestra una lista y permite al usuario elegir una o varias opciones, cuyo contenido no se limita solo al texto.

  • Un amp-selector puede contener cualquier elemento HTML arbitrario o componente de AMP (p. ej., amp-carousel, amp-img, etc.).
  • Un amp-selector no puede contener controles anidados de amp-selector.
  • Las opciones que se pueden seleccionar se definen añadiendo el atributo option al elemento y asignando un valor al atributo (p. ej., <li option='value'></li>).
  • Las opciones inhabilitadas se definen añadiendo el atributo disabled al elemento (p. ej., <li option='d' disabled></li>).
  • Las opciones preseleccionadas se definen añadiendo el atributo selected al elemento (p. ej., <li option='b' selected></li>).
  • Para permitir seleccionar varias opciones, añade el atributo multiple al elemento amp-selector. De forma predeterminada, amp-selector admite una única opción seleccionada a la vez.
  • Para inhabilitar amp-selector, añade el atributo disabled al elemento amp-selector.
  • Cuando amp-selector se encuentra dentro de una etiqueta form, contiene un atributo `name` y se produce un evento de envío, se comporta como un grupo de botones de selección o de casillas, y envía los valores seleccionados (asociados a la opción) utilizando el nombre que se le ha asignado``.

Ejemplo:

<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="">Ninguna de las opciones anteriores</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>

Borrar selecciones

Para borrar todas las selecciones cuando se toca o se hace clic en un elemento, define el atributo de acción on en el elemento y especifica el id de AMP Selector con el método de acción clear.

Ejemplo:

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

Puedes ver ejemplos en AMP By Example.

Atributos

Atributos de <amp-selector>

disabled, form, multiple, nameEstos atributos se comportan del mismo modo que en un HTML estándar select element [](https://developer.mozilla.org/en/docs/Web/HTML/Element/select).
keyboard-select-modeEl atributo keyboard-select-mode determina el comportamiento de desplazamiento con el teclado de las opciones que están dentro de amp-selector.
  • none(valor predeterminado): el tabulador cambia el enfoque entre los distintos elementos que están dentro de amp-selector. El usuario debe pulsar Intro o la barra espaciadora para cambiar la selección. Las teclas de flecha están inhabilitadas.
  • focus: el tabulador cambia el enfoque a amp-selector. El usuario se desplaza por los elementos mediante las teclas de flecha; debe pulsar Intro o la barra espaciadora para cambiar la selección.
  • select: el tabulador cambia el enfoque a amp-selector. La selección cambia a medida que el usuario se desplaza por las opciones mediante las teclas de flecha. amp-selector

Atributos de las opciones de <amp-selector>

optionIndica que la opción se puede seleccionar. Si se especifica un valor, el contenido del valor se envía con el formulario.
disabled, selectedEstos atributos se comportan del mismo modo que en un HTML estándar [option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) element.

Eventos

Los eventos pueden activar acciones en otros componentes de AMP mediante el atributo on, por ejemplo, on="select: my-tab.show".

Más información sobre las acciones y los eventos de AMP

selectamp-selector activa el evento select cuando el usuario selecciona una opción. Los selectores, tanto los que permiten seleccionar una como varias opciones, activan este evento al seleccionar o deseleccionar opciones. Si se tocan las opciones inhabilitadas, no se activa el evento select.
  • event.targetOption contiene el valor de atributo `option` del elemento seleccionado.
  • event.selectedOptions contiene una matriz de los valores de atributo option de todos los elementos seleccionados.

Validación

Consulta las reglas de amp-selector en la especificación de la herramienta de validación de AMP.

¿Necesitas más ayuda?

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