Important: this component does not support your currently selected format stories!
amp-accordion
Görüntüleyenlerin içeriğin ana hatlarına göz atması ve herhangi bir bölüme atlaması için bir yol sağlar. Bu, bir bölümün birkaç cümlesi kaydırma gerektirdiğinde bile mobil cihazlar için yararlıdır.
Zorunlu Komut Dosyası | <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script> |
Desteklenen Düzenler | container |
Örnekler | amp-accordion için ek açıklamalı kod örneği |
Davranış
amp-accordion
bileşeni, daraltılabilir ve genişletilebilir içerik bölümlerini görüntülemenize olanak tanır. amp-accordion
bileşeninin en yakın alt öğelerinin her biri akordeondaki bir bölüm olarak kabul edilir. Bu düğümlerin her biri bir <section>
etiketi olmalıdır.
- Bir
amp-accordion
, doğrudan alt öğeleri olarak bir veya daha fazla<section>
öğesi içerebilir. - Her bir
<section>
tam olarak iki doğrudan alt öğe içermelidir. - İlk alt öğe (bölümün), bölümün başlığını temsil eder ve bir başlık öğesi (
h1
,h2
, ...,h6
,header
) olmalıdır. - İkinci alt öğe (bölümün), AMP HTML'de izin verilen herhangi bir etiket olabilir ve bölümün içeriğini temsil eder.
- Bir bölümün başlığı tıklandığında/dokunulduğunda bölüm genişler veya daralır.
amp-accordion
öğesindeki her bir bölümün daraltılmış/genişletilmiş durumu, oturum düzeyi için korunur. Bu durumu koruma özelliğini devre dışı bırakmak içinamp-accordion
öğesinedisable-session-states
özelliğini ekleyin.
Örnek: Akordeon görüntüleme
Bu örnekte, sayfa yüklendiğinde üçüncü bölümün genişletildiği üç bölüm görüntülüyoruz. Ayrıca, disable-session-states
özelliğini ayarlayarak daraltılmış/genişletilmiş durumu korumayı devre dışı bıraktık.
Section 1
Content in section 1.
Section 2
Section 3
<amp-accordion disable-session-states> <section> <h2>Section 1</h2> <p>Content in section 1.</p> </section> <section> <h2>Section 2</h2> <div>Content in section 2.</div> </section> <section expanded> <h2>Section 3</h2> <amp-img src="/static/inline-examples/images/squirrel.jpg" width="320" height="256"></amp-img> </section> </amp-accordion>
Daha fazla amp-accordion
demosu için Örneklerle AMP sitesini ziyaret edin.
Etkinlikler
Aşağıdaki etkinlikler, accordion
section
öğesinde tetiklenir.
expand |
Bu etkinlik, daraltılmış durumdan genişletilmiş duruma değişen hedef section öğesinde tetiklenir. Halihazırda genişletilmiş olan section öğesinde expand çağrısının bu etkinliği tetiklemeyeceğine dikkat edin. |
collapse |
Bu etkinlik, genişletilmiş durumdan daraltılmış duruma değişen hedef section öğesinde tetiklenir. Halihazırda daraltılmış olan section öğesinde collapse çağrısının bu etkinliği tetiklemeyeceğine dikkat edin. |
İşlemler
expand |
Bu etkinlik, daraltılmış durumdan genişletilmiş duruma değişen hedef section öğesinde tetiklenir. Halihazırda genişletilmiş olan section öğesinde expand çağrısının bu etkinliği tetiklemeyeceğine dikkat edin. |
toggle |
Bu işlem, amp-accordion öğesinin expanded ve collapsed durumları arasında geçiş yapar. Bağımsız değişken olmadan çağrıldığında, akordeonun tüm bölümlerinin durumu değişir. section bağımsız değişkeni ve değer olarak ilgili id bilgisiyle tek bir bölüm belirtilebilir. |
expand |
Bu işlem, bir amp-accordion öğesini genişletir. Öğe halihazırda expanded durumundaysa bu durumda kalır. Bağımsız değişken olmadan çağrıldığında, akordeonun tüm bölümleri genişletilir. section bağımsız değişkeni ve değer olarak ilgili id bilgisiyle tek bir bölüm belirtilebilir. |
collapse |
Bu işlem, bir amp-accordion öğesini daraltır. Öğe halihazırda daraltılmışsa bu durumda kalır. Bağımsız değişken olmadan çağrıldığında, akordeonun tüm bölümlerini daraltır. section bağımsız değişkeni ve değer olarak ilgili id bilgisiyle tek bir bölüm belirtilebilir. |
Özellikler
animate |
Tüm akordeon bölümlerinin genişletilmesini/daralmasını animasyonla göstermek için <amp-accordion> öğesinde bu özelliği ayarlayın. |
disable-session-states |
Akordeonun daraltılmış/genişletilmiş durumunu korumayı devre dışı bırakmak için <amp-accordion> öğesinde bu özelliği ayarlayın. |
expanded |
Sayfa yüklendiğinde bölümü genişletilmiş olarak görüntülemek için bir <section> öğesinde bu özelliği ayarlayın. |
expand-single-section |
Her seferinde yalnızca bir <section> öğesinin genişletilmesine izin vermek için <amp-accordion> öğesinde bu özelliği ayarlayın. Kullanıcı bir <section> öğesine odaklanırsa önceden genişletilmiş olan diğer <section> öğeleri daraltılır. |
Stil
amp-accordion
öğe seçicisini serbest bir şekilde biçimlendirmek için kullanabilirsiniz.amp-accordion
öğeleri her zamandisplay: block
değerindedir.<section>
, başlık ve içerik öğeleri kayan özellikte olamaz.- Bölüm genişletildiğinde,
<section>
öğesinde birexpanded
özelliği bulunur. - İçerik öğesi,
overflow: hidden
ile temizlenip sabitlenir; dolayısıyla, kaydırma çubukları olamaz. <amp-accordion>
,<section>
, başlık ve içerik öğelerinin kenar boşlukları 0 değerine ayarlanır ve özel stillerde geçersiz kılınabilir.- Hem üstbilgi hem de içerik öğeleri
position: relative
değerine sahiptir.
Doğrulama
AMP doğrulayıcı spesifikasyonunda amp-accordion kurallarına bakın.
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