AMP
TR
English Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский 中文

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çin amp-accordion öğesine disable-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

Content in 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>
Open this snippet in playground

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 zaman display: block değerindedir.
  • <section>, başlık ve içerik öğeleri kayan özellikte olamaz.
  • Bölüm genişletildiğinde, <section> öğesinde bir expanded ö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.

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