Vai al contenuto principale

​
Panoramica

Twenty UI è la libreria UI React open source di Twenty. Fornisce primitive fondamentali, componenti condivisi, icone e token del tema con CSS predefinito, quindi l’applicazione non necessita di un compilatore CSS-in-JS.

​
Installa

Per un’applicazione React esistente, installa la libreria. React 19 è richiesto.
L’editor di codice ha un punto di ingresso separato, twenty-ui/components/code-editor. Gli altri componenti non richiedono Monaco. Per utilizzare l’editor di codice, installa le relative dipendenze peer facoltative e configura i worker di Monaco per il tuo bundler prima di montarlo:
Se stai creando un’app Twenty, segui Utilizzo dei componenti Twenty UI. Il renderer dei componenti front fornisce il tema dell’area di lavoro e ha una configurazione diversa da quella di un’applicazione browser autonoma. Mantieni twenty-ui, twenty-sdk e twenty-client-sdk alla stessa versione.

​
Carica gli stili e fornisci un tema

Importa una volta il foglio di stile dei componenti e un foglio di stile del tema nel punto di ingresso dell’applicazione. ThemeProvider applica la classe del tema attivo e rende disponibili ai componenti i valori del tema.
Il foglio di stile dei componenti include un reset globale. Verifica il suo effetto quando aggiungi Twenty UI a un’applicazione esistente.

​
Sostituisci gli stili

Twenty UI inserisce gli stili dei componenti e il reset nel livello di cascata twenty-ui. Gli stili che scrivi al di fuori di un livello, come un className, un modulo CSS o una regola CSS-in-JS, sovrascrivono tali regole a livelli indipendentemente dalla specificità del selettore o dall’ordine di importazione. I fogli di stile del tema e le regole globali Monaco opzionali dell’editor rimangono senza livelli. Anche i reset globali degli elementi nella tua applicazione non hanno livelli, quindi sovrascriverebbero i componenti di Twenty UI. Dichiara un livello per essi prima che venga caricato il foglio di stile di Twenty UI:
Con Tailwind CSS v4, posiziona Twenty UI tra i livelli base e di utilità di Tailwind:

​
Scegli un punto di ingresso

Importa i componenti dal relativo sottopercorso pubblico per mantenere mirate le importazioni: Le primitive sono controlli fondamentali, inclusi controlli composti come Select, Popover e AlertDialog. I componenti condivisi combinano le primitive in preset di progettazione ricorrenti e blocchi riutilizzabili per la creazione di app. Entrambi ricevono dati e callback dall’applicazione. Usa MainButton per le azioni principali e LightButton per le azioni leggere. Entrambi provengono da twenty-ui/components/input e condividono il contratto di interazione fondamentale di Button. Il routing e il layout della pagina rimangono nell’applicazione. Ogni famiglia di primitive e componenti condivisi ha un punto di ingresso pubblico corrispondente, come twenty-ui/primitives/input e twenty-ui/components/settings. Le voci aggregate twenty-ui/primitives e twenty-ui/components esportano le rispettive famiglie. La voce radice twenty-ui riesporta primitive, componenti condivisi, icone, token del tema e utilità. Le risorse, gli helper di test e l’editor di codice opzionale hanno punti di ingresso separati. Importa singole icone, ad esempio IconCheck, da twenty-ui/icon. Il provider dinamico di icone include l’intero catalogo di icone, quindi riservalo alle interfacce che devono cercare icone in fase di esecuzione.

​
Hook responsive

Importa useIsMobile, useIsTouchDevice e useMediaQuery da twenty-ui/utilities. Le costanti delle query provengono da twenty-ui/utilities; MOBILE_VIEWPORT proviene da twenty-ui/theme. Le sottoscrizioni condividono un MediaQueryList per query e si aggiornano quando cambia la relativa corrispondenza. Gli hook restituiscono false durante il rendering del server, il primo rendering di idratazione e quando window.matchMedia non è disponibile. In un componente front di Twenty, le query di larghezza seguono il riquadro del widget. useIsMobile segue quindi la larghezza del widget, mentre useIsTouchDevice segue l’input principale del dispositivo. Usa gli override delle storie per provare questi stati in Storybook.

​
Continua

  • Temi: utilizza token semantici e override con ambito definito.
  • Modalità scura: passa tra palette chiare e scure.

​
Esplora la libreria

  • Primitive: controlli fondamentali raggruppati per famiglia, con esempi di utilizzo e riferimenti API.
  • Componenti: preset di progettazione condivisi e blocchi di costruzione riutilizzabili dell’app composti da primitive.