Ogni componente della libreria, raggruppato in otto famiglie. Ciascuno genera markup Bootstrap 5 e funziona allo stesso modo in Delphi, C++ Builder e .NET. Fai clic su un componente per aprire la sua pagina dedicata con utilizzo ed esempi.
12 componenti
7 componenti
4 componenti
12 componenti
7 componenti
8 componenti
3 componenti
4 componenti
Griglie, calendari e board che renderizzano direttamente i tuoi dataset.
| Componente | Classe | Descrizione |
|---|---|---|
| Grid | TsgcHTMLComponent_Grid | Tabella ricca di funzionalità: ordinamento, filtro, esportazione CSV/PDF, modifica inline, raggruppamento, scroll virtuale e query IA. |
| DataTable | TsgcHTMLComponent_DataTable | Tabella dati di livello superiore che combina Grid + Pagination con barra degli strumenti, ricerca e conteggio delle righe. |
| Calendar | TsgcHTMLComponent_Calendar | Calendario a griglia mensile con indicatori di evento e navigazione precedente/successivo. |
| Scheduler | TsgcHTMLComponent_Scheduler | Pianificatore a calendario (viste mese / settimana) che renderizza gli eventi per data. |
| Timeline | TsgcHTMLComponent_Timeline | Timeline verticale di eventi datati, caricabile da un dataset. |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | Board Kanban di colonne e schede trascinabili. |
| Gantt | TsgcHTMLComponent_Gantt | Diagramma di Gantt per la pianificazione di progetti con barre di avanzamento delle attività. |
Elementi visivi basati sui dati, costruiti a partire dai tuoi numeri.
| Componente | Classe | Descrizione |
|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Grafico Chart.js: line, bar, pie, doughnut, radar, polar, bubble e scatter. |
| Gauge | TsgcHTMLComponent_Gauge | Indicatore SVG semicircolare con soglie di colore basso / medio / alto. |
| Diagram | TsgcHTMLComponent_Diagram | Diagramma di flusso con nodi e frecce renderizzato come SVG inline. |
| Map | TsgcHTMLComponent_Map | Mappa interattiva Leaflet.js (tile OpenStreetMap / CartoDB) con marcatori. |
Tutto il necessario per acquisire dati, con validazione e binding ai dataset.
| Componente | Classe | Descrizione |
|---|---|---|
| Form | TsgcHTMLComponent_Form | Costruttore di moduli basato sui dati con validazione, layout e generazione di moduli tramite IA. |
| Edit | TsgcHTMLComponent_Edit | Campo di testo a riga singola con etichetta, testo di aiuto e binding ai dataset. |
| Memo | TsgcHTMLComponent_Memo | Campo di testo multilinea (textarea) con etichetta e testo di aiuto. |
| CheckBox | TsgcHTMLComponent_CheckBox | Campo checkbox con etichetta e stato selezionato. |
| RadioGroup | TsgcHTMLComponent_RadioGroup | Gruppo di opzioni radio mutuamente esclusive. |
| Select | TsgcHTMLComponent_Select | Menu a discesa Select con gruppi di opzioni, selezione multipla e binding ai dataset. |
| InputGroup | TsgcHTMLComponent_InputGroup | Campo di input con testo addon anteposto / posposto. |
| AutoComplete | TsgcHTMLComponent_AutoComplete | Campo di testo supportato da una datalist HTML5 di suggerimenti. |
| DatePicker | TsgcHTMLComponent_DatePicker | Campo di input nativo per data / ora / data e ora. |
| FileUpload | TsgcHTMLComponent_FileUpload | Zona di caricamento file con drag-and-drop e invio del modulo multipart. |
| RichEditor | TsgcHTMLComponent_RichEditor | Editor di testo formattato WYSIWYG basato su Quill con campo di modulo nascosto. |
| Rating | TsgcHTMLComponent_Rating | Visualizzazione o input di valutazione a stelle (simboli). |
Card, contenuti multimediali e riquadri KPI per impaginare una pagina.
| Componente | Classe | Descrizione |
|---|---|---|
| Panel | TsgcHTMLComponent_Panel | Pannello card Bootstrap con intestazione / corpo / piè di pagina, comprimibile e scorrevole. |
| StatCard | TsgcHTMLComponent_StatCard | Card KPI / statistica per dashboard con icona, freccia di tendenza e gradiente opzionale. |
| Accordion | TsgcHTMLComponent_Accordion | Accordion a collasso verticale di pannelli espandibili impilati. |
| Carousel | TsgcHTMLComponent_Carousel | Presentazione / carosello di immagini con indicatori, controlli e riproduzione automatica. |
| Image | TsgcHTMLComponent_Image | Immagine con forma, responsive / lazy-load, link lightbox e didascalia. |
| Avatar | TsgcHTMLComponent_Avatar | Avatar utente (immagine o iniziali) con dimensione, forma e indicatore di stato di presenza. |
| Video | TsgcHTMLComponent_Video | Lettore video / audio HTML5 più un helper per l'incorporamento di YouTube. |
Finestre di dialogo, superfici di stato e indicatori di caricamento.
| Componente | Classe | Descrizione |
|---|---|---|
| Modal | TsgcHTMLComponent_Modal | Finestra di dialogo modale con titolo / corpo / piè di pagina, dimensioni, centratura e sfondo statico. |
| Offcanvas | TsgcHTMLComponent_Offcanvas | Pannello off-canvas a scorrimento da sinistra, destra, alto o basso. |
| Popover | TsgcHTMLComponent_Popover | Fumetto popover su un elemento attivatore (clic / hover / focus). |
| Toast | TsgcHTMLComponent_Toast | Notifica toast con intestazione, corpo, timestamp e occultamento automatico. |
| Snackbar | TsgcHTMLComponent_Snackbar | Snackbar transitoria in stile Material con un'azione opzionale. |
| Notification | TsgcHTMLComponent_Notification | Centro notifiche a discesa con icona campanello e badge dei non letti. |
| Spinner | TsgcHTMLComponent_Spinner | Spinner di caricamento (border / grow), dimensionato e colorato. |
| Placeholder | TsgcHTMLComponent_Placeholder | Card di caricamento skeleton / placeholder con un effetto shimmer animato. |
Interfacce conversazionali, dalle semplici bolle a un assistente IA in streaming.
| Componente | Classe | Descrizione |
|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | Riquadro chat a bolle in stile card con barra di input e indicatore di digitazione. |
| Chat | TsgcHTMLComponent_Chat | Chat in stile WhatsApp con messaggi di testo / immagine / file / audio / video, conferme di lettura e risposte. |
| AIChat | TsgcHTMLComponent_AIChat | Chat con assistente IA con selettore di provider / modello, streaming dei token e citazioni delle fonti RAG. |
Flussi di accesso già pronti, dalle password alle passkey.
| Componente | Classe | Descrizione |
|---|---|---|
| Login | TsgcHTMLComponent_Login | Modulo / pagina di login già pronti (card, centrato o a pagina intera) con remember-me e avvisi. |
| SocialLogin | TsgcHTMLComponent_SocialLogin | Pannello di pulsanti per il login social OAuth (Google, Facebook, Apple, GitHub, Microsoft e altri). |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | Pagina di callback / atterraggio OAuth in stato di successo, errore o caricamento con reindirizzamento automatico. |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | Widget di login e registrazione senza password con passkey / WebAuthn. |
I componenti non visuali che servono le pagine e le mantengono attive.
| Classe | Ruolo |
|---|---|
TsgcHTMLEngine_Server | Engine HTML collegato a un TsgcWebSocketHTTPServer che serve pagine renderizzate e asset incorporati. |
TsgcHTMX_Engine_Server | Engine htmx collegato allo stesso server: sostituzioni parziali di pagina su HTTP e push live dal server tramite WebSocket. |
TsgcHTMLPageBuilder | Assembla i componenti registrati in una pagina responsive completa (con un editor visuale a design-time). |
TsgcHTMLTemplate_Bootstrap | Racchiude il contenuto del corpo in un documento HTML Bootstrap 5 completo con tema, lingua e direzione. |
TsgcHTMLThemeController / TsgcHTMLThemeBuilder | Temi chiaro / scuro e un generatore CSS a runtime che scrive le variabili CSS di Bootstrap. |
TsgcHTMX_Fragment / TsgcHTMX_Router | Frammenti htmx out-of-band per aggiornamenti live e helper per il routing delle richieste. |