Pillola

Pillole rappresentano un insieme di uno o più oggetti che possono essere inseriti o modificati dall’utente. Per impostazione predefinita, le pillole possono essere rimosse dall’utente. Quando necessario, l’ordine delle pillole può essere modificato dall’utente utilizzando il drag and drop. Sono utilizzati per rappresentare entità complesse in piccoli blocchi come i dettagli di contatto. Pillole Contentful sono sono utilizzati per rendere le impostazioni locali di transizione e gli elementi di tag.

sommario

• Come usare la Pillola
• esempi di Codice
• Contenuto raccomandazioni
• Accessibilità

Come usare la Pillola

• utilizzare la Pillola per rappresentare i dati, come i dettagli di contatto o tag
• può essere utilizzato per i contenuti web che ha bisogno di essere etichettati, suddivisi in categorie, o organizzato utilizzando le parole chiave che descrivono loro.

Esempi di codice

Esempio di utilizzo con opzione trascinabile

 
 test label 
 
 // import { Pill } from '@contentful/forma-36-react-components'; 
 <Pill 
 tabIndex={0} 
 testId="pill-item" 
 label="test label" 
 onClose={() => {}} 
 onDrag={() => {}} 
 /> 

 Nascondi sorgente

Esempio del componente Pillola con dragHandle, in tal caso Icona.
 
[email protected]
 
 // import { Pill, Icon } from '@contentful/forma-36-react-components'; 
 <Pill 
 label="[email protected]" 
 dragHandleComponent={ 
 <Icon 
 icon="ArrowUp" 
 color="positive" 
 style={{ padding: '0.375rem 0.625rem' }} 
 /> 
 } 
 /> 

Nascondi sorgente

 Raccomandazioni per il contenuto:

 Assicurati che il testo della pillola sia chiaro e conciso.

Accessibilità 

Il valore dell’etichetta viene passato nel componente come aria-label e title nell’elemento span, come seguearia-label={label} title={label}.