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

amp-accordion

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

Görüntüleyenlerin içeriğin ana hatlarına göz atması ve istediklerinde seçtikleri bir bölüme atlaması için bir yol sağlar.

 

Required Scripts

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

Supported Layouts

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>
Bu kod parçacığını playground'ta aç

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.

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