Zwijany panel

Zwijany panel to pojedynczy <details> — ten sam element, z którego zbudowany jest akordeon, tyle że bez jego oprawy. Użyj go dla jednego opcjonalnego szczegółu pośrodku strony; gdy jest ich zestaw, użyj accordion().

Nie potrzebuje żadnego skryptu, a ponieważ treść zostaje w dokumencie, znajdzie ją zarówno wyszukiwanie w przeglądarce, jak i wyszukiwarka.

Podstawowy panel

Pokaż wygenerowaną konfigurację

Wszystko, co sitelo zapisuje, gdy uruchomisz build bez własnego pliku konfiguracyjnego.

collapsible({ trigger: 'Pokaż wygenerowaną konfigurację' },
  text({ variant: 'small' }, 'Wszystko, co sitelo zapisuje, gdy uruchomisz build bez własnego pliku konfiguracyjnego.'),
)

Domyślnie otwarty

Po co to jest

Bo strona, która chowa swoje wyjaśnienie za kliknięciem, to strona, której nikt nie czyta.

collapsible({ trigger: 'Po co to jest', open: true },
  text({ variant: 'small' }, 'Bo strona, która chowa swoje wyjaśnienie za kliknięciem, to strona, której nikt nie czyta.'),
)

Bogata treść

Pokaż pełny wynik
dist/index.htmldist/404.htmldist/sitemap.xml
collapsible({ trigger: 'Pokaż pełny wynik' },
  stack({ gap: 'sm' },
    code('dist/index.html'),
    code('dist/404.html'),
    code('dist/sitemap.xml'),
  ),
)

Wewnątrz innych rzeczy

Zwijany panel chętnie siedzi w karcie, alercie albo komórce tabeli.

Build nieudany

2 martwe odnośniki

Pokaż niedziałające odnośniki
  • /docs/old-routing
    podlinkowane z /docs
  • /blog/draft
    podlinkowane z /blog
stack({ gap: 'md' },
  card(
    cardHeader({ title: 'Build nieudany', subtitle: '2 martwe odnośniki' }),
    cardBody(
      collapsible({ trigger: 'Pokaż niedziałające odnośniki' },
        list({ plain: true },
          listItem({ title: '/docs/old-routing', description: 'podlinkowane z /docs' }),
          listItem({ title: '/blog/draft', description: 'podlinkowane z /blog' }),
        ),
      ),
    ),
  ),
  alert({ color: 'warning', title: 'Wolna strona' },
    stack({ gap: 'sm' },
      text({ variant: 'small' }, 'Jedna strona renderowała się dłużej niż 500 ms.'),
      collapsible({ trigger: 'Pokaż czasy' },
        text({ variant: 'small' }, '/examples/wordpress — 512 ms'),
      ),
    ),
  ),
)

Wyzwalacz

Trzymaj w nim tekst i ikony. <summary> jest już interaktywne, więc przycisk albo odnośnik w środku zagnieżdża dwie kontrolki tam, gdzie jest jedna akcja — tej samej zasady trzyma się menu().

Zwijany panel czy akordeon?

Jedno ujawnienie samo w sobie: collapsible(). Zestaw takich, obramowany i zgrupowany, opcjonalnie z jednym otwartym naraz: accordion().

Propsy

PropTypDomyślnieOpis
triggerChild—Treść summary. Tylko tekst i ikony.
openbooleanfalseCzy startuje rozwinięty.