Grafici, gauge e tree map
Serie Chart.js, un gauge SVG, uno sparkline e una tree map, tutti generati da Pascal.
Apri la demo live →
Sfoglia tutti gli 93 componenti UI di sgcHTML in un unico posto, raggruppati in nove famiglie. Ogni componente genera markup Bootstrap 5 e funziona allo stesso modo in Delphi, C++ Builder e .NET, con lo stesso nome di classe Tsgc* in ciascuno. 28 degli 93 componenti sono data-aware e si collegano direttamente a un TDataSet / DataSource (o una sorgente .NET equivalente); questi mostrano un badge Data-aware. Fai clic su una scheda per la sua pagina del componente, oppure apri la documentazione.
Ogni componente qui sotto è fornito come esempio eseguibile. Il progetto 08.Components nel set di demo 60.HTML renderizza l'intero catalogo come una galleria live navigabile che puoi pilotare nel browser. È incluso nella prova gratuita, così puoi eseguire l'intera galleria in locale con i tuoi dati.
La prova include i progetti demo 60.HTML (compreso 08.Components). Una versione ospitata e sempre attiva della galleria interattiva è un deploy separato.
Vai direttamente a una famiglia oppure scorri l'intero catalogo qui sotto.
14 componenti
11 componenti
10 componenti
23 componenti
10 componenti
14 componenti
4 componenti
7 componenti
7 classi
Griglie, calendari e board che renderizzano i tuoi dataset direttamente.
TsgcHTMLComponent_GridTsgcHTMLComponent_GridTabella ricca di funzionalità: ordinamento, filtro, esportazione CSV/PDF, modifica inline, raggruppamento, scroll virtuale e query IA.
TsgcHTMLComponent_DataTableTsgcHTMLComponent_DataTableTabella dati di livello superiore che combina Grid + Pagination con barra degli strumenti, ricerca e conteggio delle righe.
TsgcHTMLComponent_CalendarTsgcHTMLComponent_CalendarCalendario a griglia mensile con indicatori di evento e navigazione precedente/successivo.
TsgcHTMLComponent_SchedulerTsgcHTMLComponent_SchedulerPianificatore a calendario (viste mese / settimana) che renderizza gli eventi per data.
TsgcHTMLComponent_TimelineTsgcHTMLComponent_TimelineTimeline verticale di eventi datati, caricabile da un dataset.
TsgcHTMLComponent_KanbanBoardTsgcHTMLComponent_KanbanBoardBoard Kanban di colonne e schede trascinabili.
TsgcHTMLComponent_GanttTsgcHTMLComponent_GanttDiagramma di Gantt per la pianificazione di progetti con barre di avanzamento delle attività.
TsgcHTMLComponent_TreeGridTsgcHTMLComponent_TreeGridTabella Bootstrap con righe gerarchiche comprimibili costruite dalle coppie di nodi Id/ParentId.
TsgcHTMLComponent_PivotTableTsgcHTMLComponent_PivotTableTabella pivot Bootstrap che raggruppa righe e colonne e aggrega le misure con totali di riga, di colonna e generali.
TsgcHTMLComponent_ActivityFeedTsgcHTMLComponent_ActivityFeedFeed di attività live, con i più recenti in cima, timestamp relativi e push WebSocket out-of-band.
TsgcHTMLComponent_AuditTrailTsgcHTMLComponent_AuditTrailFeed cronologico di audit-log delle azioni di utenti e sistema con attore, azione, destinazione e timestamp.
Elementi visivi data-driven costruiti dai tuoi numeri.
TsgcHTMLComponent_ChartTsgcHTMLComponent_ChartGrafico Chart.js: linea, barre, torta, ciambella, radar, polare, bolle e dispersione.
TsgcHTMLComponent_GaugeTsgcHTMLComponent_GaugeIndicatore (gauge) SVG semicircolare con soglie di colore basso / medio / alto.
TsgcHTMLComponent_DiagramTsgcHTMLComponent_DiagramDiagramma di flusso con nodi e frecce renderizzato come SVG inline.
TsgcHTMLComponent_MapTsgcHTMLComponent_MapMappa interattiva Leaflet.js (tile OpenStreetMap / CartoDB) con marcatori.
TsgcHTMLComponent_HeatmapTsgcHTMLComponent_HeatmapGriglia heatmap SVG a scala di colori da valori di cella o da un dataset collegato, con legenda ed etichette di riga/colonna.
TsgcHTMLComponent_SparklineTsgcHTMLComponent_SparklineSparkline SVG inline compatta a linea, barre o area da una serie di valori o da un dataset collegato.
TsgcHTMLComponent_CandlestickChartTsgcHTMLComponent_CandlestickChartGrafico a candele OHLC SVG con stoppini, colori rialzo/ribasso e una striscia di volume opzionale.
TsgcHTMLComponent_QRCodeTsgcHTMLComponent_QRCodeCodice QR SVG ISO/IEC 18004 in puro Pascal da qualsiasi testo o URL, con livello di correzione degli errori selezionabile.
TsgcHTMLComponent_BarcodeTsgcHTMLComponent_BarcodeCodice a barre SVG Code 128 in puro Pascal da qualsiasi testo ASCII, con didascalia leggibile opzionale.
TsgcHTMLComponent_TreeMapTsgcHTMLComponent_TreeMapTreemap "squarified" renderizzata come SVG inline autonomo generato dal server, senza bisogno di librerie di grafici.
Tutto ciò che serve per acquisire dati, con validazione e binding ai dataset.
TsgcHTMLComponent_FormTsgcHTMLComponent_FormCostruttore di form data-driven con validazione, layout e generazione di form tramite IA.
TsgcHTMLComponent_EditTsgcHTMLComponent_EditCampo di testo a riga singola con etichetta, testo di aiuto e binding ai dataset.
TsgcHTMLComponent_MemoTsgcHTMLComponent_MemoCampo di testo multi-riga (text-area) con etichetta e testo di aiuto.
TsgcHTMLComponent_CheckBoxTsgcHTMLComponent_CheckBoxCasella di controllo con etichetta e stato selezionato.
TsgcHTMLComponent_RadioGroupTsgcHTMLComponent_RadioGroupGruppo di opzioni radio mutuamente esclusive.
TsgcHTMLComponent_SelectTsgcHTMLComponent_SelectMenu a discesa Select con gruppi di opzioni, selezione multipla e binding ai dataset.
TsgcHTMLComponent_InputGroupTsgcHTMLComponent_InputGroupCampo di input con testo addon in testa / in coda.
TsgcHTMLComponent_AutoCompleteTsgcHTMLComponent_AutoCompleteCampo di testo supportato da una datalist HTML5 di suggerimenti.
TsgcHTMLComponent_DatePickerTsgcHTMLComponent_DatePickerCampo di input nativo per data / ora / data-ora.
TsgcHTMLComponent_FileUploadTsgcHTMLComponent_FileUploadZona di caricamento file con drag-and-drop e invio del form in multipart.
TsgcHTMLComponent_RichEditorTsgcHTMLComponent_RichEditorEditor di testo formattato WYSIWYG basato su Quill con campo form nascosto.
TsgcHTMLComponent_RatingTsgcHTMLComponent_RatingVisualizzazione o input di valutazione a stelle (simboli).
TsgcHTMLComponent_MultiSelectTsgcHTMLComponent_MultiSelectUn menu a discesa Bootstrap multi-selezione ricercabile con chip, opzioni raggruppate e binding ai dataset.
TsgcHTMLComponent_ColorPickerTsgcHTMLComponent_ColorPickerUn input colore HTML5 nativo con un campo di testo esadecimale opzionale e swatch predefiniti.
TsgcHTMLComponent_SliderTsgcHTMLComponent_SliderUno slider Bootstrap con badge di valore in tempo reale, etichette min/max e stile a colori.
TsgcHTMLComponent_TimePickerTsgcHTMLComponent_TimePickerUn input orario HTML5 nativo con limiti min/max e granularità al secondo.
TsgcHTMLComponent_SignaturePadTsgcHTMLComponent_SignaturePadUn pannello firma su canvas basato su pointer-events con le azioni Cancella, Annulla e Salva.
TsgcHTMLComponent_TransferTsgcHTMLComponent_TransferWidget a doppia lista per spostare elementi tra un pannello disponibili e uno assegnati, con filtro e binding ai dataset.
TsgcHTMLComponent_DateTimePickerTsgcHTMLComponent_DateTimePickerSelettore di data e ora HTML5 nativo che combina calendario e orologio in un unico campo.
TsgcHTMLComponent_DateRangePickerTsgcHTMLComponent_DateRangePickerCoppia di campi data di inizio e fine per scegliere un intervallo di date, con limiti min/max.
TsgcHTMLComponent_RangeSliderTsgcHTMLComponent_RangeSliderSlider a doppia maniglia per selezionare una coppia di valori minimo/massimo, con badge di valore in tempo reale.
TsgcHTMLComponent_CameraScannerTsgcHTMLComponent_CameraScannerPannello fotocamera live che scansiona codici a barre e QR code con l'API BarcodeDetector nativa del browser, senza librerie di terze parti.
TsgcHTMLComponent_NumPadTsgcHTMLComponent_NumPadTastierino numerico e valutario touch per l'inserimento al punto vendita, con pulsanti di importo rapido e formattazione indipendente dalla lingua.
Card, media e riquadri KPI per comporre una pagina.
TsgcHTMLComponent_PanelTsgcHTMLComponent_PanelPannello card Bootstrap con intestazione / corpo / piè di pagina, comprimibile e scorrevole.
TsgcHTMLComponent_StatCardTsgcHTMLComponent_StatCardScheda KPI / statistica per dashboard con icona, freccia di tendenza e gradiente opzionale.
TsgcHTMLComponent_AccordionTsgcHTMLComponent_AccordionAccordion a chiusura verticale di pannelli espandibili impilati.
TsgcHTMLComponent_CarouselTsgcHTMLComponent_CarouselSlideshow / carosello di immagini con indicatori, controlli e riproduzione automatica.
TsgcHTMLComponent_ImageTsgcHTMLComponent_ImageImmagine con forma, responsive / lazy-load, link lightbox e didascalia.
TsgcHTMLComponent_AvatarTsgcHTMLComponent_AvatarAvatar utente (immagine o iniziali) con dimensione, forma e pallino di stato di presenza.
TsgcHTMLComponent_VideoTsgcHTMLComponent_VideoPlayer video / audio HTML5 più un helper per l'embed di YouTube.
TsgcHTMLComponent_BadgeTsgcHTMLComponent_BadgeSingolo badge Bootstrap con colore, forma a pillola, un'icona inline e una modalità posizionata a pallino di notifica.
TsgcHTMLComponent_PDFViewerTsgcHTMLComponent_PDFViewerVisualizzatore PDF integrato nella pagina basato su pdf.js, con navigazione tra pagine, zoom, ricerca, download e stampa.
TsgcHTMLComponent_ChipTsgcHTMLComponent_ChipChip / tag compatto con icona opzionale, colore e un pulsante di chiusura rimovibile.
Finestre di dialogo, superfici di stato e stati di caricamento.
TsgcHTMLComponent_ModalTsgcHTMLComponent_ModalFinestra di dialogo modale con titolo / corpo / piè di pagina, dimensioni, centratura e backdrop statico.
TsgcHTMLComponent_OffcanvasTsgcHTMLComponent_OffcanvasPannello off-canvas che scorre da sinistra, destra, alto o basso.
TsgcHTMLComponent_PopoverTsgcHTMLComponent_PopoverFumetto popover su un elemento trigger (click / hover / focus).
TsgcHTMLComponent_ToastTsgcHTMLComponent_ToastNotifica toast con intestazione, corpo, timestamp e nascondimento automatico.
TsgcHTMLComponent_SnackbarTsgcHTMLComponent_SnackbarSnackbar transitoria in stile Material con un'azione opzionale.
TsgcHTMLComponent_NotificationTsgcHTMLComponent_NotificationCentro notifiche a discesa con icona a campana e badge dei non letti.
TsgcHTMLComponent_SpinnerTsgcHTMLComponent_SpinnerSpinner di caricamento (border / grow), dimensionabile e colorabile.
TsgcHTMLComponent_PlaceholderTsgcHTMLComponent_PlaceholderScheda di caricamento skeleton / placeholder con effetto shimmer animato.
TsgcHTMLComponent_ContextMenuTsgcHTMLComponent_ContextMenuMenu a discesa da clic destro associato a un selettore CSS, con icone, divisori, intestazioni e azioni instradate dal server.
TsgcHTMLComponent_JobProgressTsgcHTMLComponent_JobProgressElenco live di barre di avanzamento di job in background con badge di stato, pulsanti di annullamento e aggiornamenti dei frammenti out-of-band.
TsgcHTMLComponent_LogViewerTsgcHTMLComponent_LogViewerVisualizzatore di log / terminale in streaming con filtro per livello, ricerca e scorrimento automatico.
TsgcHTMLComponent_ProgressBarTsgcHTMLComponent_ProgressBarBarra di avanzamento Bootstrap, a righe e animata, singola o multi-segmento impilata.
TsgcHTMLComponent_CommandPaletteTsgcHTMLComponent_CommandPaletteLauncher di azioni rapide Ctrl+K / Cmd+K con filtro per sottostringa e poi fuzzy, categorie e azioni instradate al server.
TsgcHTMLComponent_EmptyStateTsgcHTMLComponent_EmptyStateIl pannello che una griglia, un elenco o un risultato di ricerca mostra quando non ha righe, con icona, titolo, descrizione e fino a due pulsanti.
UI conversazionale, dalle semplici bolle a un assistente IA in streaming.
TsgcHTMLComponent_ChatBoxTsgcHTMLComponent_ChatBoxRiquadro di chat in stile scheda con bolle, barra di input e indicatore di digitazione.
TsgcHTMLComponent_ChatTsgcHTMLComponent_ChatChat in stile WhatsApp con messaggi di testo / immagine / file / audio / video, conferme di lettura e risposte.
TsgcHTMLComponent_AIChatTsgcHTMLComponent_AIChatChat con assistente IA con selettore di provider / modello, streaming dei token e citazioni delle fonti RAG.
TsgcHTMLComponent_PresenceTsgcHTMLComponent_PresenceElenco di chi è online come stack di avatar o lista, con aggiornamenti di stato in tempo reale.
Flussi di accesso pronti all'uso, dalle password alle passkey.
TsgcHTMLComponent_LoginTsgcHTMLComponent_LoginForm / pagina di login pronta all'uso (card, centrata o a pagina intera) con "ricordami" e avvisi.
TsgcHTMLComponent_SocialLoginTsgcHTMLComponent_SocialLoginPannello di pulsanti di accesso social OAuth (Google, Facebook, Apple, GitHub, Microsoft e altri).
TsgcHTMLComponent_OAuthCallbackTsgcHTMLComponent_OAuthCallbackPagina di callback / atterraggio OAuth in stato di successo, errore o caricamento con reindirizzamento automatico.
TsgcHTMLComponent_WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginWidget di login e registrazione senza password con passkey / WebAuthn.
TsgcHTMLComponent_RolesPermissionsTsgcHTMLComponent_RolesPermissionsMatrice di ruoli / permessi con una casella di controllo per cella e aggiornamenti delle concessioni live via WebSocket.
TsgcHTMLComponent_UserManagementTsgcHTMLComponent_UserManagementTabella di amministrazione utenti con ruoli, stato, ricerca e un menu a discesa di azioni per riga.
TsgcHTMLComponent_ImpersonateBannerTsgcHTMLComponent_ImpersonateBannerBanner di impersonificazione admin mostrato mentre si agisce come un altro utente, con uscita con un clic.
Le parti non visuali che servono le pagine e le mantengono attive.
TsgcHTMLEngine_ServerTsgcHTMLEngine_ServerEngine HTML collegato a un TsgcWebSocketHTTPServer che serve le pagine renderizzate e gli asset incorporati.
TsgcHTMX_Engine_ServerTsgcHTMX_Engine_ServerEngine htmx collegato allo stesso server; aggancia gli handler HTTP e WebSocket, smista le richieste e i messaggi in ingresso e invia o trasmette frammenti HTML ai browser connessi in tempo reale.
TsgcHTMLPageBuilderTsgcHTMLPageBuilderAssembla i componenti registrati in una pagina responsive completa, con un editor visuale in design-time.
TsgcHTMLThemeControllerTsgcHTMLThemeControllerCommutatore di tema a runtime la cui proprietà Theme (ptDefault, ptDark, ptDarkPro) applica il tema selezionato e il foglio di stile condiviso alla pagina.
TsgcHTMLThemeBuilderTsgcHTMLThemeBuilderGeneratore CSS la cui Mode (tmLight, tmDark, tmSystem) scrive le variabili CSS di Bootstrap dai valori delle proprietà, con uno script opzionale di sincronizzazione con le preferenze del sistema operativo per tmSystem.
TsgcHTMX_FragmentTsgcHTMX_FragmentFrammento htmx out-of-band per inviare un aggiornamento parziale di pagina dal server al browser.
TsgcHTMX_RouterTsgcHTMX_RouterTabella di routing di Routes che confronta il percorso di una richiesta in ingresso e la instrada (tramite HandleRequest) all'handler OnRoute di quella route.
I componenti di questa pagina non sono mockup. Ognuno di essi è in funzione proprio ora dentro queste applicazioni Delphi.
Serie Chart.js, un gauge SVG, uno sparkline e una tree map, tutti generati da Pascal.
Apri la demo live →
Una bacheca di pianificazione su più giorni con dipendenze, disegnata lato server.
Apri la demo live →
Riquadri di categoria, un carrello live, promozioni e un display cliente.
Apri la demo live →