Katlanabilir

Katlanabilir tek bir <details> öğesidir — bir akordeonun kurulduğu öğenin aynısı, onun hiçbir süsü olmadan. Bir sayfanın ortasındaki tek bir isteğe bağlı ayrıntı için kullanın; bir kümesi olduğunda accordion() kullanın.

Betik gerektirmez ve içerik belgede kaldığı için tarayıcının kendi sayfada bulma işleviyle ve bir arama motoruyla bulunabilir.

Temel katlanabilir

Üretilen yapılandırmayı göster

Kendinize ait bir yapılandırma dosyası olmadan derlemeyi çalıştırdığınızda sitelo’nun yazdığı her şey.

collapsible({ trigger: 'Üretilen yapılandırmayı göster' },
  text({ variant: 'small' }, 'Kendinize ait bir yapılandırma dosyası olmadan derlemeyi çalıştırdığınızda sitelo’nun yazdığı her şey.'),
)

Varsayılan olarak açık

Bu neden var

Çünkü açıklamasını bir tıklamanın ardına saklayan bir sayfa, kimsenin okumadığı bir sayfadır.

collapsible({ trigger: 'Bu neden var', open: true },
  text({ variant: 'small' }, 'Çünkü açıklamasını bir tıklamanın ardına saklayan bir sayfa, kimsenin okumadığı bir sayfadır.'),
)

Zengin içerik

Tam çıktıyı göster
dist/index.htmldist/404.htmldist/sitemap.xml
collapsible({ trigger: 'Tam çıktıyı göster' },
  stack({ gap: 'sm' },
    code('dist/index.html'),
    code('dist/404.html'),
    code('dist/sitemap.xml'),
  ),
)

Başka şeylerin içinde

Katlanabilir, bir kartın, bir uyarının ya da bir tablo hücresinin içinde rahatça durur.

Derleme başarısız

2 bozuk bağlantı

Başarısız bağlantıları göster
  • /docs/old-routing
    /docs sayfasından bağlandı
  • /blog/draft
    /blog sayfasından bağlandı
stack({ gap: 'md' },
  card(
    cardHeader({ title: 'Derleme başarısız', subtitle: '2 bozuk bağlantı' }),
    cardBody(
      collapsible({ trigger: 'Başarısız bağlantıları göster' },
        list({ plain: true },
          listItem({ title: '/docs/old-routing', description: '/docs sayfasından bağlandı' }),
          listItem({ title: '/blog/draft', description: '/blog sayfasından bağlandı' }),
        ),
      ),
    ),
  ),
  alert({ color: 'warning', title: 'Yavaş sayfa' },
    stack({ gap: 'sm' },
      text({ variant: 'small' }, 'Bir sayfanın işlenmesi 500 ms’den uzun sürdü.'),
      collapsible({ trigger: 'Süreleri göster' },
        text({ variant: 'small' }, '/examples/wordpress — 512 ms'),
      ),
    ),
  ),
)

Tetikleyici

Onu metin ve simgelerle sınırlayın. Bir <summary> zaten etkileşimlidir, bu yüzden içine konan bir düğme ya da bağlantı, tek bir eylemin olduğu yere iki denetim yuvalar — menu() işlevinin izlediği kuralın aynısı.

Katlanabilir mi, akordeon mu?

Tek başına bir açılım: collapsible(). Kenarlıklı ve gruplanmış, isteğe bağlı olarak her seferinde yalnızca biri açık olan bir kümesi: accordion().

Proplar

PropTürVarsayılanAçıklama
triggerChild—Özet içeriği. Yalnızca metin ve simgeler.
openbooleanfalseGenişletilmiş başlayıp başlamayacağı.