LudzkaStronaBiblioteka komponentówPrywatna biblioteka
← Do katalogu

Sekcja · Treść

Proste FAQ

Sekcja pytań i odpowiedzi z przyciskiem obsługiwanym klawiaturą i stanem aria-expanded.

ID zasobucmp-accessible-accordion-01
Eksperymentalny

Podgląd

Rozmiar
Powiększenie100%

Oddzielny kontekst prezentacyjny; podgląd uruchamia zaufany kod biblioteki.

Szczegóły technicznePliki, warianty, zależności i sposób użycia

O komponencie

Prezentowanie krótkich odpowiedzi w interaktywnym, dostępnym bloku FAQ.

Warianty

Standard

Plik podglądu previews/standard.astro

  • Skrypty Przycisk zmienia stan odpowiedzi bez zależności zewnętrznych.

Cichy

Plik podglądu previews/quiet.astro

  • Style globalne Brak globalnego arkusza; wszystkie reguły są lokalne.

Pliki

Folder zasobu wyznacza własne pliki, które można skopiować niezależnie od wspólnych zależności.

  • Źródłosrc/content/resources/accessible-accordion/Accordion.astro
  • Plik podglądusrc/content/resources/accessible-accordion/previews/standard.astro
  • Plik podglądusrc/content/resources/accessible-accordion/previews/quiet.astro
  • Grafikasrc/content/resources/accessible-accordion/assets/thumbnail.svg

Główny plik: src/content/resources/accessible-accordion/Accordion.astro

Zależności

Współdzielone

Brak.

Pakiety zewnętrzne

Brak.

Jak użyć w Astro

Integracja nie została jeszcze zweryfikowana.

  1. Skopiuj Accordion.astro do projektu docelowego. Obsługa aria-expanded, ukrywanie odpowiedzi, CSS i module script znajdują się w tym komponencie.
  2. Zaimportuj komponent na stronie Astro i renderuj jedną instancję, np. <Accordion />. Jeśli dodajesz kolejne instancje na tej samej stronie, nadaj każdemu answerId w Accordion.astro unikalną wartość i dopasuj aria-controls.
  3. Nie instaluj zewnętrznego pakietu; komponent używa natywnego przycisku HTML i lokalnego skryptu Astro. Sprawdź przełączanie myszą, klawiaturą, stan aria-expanded oraz widoczność odpowiedzi przed zmianą statusu.

Fonty, grafiki i style

Fonty

  • System UI sans-serif

Grafiki

  • assets/thumbnail.svg — miniatura karty katalogu

Skrypty

  • Lokalny Astro module script steruje aria-expanded i widocznością odpowiedzi.

Pochodzenie i licencja

Źródło
Opracowano na potrzeby prywatnej biblioteki demonstracyjnej.
Autor / uznanie
Własny materiał demonstracyjny
Licencja
Materiał autorski; sprawdź warunki wykorzystania przed użyciem komercyjnym.