Komponenty Akordeon / FAQ
Komponenty
Akordeon / FAQ
Zbudowany na natywnym details/summary: działa bez JS, jest dostępny z klawiatury i czytników ekranu. JavaScript dokłada wyłącznie płynną animację wysokości i obrót ikony plus do krzyżyka.
Na żywo
Kliknij pytanie. Otwieranie i zamykanie mają różne krzywe easing.
Najczęstsze pytania
Czy komponent działa bez JavaScriptu?
Tak – to natywny element details/summary, dostępny z klawiatury i czytników ekranu. JS dodaje tylko płynną animację wysokości.
Jak animowane jest rozwijanie?
Rozwijanie używa ease-out (szybko → wolno), zwijanie ease-in (wolno → szybko). Element zostaje otwarty do końca animacji zamykania.
Czy emituje schema FAQPage?
Nie z poziomu komponentu – strukturę danych generuje strona, by uniknąć duplikatów.
Użycie
astro
<Faq
lang="pl"
heading="Najczęstsze pytania"
items={[
{ q: 'Pytanie?', a: 'Odpowiedź.' },
]}
/>Właściwości
| Prop | Typ | Domyślnie | Opis |
|---|---|---|---|
| lang | 'pl' | 'en' | – | Język (domyślny nagłówek i etykiety). |
| items | { q; a }[] | – | Lista pytań i odpowiedzi (tekst). |
| heading | string? | – | Nagłówek sekcji (domyślnie z i18n). |
| paper | boolean | false | Białe tło zamiast cream. |