Componenti

Panoramica

I componenti combinano le primitive in preset di progettazione ricorrenti e blocchi di base riutilizzabili per la creazione di app. Come le primitive, ricevono dati e callback dalla tua applicazione. Usa l’importazione della famiglia corrispondente mostrata di seguito. Rimane disponibile anche la voce aggregata twenty-ui/components. L’editor di codice ha il proprio punto di ingresso, twenty-ui/components/code-editor, perché richiede Monaco. Consulta Guida introduttiva per l’installazione e la configurazione del tema.

Input

Importa da twenty-ui/components/input.

Component	Scopo
MainButton	Azioni principali con superficie piena, elevazione e testo semigrassetto.
LightButton	Azioni leggere con enfasi standard o discreta.
IconButton	Azioni icona quadrate o rotonde basate su Button.
LightIconButton	Azioni icona leggere con enfasi standard o discreta.
Pulsante di reazione	Reazioni emoji con conteggio e stato di pressione controllato.
PhoneCountryPicker	Bandiere dei paesi ricercabili e selezione del prefisso internazionale.
NumberStepper	Input numerico compatto con pulsanti di incremento/decremento opzionali.
SearchInput	Testo di ricerca e controlli filtro facoltativi.
CountrySelect	Opzioni dei paesi ricercabili, bandiere e una selezione vuota esplicita.
CurrencyPicker	Opzioni di valuta ricercabili con formattazione esplicita.
ImageInput	Selezione e anteprima delle immagini con caricamenti di proprietà del chiamante.
Controllo segmentato	Scelta radio compatta con opzioni di testo o icona unite.

Navigazione

Importa da twenty-ui/components/navigation.

Component	Scopo
Pulsante elemento elenco	Pulsanti di azione nativi con stile delle righe dell’elenco.
Dropdown	Menu di azioni, selettori ricercabili e pannelli di moduli.
TabButton	Collega percorsi e azioni adiacenti con lo stesso aspetto delle schede.

Dati visualizzati

Importa da twenty-ui/components/data-display.

Component	Scopo
Riga dei dettagli	Etichette allineate, valori su più righe e azioni facoltative.
MetricRow	Etichette e valori formattati con avanzamento determinato opzionale.
AvatarGroup	Avatar sovrapposti e conteggi di overflow.
CommandBlock	Testo del comando con un’azione di copia facoltativa.
JsonTree	Valori JSON espandibili e voci denominate.
StackIcon	Icone con un elemento più piccolo sovrapposto nell’angolo in basso a destra.
TintedIconTile	Icone su riquadri colorati in base al tema.

Feedback

Importa da twenty-ui/components/feedback.

Component	Scopo
Toast	Notifiche, gestione della coda e chiusura.
Callout	Messaggi semantici con azioni e chiusura.
InlineBanner	Banner compatti con azioni facoltative.
ToastProvider e Toaster	Archivi delle notifiche, limiti della coda e rendering.

Layout

Importa da twenty-ui/components/layout.

Component	Scopo
Section	Contenuti correlati con un’intestazione, una descrizione e un’azione facoltativa.
AnimatedIconCrossfade	Transizioni delle icone basate sullo stato.
OverflowingList	Adatta gli elementi visibili e raccoglie quelli in eccesso.

Impostazioni

Importa da twenty-ui/components/settings.

Component	Scopo
SettingsRow	Interruttori etichettati per impostazioni e filtri.

Editor di Codice

Importa da twenty-ui/components/code-editor.

Component	Scopo
CodeEditor	Modifica del codice con Monaco, un’intestazione facoltativa e il tema Twenty.

Il routing, la formattazione dei record, i segnaposto di prodotto e lo stato dell’applicazione appartengono all’applicazione host. I componenti condivisi espongono prop di dati, callback e di rendering per tali integrazioni.

Sviluppatori

App

API

Auto-ospitazione

Contribuire

Libreria UI

Panoramica

Input

Navigazione

Dati visualizzati

Feedback

Layout

Impostazioni

Editor di Codice

​Panoramica

​Input

​Navigazione

​Dati visualizzati

​Feedback

​Layout

​Impostazioni

​Editor di Codice

Panoramica

Input

Navigazione

Dati visualizzati

Feedback

Layout

Impostazioni

Editor di Codice