AMP
TR
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский 中文 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

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.

 

Required Scripts

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

Supported Layouts

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[](https://developer.mozilla.org/en/docs/Web/HTML/Element/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](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.

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.

Daha fazla yardıma mı ihtiyacınız var?

Bu belgeyi defalarca okudunuz ama tüm sorularınıza tatmin edici bir yanıt bulamadınız mı? Belki başka kişiler de bu şekilde hissetmiştir: Stack Overflow'dan onlara ulaşın.

Stack Overflow'a git
Bir hata veya eksik bir özellik mi buldunuz?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

GitHub'a git