Componente

Prezentare generală

Componentele combină primitivele în preconfigurări de design recurente și blocuri reutilizabile pentru construirea aplicațiilor. La fel ca primitivele, acestea primesc date și callback-uri de la aplicația dvs. Utilizați importul familiei corespunzătoare afișat mai jos. Punctul de intrare agregat twenty-ui/components rămâne, de asemenea, disponibil. Editorul de cod are propriul punct de intrare, twenty-ui/components/code-editor, deoarece necesită Monaco. Consultați Noțiuni introductive pentru instalare și configurarea temei.

Intrare

Importați din twenty-ui/components/input.

Component	Scop
MainButton	Acțiuni proeminente cu o suprafață solidă, elevație și text semiîngroșat.
LightButton	Acțiuni ușoare cu accent standard sau subtil.
Buton pictogramă	Acțiuni cu pictograme pătrate sau rotunde, bazate pe Button.
LightIconButton	Acțiuni cu pictograme ușoare, cu accent standard sau subtil.
Buton de reacție	Reacții emoji cu un număr și o stare de apăsare controlată.
PhoneCountryPicker	Steaguri de țară care pot fi căutate și selectarea codului de apelare.
NumberStepper	Introducere numerică compactă cu butoane de incrementare opționale.
SearchInput	Text de căutare și controale opționale de filtrare.
CountrySelect	Opțiuni de țări în care se poate căuta, steaguri și o selecție goală explicită.
CurrencyPicker	Opțiuni de monedă în care se poate căuta, cu formatare explicită.
ImageInput	Selectarea și previzualizarea imaginilor cu încărcări deținute de apelant.
Control segmentat	Opțiune radio compactă cu opțiuni de text sau pictograme alăturate.

Navigare

Importați din twenty-ui/components/navigation.

Component	Scop
Buton element listă	Butoane de acțiune native cu stil de rând de listă.
Dropdown	Meniuri de acțiuni, selectoare cu căutare și panouri de formular.
TabButton	Linkuri de rută și acțiuni adiacente cu același aspect ca filele.

Date afișate

Importați din twenty-ui/components/data-display.

Component	Scop
Rând cu detalii	Etichete aliniate, valori cu încadrare pe mai multe rânduri și acțiuni opționale.
MetricRow	Etichete și valori formatate cu progres determinat opțional.
AvatarGroup	Avatare suprapuse și numărători de depășire.
CommandBlock	Text de comandă cu o acțiune opțională de copiere.
JsonTree	Valori JSON extensibile și intrări denumite.
StackIcon	Pictograme cu un element mai mic suprapus în colțul din dreapta jos.
TintedIconTile	Pictograme pe plăci colorate conform temei.

Feedback

Importați din twenty-ui/components/feedback.

Component	Scop
Toast	Notificări, gestionarea cozii și închiderea acestora.
Callout	Mesaje semantice cu acțiuni și posibilitate de închidere.
InlineBanner	Bannere compacte cu acțiuni opționale.
ToastProvider and Toaster	Stocări de notificări, limite de coadă și redare.

Aspect

Importați din twenty-ui/components/layout.

Component	Scop
Section	Conținut asociat cu un titlu, o descriere și o acțiune opțională.
AnimatedIconCrossfade	Tranziții ale pictogramelor determinate de stare.
OverflowingList	Încadrați elementele vizibile și grupați surplusul.

Setări

Importați din twenty-ui/components/settings.

Component	Scop
SettingsRow	Comutatoare etichetate pentru setări și filtre.

Editor de Cod

Importați din twenty-ui/components/code-editor.

Component	Scop
CodeEditor	Editare de cod cu Monaco, un antet opțional și tema Twenty.

Rutarea, formatarea înregistrărilor, substituenții de produs și starea aplicației aparțin aplicației gazdă. Componentele partajate expun proprietăți de date, callback și randare pentru acele integrări.

Dezvoltatori

Aplicații

API

Autogazda

Contribuie

Biblioteca UI

Prezentare generală

Intrare

Navigare

Date afișate

Feedback

Aspect

Setări

Editor de Cod

​Prezentare generală

​Intrare

​Navigare

​Date afișate

​Feedback

​Aspect

​Setări

​Editor de Cod

Prezentare generală

Intrare

Navigare

Date afișate

Feedback

Aspect

Setări

Editor de Cod