AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

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üzenler Tü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, name Bu özellikler, standart HTML öğesi gibi davranır.select.
keyboard-select-mode keyboard-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

option Seçeneğin belirlenebilir olduğunu gösterir. Bir değer belirtilirse değerin içeriği formla birlikte gönderilir.
disabled, selected Bu özellikler, standart HTML öğesi gibi davranır.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.

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