AMP

amp-selector

Bir seçenek menüsü sunan ve kullanıcının bu menüden seçim yapmasına olanak tanıyan bir kontrolü temsil eder.

Zorunlu Komut Dosyası<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
Desteklenen DüzenlerTümü
ÖrneklerÖrneklerle AMP amp-selector örneği sayfasına bakın.

Davranış

AMP seçici, seçeneklerin bir listesini sunan ve kullanıcının bir veya daha fazla seçenek belirlemesine olanak tanıyan bir kontroldür; seçeneklerin içeriği yalnızca metinle sınırlı değildir.

  • amp-selector, rastgele HTML öğeleri veya AMP bileşenleri içerebilir (ör. amp-carousel, amp-img vb.).
  • amp-selector, iç içe yerleştirilmiş amp-selector kontrolleri içeremez.
  • Belirlenebilir seçenekler, öğeye option özelliği eklenerek ve özelliğe bir değer atanarak ayarlanabilir (ör. <li option='value'></li>).
  • Devre dışı bırakılan seçenekler, öğeye disabled özniteliği eklenerek ayarlanabilir. (ör. <li option='d' disabled></li>).
  • Önceden belirlenmiş seçenekler, öğeye selected özelliği eklenerek ayarlanabilir (ör. <li option='b' selected></li>).
  • Birden çok seçime izin vermek için amp-selector öğesine multiple özelliği ekleyin. Varsayılan olarak amp-selector, bir defada bir seçim yapılmasına izin verir.
  • amp-selector öğesini tamamıyla devre dışı bırakmak için amp-selector öğesine disabled özelliğini ekleyin.
  • Bir amp-selector, bir name özelliği içerdiğinde ve amp-selector, bir form etiketinin içinde olduğunda, formda bir gönderme etkinliği gerçekleşirse amp-selector, bir radyo düğmesi/onay kutusu gibi davranır ve seçili değerleri (seçeneğe atanan değerler) amp-selector adıyla gönderir.

Örnek:

<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="">Yukarıdakilerin Hiçbiri</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>

Seçimleri temizleme

Bir öğeye dokunulduğunda veya bir öğe tıklandığında tüm seçimleri temizlemek için öğede on işlem özelliğini ayarlayın ve AMP Seçici id bilgisini clear işlem yöntemiyle belirtin.

Örnek:

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

Örneklerle AMP sayfasında canlı demoları görebilirsiniz.

Özellikler

<amp-selector> ile ilgili özellikler

disabled, form, multiple, nameBu özellikler, standart HTML öğesi gibi davranır.select[](https://developer.mozilla.org/en/docs/Web/HTML/Element/select).
keyboard-select-modekeyboard-select-mode özelliği, amp-selector içindeki seçeneklerin klavye gezinme davranışını belirtir.
  • none (varsayılan): Sekme tuşu, odağı amp-selector içindeki öğeler arasında değiştirir. Kullanıcı, seçimi değiştirmek için Enter veya boşluk tuşuna basmalıdır. Ok tuşları devre dışıdır.
  • focus: Sekme tuşu, odağı amp-selector öğesine verir. Kullanıcı, ok tuşlarını kullanarak öğeler arasında gezinir. Seçimi değiştirmek için boşluk veya Enter tuşuna basılmalıdır.
  • select: Sekme tuşu, odağı amp-selector öğesine verir. Kullanıcı, ok tuşları ile seçeneklerde gezindikçe seçim değişir.

<amp-selector> seçenekleriyle ilgili özellikler

optionSeçeneğin belirlenebilir olduğunu gösterir. Bir değer belirtilirse değerin içeriği formla birlikte gönderilir.
disabled, selectedBu özellikler, standart HTML öğesi gibi davranır.[option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option).

Etkinlikler

Etkinlikler, on özelliğini kullanan diğer AMP bileşenlerinde işlemleri tetikleyebilir. Ör. on="select: my-tab.show"

AMP İşlemleri ve Etkinlikler hakkında daha fazla bilgi edinin.

selectamp-selector, kullanıcı bir seçenek belirlediğinde select etkinliğini tetikler. Çoklu ve tekli seçiciler, seçenekler belirlenirken veya seçimler kaldırılırken bunu tetikler. Devre dışı seçeneklere dokunulması select etkinliğini tetiklemez.
  • `event.targetOption, seçili öğenin option özellik değerini içerir.
  • event.selectedOptions, tüm seçili öğelerin bir option özellik değerleri dizisini içerir.

Doğrulama

AMP doğrulayıcı spesifikasyonundaki amp-selector kurallarına bakın.

Need more help?

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