Accordion

Componenti a fisarmonica per mostrare e nascondere i contenuti

Gli accordion consentono agli utenti di espandere e comprimere sezioni di contenuto. Usa gli accordion per la rivelazione progressiva e per organizzare le informazioni.

Accordion singolo

Sono un accordion.

Puoi inserire qualsiasi contenuto qui, inclusi altri componenti, come il codice:

HelloWorld.java

 class HelloWorld {
     public static void main(String[] args) {
         System.out.println("Hello, World!");
     }
 }

Accordion example

<Accordion title="Sono un accordion.">
  Puoi inserire qualsiasi contenuto qui, inclusi altri componenti, come il codice:

   ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
  ```
</Accordion>

Gruppi di Accordion

Raggruppa accordion correlati usando <AccordionGroup>. In questo modo crei una sezione coerente di accordion che possono essere espansi o compressi individualmente.

Per iniziare

Puoi inserire altri componenti all’interno degli accordion.

HelloWorld.java

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Funzionalità avanzate

Aggiungi icone per rendere gli accordion più riconoscibili a colpo d’occhio e facili da scansionare.

Risoluzione dei problemi

Mantieni i contenuti correlati organizzati in gruppi.

Accordion Group Example

<AccordionGroup>
  <Accordion title="Per iniziare">
    Puoi inserire altri componenti all'interno degli accordion.

    ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```
  </Accordion>

  <Accordion title="Funzionalità avanzate" icon="alien-8bit">
    Aggiungi icone per rendere gli accordion più riconoscibili a colpo d’occhio e facili da scansionare.
  </Accordion>

  <Accordion title="Risoluzione dei problemi">
    Mantieni i contenuti correlati organizzati in gruppi.
  </Accordion>
</AccordionGroup>

Proprietà

title · string · required

Titolo nell’anteprima dell’Accordion.

description · string

Dettaglio sotto il titolo nell’anteprima dell’Accordion.

defaultOpen · boolean · default: "false"

Indica se l’Accordion è aperto per impostazione predefinita.

icon · string

L’icona da visualizzare.

Opzioni:

• Nome dell’icona Font Awesome
• Nome dell’icona Lucide
• Codice SVG compatibile con JSX racchiuso tra parentesi graffe
• URL di un’icona ospitata esternamente
• Percorso di un file icona nel tuo progetto

Per icone SVG personalizzate:

1. Converti il tuo SVG con il convertitore SVGR.
2. Incolla il tuo codice SVG nel campo di input SVG.
3. Copia l’elemento completo <svg>...</svg> dal campo di output JSX.
4. Racchiudi il codice SVG compatibile con JSX tra parentesi graffe: icon={<svg ...> ... </svg>}.
5. Regola height e width secondo necessità.

iconType · string

Lo stile dell’icona Font Awesome. Utilizzato solo con le icone Font Awesome.

Opzioni: regular, solid, light, thin, sharp-solid, duotone, brands.