¿Cómo usar el amp-selector?


amp-selector

Amp-selector permite al usuario elegir entre una lista de opciones. El contenido de las opciones no se limita a solo texto.

Disposición

Ingrese el siguiente script justo después de la apertura <head>

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

1. Single Select

Amp-selector predeterminado es la selección única. La opción es necesaria para todos los elementos seleccionables, por ejemplo, no se puede seleccionar el divisor en el ejemplo siguiente.

Código 
<amp-selector layout="container">
  <amp-img src="/img/landscape_sea_300x199.jpg"
    width="60"
    height="40"
    option="1"></amp-img>
  <amp-img src="/img/landscape_desert_300x200.jpg"
    width="60"
    height="40"
    option="2"></amp-img>
  <div class="divider inline-block mx1"></div>
  <amp-img src="/img/landscape_ship_300x200.jpg"
    width="60"
    height="40"
    option="3"></amp-img>
  <amp-img src="/img/landscape_village_300x200.jpg"
    width="60"
    height="40"
    option="4"></amp-img>
</amp-selector>

Demostración

2. Multi Select

Agregue el atributo múltiple para habilitar la selección múltiple.

Código 
<amp-selector layout="container"
  multiple>
  <amp-img src="/img/landscape_sea_300x199.jpg"
    width="60"
    height="40"
    option="1"></amp-img>
  <amp-img src="/img/landscape_desert_300x200.jpg"
    width="60"
    height="40"
    option="2"></amp-img>
  <amp-img src="/img/landscape_ship_300x200.jpg"
    width="60"
    height="40"
    option="3"></amp-img>
  <amp-img src="/img/landscape_village_300x200.jpg"
    width="60"
    height="40"
    option="4"></amp-img>
</amp-selector>

Demostración


3. Attributes

Los siguientes atributos son compatibles con elementos selectos:

Disabled: deshabilita un elemento.
selected: preselecciona un elemento.

Código 
<amp-selector layout="container"
  multiple>
  <amp-img src="/img/landscape_sea_300x199.jpg"
    width="60"
    height="40"
    option="1"></amp-img>
  <amp-img src="/img/landscape_desert_300x200.jpg"
    width="60"
    height="40"
    option="2"
    selected></amp-img>
  <amp-img src="/img/landscape_ship_300x200.jpg"
    width="60"
    height="40"
    option="3"></amp-img>
  <amp-img src="/img/landscape_village_300x200.jpg"
    width="60"
    height="40"
    option="4"
    disabled></amp-img>
</amp-selector>

Demostración


4. Disabled

Agregue el atributo Disabled para deshabilitar todo el selector.

Código 

  disabled>
  <amp-img src="/img/landscape_sea_300x199.jpg"
    width="60"
    height="40"></amp-img>
  <amp-img src="/img/landscape_desert_300x200.jpg"
    width="60"
    height="40"></amp-img>
  <amp-img src="/img/landscape_ship_300x200.jpg"
    width="60"
    height="40"></amp-img>
  <amp-img src="/img/landscape_village_300x200.jpg"
    width="60"
    height="40"></amp-img>
</amp-selector>

Demostración


5. Forms

Dentro de un form, el amp-selector se comporta como un grupo de botones de radio / checkbox y envía los valores seleccionados al nombre del amp-selector.

Código 

<form action="#"
  method="get"
  target="_top">
  <amp-selector layout="container"
    name="form-select"
    multiple>
    <ul class="m0 p0">
      <li option="a"
        class="px1 mb1">Option A</li>
      <li option="b"
        class="px1 mb1">Option B</li>
      <li option="c"
        class="px1 mb1">Option C</li>
      <li option="na"
        selected
        class="px1 mb1">N/A</li>
    </ul>
  </amp-selector>
  <input type="submit"
    value="Select"
    class="ampstart-btn ampstart-btn-secondary caps">
</form>

Demostración

  • Option A
  • Option B
  • Option C
  • N/A

¿Para qué sirve el amp-selector?

El selector AMP es un control que presenta una lista de opciones y permite al usuario elegir una o muchas opciones.



Tags:

Share:

Related post

Comentarios

Disqus

Disqus comments:
Facebook

Facebook comments: