AMP
ES
English Deutsch Français العربية Italiano 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

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

 

Required Scripts

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

Supported Layouts

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 admitidos Todos
Ejemplos Consulta 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, name Estos 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-mode El 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>

option Indica que la opción se puede seleccionar. Si se especifica un valor, el contenido del valor se envía con el formulario.
disabled, selected Estos 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

select amp-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.

¿Necesita ayuda adicional?

¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.

Ir a Stack Overflow
¿Encontró un error o considera que falta una función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Ir a GitHub