Riquadri informativi
Scopri come usare i componenti Note, Tip, Warning, Danger, Check e Callout personalizzati per evidenziare le informazioni chiave nella documentazione.
Usa i riquadri informativi per evidenziare contesti importanti, come avvisi, suggerimenti o requisiti, senza interrompere il flusso.
Riquadri disponibili
Note - Contesto utile o informazioni aggiuntive. Usalo per suggerimenti che migliorano la comprensione.
Info - Informazioni o fatti neutrali. Usalo per dettagli supplementari.
Tip - Procedure consigliate o ottimizzazioni. Usalo per suggerimenti avanzati che migliorano l'esperienza.
Warning - Avvertenze o requisiti importanti. Usalo quando ignorare qualcosa potrebbe causare problemi.
Danger - Avvertenze critiche. Usalo per azioni che potrebbero causare perdita di dati o problemi di sicurezza.
Check - Conferme di operazioni riuscite. Usalo per confermare un comportamento corretto o il completamento di un'operazione.
Utilizzo
<Note>
This is helpful context for the reader.
</Note>
<Warning>
This could cause issues if you skip this step.
</Warning>
<Danger>
This action cannot be undone. Proceed with caution.
</Danger>Con titoli
Aggiungi un titolo personalizzato a qualsiasi riquadro informativo:
<Note title="Did you know?">
You can use **Markdown** inside callouts, including `code` and [links](/introduction).
</Note>Puoi usare Markdown nei riquadri informativi, inclusi code e i link.
Con blocchi di codice
I riquadri informativi possono contenere codice:
La firma della funzione getData() è cambiata:
// Before (v1.x)
getData(id)
// After (v2.0)
getData({ id, options })Procedure consigliate
Un numero eccessivo di riquadri informativi ne riduce l'efficacia. Cerca di usarne al massimo 1-2 per pagina.
Riserva i riquadri informativi alle informazioni che il lettore non deve assolutamente ignorare.
| Scenario | Riquadro |
|---|---|
| Suggerimento utile | <Tip> |
| Contesto aggiuntivo | <Note> o <Info> |
| Possibile problema | <Warning> |
| Azione irreversibile | <Danger> |
| Conferma | <Check> |
| Branding personalizzato | <Callout> |
I riquadri informativi devono essere facilmente consultabili. Se ti servono più paragrafi, valuta l'uso di un Accordion.
Buono: una o due frasi Da evitare: più paragrafi di testo
Posiziona i riquadri informativi:
- Prima del codice che presenta requisiti
- Dopo istruzioni con avvertenze importanti
- Vicino al contenuto a cui fanno riferimento
Proprietà
Tutti i riquadri informativi accettano le stesse proprietà:
Titolo personalizzato (sostituisce quello predefinito).
Accessibilità
I riquadri informativi sono implementati con HTML semantico e ruoli ARIA:
- Gli screen reader annunciano il tipo di riquadro informativo
- Il colore non è l'unico indicatore (sono incluse icone)
- Contrasto cromatico sufficiente in entrambi i temi
Callout personalizzato
Crea riquadri informativi con icone e colori personalizzati usando il componente Callout:
Personalizzato - Usa qualsiasi icona e colore per adattarlo al tuo contenuto.
Distribuisci le modifiche con sicurezza usando la pipeline CI/CD.
Usa prefissi per lo stile delle icone come regular/, light/ o duotone/ per pesi diversi.
Utilizzo di Callout personalizzati
<Callout icon="key" color="#FFC107">
This callout uses a key icon with amber color.
</Callout>
<Callout icon="rocket" color="#9333EA">
This callout uses a rocket icon with purple color.
</Callout>
<Callout icon="regular/star" color="#EC4899">
Use style prefixes for different icon weights.
</Callout>Proprietà di Callout personalizzati
Nome dell'icona (vedi Icone).
Codice colore esadecimale (ad es. #FFC107). Per impostazione predefinita usa il colore di accento.
Prefissi per lo stile delle icone: aggiungi un prefisso per modificare il peso dell'icona:
solid/- Icone piene (predefinito)regular/- Icone con contornolight/- Icone con contorno sottileduotone/- Icone bicolore