Fisarmonica
Sezioni di contenuto comprimibili che consentono di espandere solo ciò che serve. Ideali per FAQ, elenchi di funzionalità e opzioni di configurazione.
Sezioni comprimibili: i lettori vedono l'intestazione e la espandono per visualizzare i dettagli. Supportano icone, descrizioni e raggruppamenti.
Usa le fisarmoniche per:
- FAQ: gli utenti esaminano le domande ed espandono le risposte
- Elenchi di funzionalità: ogni funzionalità ha una sezione con i relativi dettagli
- Opzioni di configurazione: raggruppa le impostazioni per categoria
- Guide passo passo con dettagli espandibili
Utilizzo
<Accordion title="Advanced Configuration">
Optional details go here.
</Accordion>Fisarmonica di base
Questo contenuto è nascosto finché la fisarmonica non viene espansa.
Qui puoi includere qualsiasi contenuto: testo, codice, immagini o altri componenti.
<Accordion title="Click to expand">
This content is hidden until the accordion is expanded.
You can include any content here: text, code, images, or other components.
</Accordion>Con descrizione
Aggiungi un sottotitolo con la prop description:
Qui inserisci la documentazione per gli endpoint API di autenticazione.
<Accordion title="API Reference" description="Authentication endpoints">
Documentation for authentication API endpoints goes here.
</Accordion>Aperta per impostazione predefinita
Inizia con la fisarmonica espansa usando defaultOpen:
Questa fisarmonica inizia nello stato aperto.
<Accordion title="Already Expanded" defaultOpen>
This accordion starts in the open state.
</Accordion>Con icona
Opzioni di configurazione e impostazioni.
<Accordion title="Settings" icon="gear">
Configuration options and settings.
</Accordion>Fisarmonica e contenuto espandibile a confronto
| Funzionalità | Fisarmonica | Contenuto espandibile |
|---|---|---|
| Icone | Sì | No |
| Descrizioni | Sì (sottotitolo) | No |
| Raggruppamento | AccordionGroup | Autonomo |
| Peso visivo | Maggiore, simile a una sezione | Minore, in linea |
| Ideale per | FAQ, elenchi di funzionalità | Contenuti supplementari |
Regola generale: usa la fisarmonica quando le sezioni hanno la stessa importanza e gli utenti devono scegliere tra loro. Usa il contenuto espandibile per dettagli utili ma non essenziali che non richiedono particolare rilievo visivo.
Proprietà
Testo dell'intestazione della fisarmonica.
Sottotitolo visualizzato sotto il titolo.
Nome dell'icona Font Awesome (ad es. "gear", "settings").
Variante dello stile dell'icona: light, regular o solid.
Inizia nello stato espanso.