sgcHTML Galleria dei Componenti — Sfoglia tutti gli 89 componenti UI | eSeGeCe

sgcHTML Galleria dei Componenti

Sfoglia tutti gli 89 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. 27 degli 89 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.

Apri la galleria interattiva live

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.

Scarica la prova gratuita Apri la matrice delle funzionalità

La prova include i progetti demo 60.HTML (compreso 08.Components). Una versione ospitata e sempre attiva della galleria interattiva è un deploy separato.

Nove famiglie

89 componenti UI, nove famiglie

Vai direttamente a una famiglia oppure scorri l'intero catalogo qui sotto.

14 componenti

Dati e Tabelle

11 componenti

Grafici e Visualizzazione

10 componenti

Moduli e Campi

21 componenti

Contenuti e Layout

10 componenti

Overlay e Feedback

12 componenti

Chat e IA

4 componenti

Autenticazione

7 componenti

Infrastruttura

7 classi

Dati e Tabelle

Dati e Tabelle

Griglie, calendari e board che renderizzano i tuoi dataset direttamente.

Grid

Data-aware
  • Delphi / C++TsgcHTMLComponent_Grid
  • .NETTsgcHTMLComponent_Grid

Tabella ricca di funzionalità: ordinamento, filtro, esportazione CSV/PDF, modifica inline, raggruppamento, scroll virtuale e query IA.

Pagina del componente · Docs

DataTable

Data-aware
  • Delphi / C++TsgcHTMLComponent_DataTable
  • .NETTsgcHTMLComponent_DataTable

Tabella dati di livello superiore che combina Grid + Pagination con barra degli strumenti, ricerca e conteggio delle righe.

Pagina del componente · Docs

Calendar

Data-aware
  • Delphi / C++TsgcHTMLComponent_Calendar
  • .NETTsgcHTMLComponent_Calendar

Calendario a griglia mensile con indicatori di evento e navigazione precedente/successivo.

Pagina del componente · Docs

Scheduler

Data-aware
  • Delphi / C++TsgcHTMLComponent_Scheduler
  • .NETTsgcHTMLComponent_Scheduler

Pianificatore a calendario (viste mese / settimana) che renderizza gli eventi per data.

Pagina del componente · Docs

Timeline

Data-aware
  • Delphi / C++TsgcHTMLComponent_Timeline
  • .NETTsgcHTMLComponent_Timeline

Timeline verticale di eventi datati, caricabile da un dataset.

Pagina del componente · Docs

KanbanBoard

Data-aware
  • Delphi / C++TsgcHTMLComponent_KanbanBoard
  • .NETTsgcHTMLComponent_KanbanBoard

Board Kanban di colonne e schede trascinabili.

Pagina del componente · Docs

Gantt

Data-aware
  • Delphi / C++TsgcHTMLComponent_Gantt
  • .NETTsgcHTMLComponent_Gantt

Diagramma di Gantt per la pianificazione di progetti con barre di avanzamento delle attività.

Pagina del componente · Docs

TreeGrid

Data-aware
  • Delphi / C++TsgcHTMLComponent_TreeGrid
  • .NETTsgcHTMLComponent_TreeGrid

Tabella Bootstrap con righe gerarchiche comprimibili costruite dalle coppie di nodi Id/ParentId.

Pagina del componente · Docs

PivotTable

Data-aware
  • Delphi / C++TsgcHTMLComponent_PivotTable
  • .NETTsgcHTMLComponent_PivotTable

Tabella pivot Bootstrap che raggruppa righe e colonne e aggrega le misure con totali di riga, di colonna e generali.

Pagina del componente · Docs

ActivityFeed

  • Delphi / C++TsgcHTMLComponent_ActivityFeed
  • .NETTsgcHTMLComponent_ActivityFeed

Feed di attività live, con i più recenti in cima, timestamp relativi e push WebSocket out-of-band.

Pagina del componente · Docs

AuditTrail

Data-aware
  • Delphi / C++TsgcHTMLComponent_AuditTrail
  • .NETTsgcHTMLComponent_AuditTrail

Feed cronologico di audit-log delle azioni di utenti e sistema con attore, azione, destinazione e timestamp.

See in feature matrix · Docs
Grafici e Visualizzazione

Grafici e Visualizzazione

Elementi visivi data-driven costruiti dai tuoi numeri.

Chart

Data-aware
  • Delphi / C++TsgcHTMLComponent_Chart
  • .NETTsgcHTMLComponent_Chart

Grafico Chart.js: linea, barre, torta, ciambella, radar, polare, bolle e dispersione.

Pagina del componente · Docs

Gauge

  • Delphi / C++TsgcHTMLComponent_Gauge
  • .NETTsgcHTMLComponent_Gauge

Indicatore (gauge) SVG semicircolare con soglie di colore basso / medio / alto.

Pagina del componente · Docs

Diagram

  • Delphi / C++TsgcHTMLComponent_Diagram
  • .NETTsgcHTMLComponent_Diagram

Diagramma di flusso con nodi e frecce renderizzato come SVG inline.

Pagina del componente · Docs

Map

  • Delphi / C++TsgcHTMLComponent_Map
  • .NETTsgcHTMLComponent_Map

Mappa interattiva Leaflet.js (tile OpenStreetMap / CartoDB) con marcatori.

Pagina del componente · Docs

Heatmap

Data-aware
  • Delphi / C++TsgcHTMLComponent_Heatmap
  • .NETTsgcHTMLComponent_Heatmap

Griglia heatmap SVG a scala di colori da valori di cella o da un dataset collegato, con legenda ed etichette di riga/colonna.

Pagina del componente · Docs

Sparkline

Data-aware
  • Delphi / C++TsgcHTMLComponent_Sparkline
  • .NETTsgcHTMLComponent_Sparkline

Sparkline SVG inline compatta a linea, barre o area da una serie di valori o da un dataset collegato.

Pagina del componente · Docs

CandlestickChart

Data-aware
  • Delphi / C++TsgcHTMLComponent_CandlestickChart
  • .NETTsgcHTMLComponent_CandlestickChart

Grafico a candele OHLC SVG con stoppini, colori rialzo/ribasso e una striscia di volume opzionale.

Pagina del componente · Docs

QRCode

  • Delphi / C++TsgcHTMLComponent_QRCode
  • .NETTsgcHTMLComponent_QRCode

Codice QR SVG ISO/IEC 18004 in puro Pascal da qualsiasi testo o URL, con livello di correzione degli errori selezionabile.

Pagina del componente · Docs

Barcode

  • Delphi / C++TsgcHTMLComponent_Barcode
  • .NETTsgcHTMLComponent_Barcode

Codice a barre SVG Code 128 in puro Pascal da qualsiasi testo ASCII, con didascalia leggibile opzionale.

Pagina del componente · Docs

TreeMap

Data-aware
  • Delphi / C++TsgcHTMLComponent_TreeMap
  • .NETTsgcHTMLComponent_TreeMap

Treemap "squarified" renderizzata come SVG inline autonomo generato dal server, senza bisogno di librerie di grafici.

Pagina del componente · Docs
Moduli e Campi

Moduli e Campi

Tutto ciò che serve per acquisire dati, con validazione e binding ai dataset.

Form

Data-aware
  • Delphi / C++TsgcHTMLComponent_Form
  • .NETTsgcHTMLComponent_Form

Costruttore di form data-driven con validazione, layout e generazione di form tramite IA.

Pagina del componente · Docs

Edit

Data-aware
  • Delphi / C++TsgcHTMLComponent_Edit
  • .NETTsgcHTMLComponent_Edit

Campo di testo a riga singola con etichetta, testo di aiuto e binding ai dataset.

Pagina del componente · Docs

Memo

Data-aware
  • Delphi / C++TsgcHTMLComponent_Memo
  • .NETTsgcHTMLComponent_Memo

Campo di testo multi-riga (text-area) con etichetta e testo di aiuto.

Pagina del componente · Docs

CheckBox

Data-aware
  • Delphi / C++TsgcHTMLComponent_CheckBox
  • .NETTsgcHTMLComponent_CheckBox

Casella di controllo con etichetta e stato selezionato.

Pagina del componente · Docs

RadioGroup

  • Delphi / C++TsgcHTMLComponent_RadioGroup
  • .NETTsgcHTMLComponent_RadioGroup

Gruppo di opzioni radio mutuamente esclusive.

Pagina del componente · Docs

Select

Data-aware
  • Delphi / C++TsgcHTMLComponent_Select
  • .NETTsgcHTMLComponent_Select

Menu a discesa Select con gruppi di opzioni, selezione multipla e binding ai dataset.

Pagina del componente · Docs

InputGroup

  • Delphi / C++TsgcHTMLComponent_InputGroup
  • .NETTsgcHTMLComponent_InputGroup

Campo di input con testo addon in testa / in coda.

Pagina del componente · Docs

AutoComplete

Data-aware
  • Delphi / C++TsgcHTMLComponent_AutoComplete
  • .NETTsgcHTMLComponent_AutoComplete

Campo di testo supportato da una datalist HTML5 di suggerimenti.

Pagina del componente · Docs

DatePicker

  • Delphi / C++TsgcHTMLComponent_DatePicker
  • .NETTsgcHTMLComponent_DatePicker

Campo di input nativo per data / ora / data-ora.

Pagina del componente · Docs

FileUpload

  • Delphi / C++TsgcHTMLComponent_FileUpload
  • .NETTsgcHTMLComponent_FileUpload

Zona di caricamento file con drag-and-drop e invio del form in multipart.

Pagina del componente · Docs

RichEditor

  • Delphi / C++TsgcHTMLComponent_RichEditor
  • .NETTsgcHTMLComponent_RichEditor

Editor di testo formattato WYSIWYG basato su Quill con campo form nascosto.

Pagina del componente · Docs

Rating

  • Delphi / C++TsgcHTMLComponent_Rating
  • .NETTsgcHTMLComponent_Rating

Visualizzazione o input di valutazione a stelle (simboli).

Pagina del componente · Docs

MultiSelect

Data-aware
  • Delphi / C++TsgcHTMLComponent_MultiSelect
  • .NETTsgcHTMLComponent_MultiSelect

Un menu a discesa Bootstrap multi-selezione ricercabile con chip, opzioni raggruppate e binding ai dataset.

Pagina del componente · Docs

ColorPicker

  • Delphi / C++TsgcHTMLComponent_ColorPicker
  • .NETTsgcHTMLComponent_ColorPicker

Un input colore HTML5 nativo con un campo di testo esadecimale opzionale e swatch predefiniti.

Pagina del componente · Docs

Slider

  • Delphi / C++TsgcHTMLComponent_Slider
  • .NETTsgcHTMLComponent_Slider

Uno slider Bootstrap con badge di valore in tempo reale, etichette min/max e stile a colori.

Pagina del componente · Docs

TimePicker

  • Delphi / C++TsgcHTMLComponent_TimePicker
  • .NETTsgcHTMLComponent_TimePicker

Un input orario HTML5 nativo con limiti min/max e granularità al secondo.

Pagina del componente · Docs

SignaturePad

  • Delphi / C++TsgcHTMLComponent_SignaturePad
  • .NETTsgcHTMLComponent_SignaturePad

Un pannello firma su canvas basato su pointer-events con le azioni Cancella, Annulla e Salva.

Pagina del componente · Docs

Transfer

Data-aware
  • Delphi / C++TsgcHTMLComponent_Transfer
  • .NETTsgcHTMLComponent_Transfer

Widget a doppia lista per spostare elementi tra un pannello disponibili e uno assegnati, con filtro e binding ai dataset.

Pagina del componente · Docs

DateTimePicker

  • Delphi / C++TsgcHTMLComponent_DateTimePicker
  • .NETTsgcHTMLComponent_DateTimePicker

Selettore di data e ora HTML5 nativo che combina calendario e orologio in un unico campo.

See in feature matrix · Docs

DateRangePicker

  • Delphi / C++TsgcHTMLComponent_DateRangePicker
  • .NETTsgcHTMLComponent_DateRangePicker

Coppia di campi data di inizio e fine per scegliere un intervallo di date, con limiti min/max.

See in feature matrix · Docs

RangeSlider

  • Delphi / C++TsgcHTMLComponent_RangeSlider
  • .NETTsgcHTMLComponent_RangeSlider

Slider a doppia maniglia per selezionare una coppia di valori minimo/massimo, con badge di valore in tempo reale.

See in feature matrix · Docs
Contenuti e Layout

Contenuti e Layout

Card, media e riquadri KPI per comporre una pagina.

Panel

  • Delphi / C++TsgcHTMLComponent_Panel
  • .NETTsgcHTMLComponent_Panel

Pannello card Bootstrap con intestazione / corpo / piè di pagina, comprimibile e scorrevole.

Pagina del componente · Docs

StatCard

  • Delphi / C++TsgcHTMLComponent_StatCard
  • .NETTsgcHTMLComponent_StatCard

Scheda KPI / statistica per dashboard con icona, freccia di tendenza e gradiente opzionale.

Pagina del componente · Docs

Accordion

  • Delphi / C++TsgcHTMLComponent_Accordion
  • .NETTsgcHTMLComponent_Accordion

Accordion a chiusura verticale di pannelli espandibili impilati.

Pagina del componente · Docs
  • Delphi / C++TsgcHTMLComponent_Carousel
  • .NETTsgcHTMLComponent_Carousel

Slideshow / carosello di immagini con indicatori, controlli e riproduzione automatica.

Pagina del componente · Docs

Image

  • Delphi / C++TsgcHTMLComponent_Image
  • .NETTsgcHTMLComponent_Image

Immagine con forma, responsive / lazy-load, link lightbox e didascalia.

Pagina del componente · Docs

Avatar

  • Delphi / C++TsgcHTMLComponent_Avatar
  • .NETTsgcHTMLComponent_Avatar

Avatar utente (immagine o iniziali) con dimensione, forma e pallino di stato di presenza.

Pagina del componente · Docs

Video

  • Delphi / C++TsgcHTMLComponent_Video
  • .NETTsgcHTMLComponent_Video

Player video / audio HTML5 più un helper per l'embed di YouTube.

Pagina del componente · Docs

Badge

  • Delphi / C++TsgcHTMLComponent_Badge
  • .NETTsgcHTMLComponent_Badge

Singolo badge Bootstrap con colore, forma a pillola, un'icona inline e una modalità posizionata a pallino di notifica.

Pagina del componente · Docs

PDFViewer

  • Delphi / C++TsgcHTMLComponent_PDFViewer
  • .NETTsgcHTMLComponent_PDFViewer

Visualizzatore PDF integrato nella pagina basato su pdf.js, con navigazione tra pagine, zoom, ricerca, download e stampa.

Pagina del componente · Docs

Chip

  • Delphi / C++TsgcHTMLComponent_Chip
  • .NETTsgcHTMLComponent_Chip

Chip / tag compatto con icona opzionale, colore e un pulsante di chiusura rimovibile.

See in feature matrix · Docs
Overlay e Feedback

Overlay e Feedback

Finestre di dialogo, superfici di stato e stati di caricamento.

  • Delphi / C++TsgcHTMLComponent_Modal
  • .NETTsgcHTMLComponent_Modal

Finestra di dialogo modale con titolo / corpo / piè di pagina, dimensioni, centratura e backdrop statico.

Pagina del componente · Docs

Offcanvas

  • Delphi / C++TsgcHTMLComponent_Offcanvas
  • .NETTsgcHTMLComponent_Offcanvas

Pannello off-canvas che scorre da sinistra, destra, alto o basso.

Pagina del componente · Docs

Popover

  • Delphi / C++TsgcHTMLComponent_Popover
  • .NETTsgcHTMLComponent_Popover

Fumetto popover su un elemento trigger (click / hover / focus).

Pagina del componente · Docs

Toast

  • Delphi / C++TsgcHTMLComponent_Toast
  • .NETTsgcHTMLComponent_Toast

Notifica toast con intestazione, corpo, timestamp e nascondimento automatico.

Pagina del componente · Docs

Snackbar

  • Delphi / C++TsgcHTMLComponent_Snackbar
  • .NETTsgcHTMLComponent_Snackbar

Snackbar transitoria in stile Material con un'azione opzionale.

Pagina del componente · Docs

Notification

  • Delphi / C++TsgcHTMLComponent_Notification
  • .NETTsgcHTMLComponent_Notification

Centro notifiche a discesa con icona a campana e badge dei non letti.

Pagina del componente · Docs

Spinner

  • Delphi / C++TsgcHTMLComponent_Spinner
  • .NETTsgcHTMLComponent_Spinner

Spinner di caricamento (border / grow), dimensionabile e colorabile.

Pagina del componente · Docs

Placeholder

  • Delphi / C++TsgcHTMLComponent_Placeholder
  • .NETTsgcHTMLComponent_Placeholder

Scheda di caricamento skeleton / placeholder con effetto shimmer animato.

Pagina del componente · Docs

ContextMenu

  • Delphi / C++TsgcHTMLComponent_ContextMenu
  • .NETTsgcHTMLComponent_ContextMenu

Menu a discesa da clic destro associato a un selettore CSS, con icone, divisori, intestazioni e azioni instradate dal server.

Pagina del componente · Docs

JobProgress

  • Delphi / C++TsgcHTMLComponent_JobProgress
  • .NETTsgcHTMLComponent_JobProgress

Elenco live di barre di avanzamento di job in background con badge di stato, pulsanti di annullamento e aggiornamenti dei frammenti out-of-band.

Pagina del componente · Docs

LogViewer

  • Delphi / C++TsgcHTMLComponent_LogViewer
  • .NETTsgcHTMLComponent_LogViewer

Visualizzatore di log / terminale in streaming con filtro per livello, ricerca e scorrimento automatico.

Pagina del componente · Docs

ProgressBar

  • Delphi / C++TsgcHTMLComponent_ProgressBar
  • .NETTsgcHTMLComponent_ProgressBar

Barra di avanzamento Bootstrap, a righe e animata, singola o multi-segmento impilata.

Pagina del componente · Docs
Chat e IA

Chat e IA

UI conversazionale, dalle semplici bolle a un assistente IA in streaming.

ChatBox

  • Delphi / C++TsgcHTMLComponent_ChatBox
  • .NETTsgcHTMLComponent_ChatBox

Riquadro di chat in stile scheda con bolle, barra di input e indicatore di digitazione.

Pagina del componente · Docs

Chat

  • Delphi / C++TsgcHTMLComponent_Chat
  • .NETTsgcHTMLComponent_Chat

Chat in stile WhatsApp con messaggi di testo / immagine / file / audio / video, conferme di lettura e risposte.

Pagina del componente · Docs

AIChat

  • Delphi / C++TsgcHTMLComponent_AIChat
  • .NETTsgcHTMLComponent_AIChat

Chat con assistente IA con selettore di provider / modello, streaming dei token e citazioni delle fonti RAG.

Pagina del componente · Docs

Presence

  • Delphi / C++TsgcHTMLComponent_Presence
  • .NETTsgcHTMLComponent_Presence

Elenco di chi è online come stack di avatar o lista, con aggiornamenti di stato in tempo reale.

Pagina del componente · Docs
Autenticazione

Autenticazione

Flussi di accesso pronti all'uso, dalle password alle passkey.

Login

  • Delphi / C++TsgcHTMLComponent_Login
  • .NETTsgcHTMLComponent_Login

Form / pagina di login pronta all'uso (card, centrata o a pagina intera) con "ricordami" e avvisi.

Pagina del componente · Docs

SocialLogin

  • Delphi / C++TsgcHTMLComponent_SocialLogin
  • .NETTsgcHTMLComponent_SocialLogin

Pannello di pulsanti di accesso social OAuth (Google, Facebook, Apple, GitHub, Microsoft e altri).

Pagina del componente · Docs

OAuthCallback

  • Delphi / C++TsgcHTMLComponent_OAuthCallback
  • .NETTsgcHTMLComponent_OAuthCallback

Pagina di callback / atterraggio OAuth in stato di successo, errore o caricamento con reindirizzamento automatico.

Pagina del componente · Docs

WebAuthnLogin

  • Delphi / C++TsgcHTMLComponent_WebAuthnLogin
  • .NETTsgcHTMLComponent_WebAuthnLogin

Widget di login e registrazione senza password con passkey / WebAuthn.

Pagina del componente · Docs

RolesPermissions

Data-aware
  • Delphi / C++TsgcHTMLComponent_RolesPermissions
  • .NETTsgcHTMLComponent_RolesPermissions

Matrice di ruoli / permessi con una casella di controllo per cella e aggiornamenti delle concessioni live via WebSocket.

Pagina del componente · Docs

UserManagement

Data-aware
  • Delphi / C++TsgcHTMLComponent_UserManagement
  • .NETTsgcHTMLComponent_UserManagement

Tabella di amministrazione utenti con ruoli, stato, ricerca e un menu a discesa di azioni per riga.

Pagina del componente · Docs

ImpersonateBanner

  • Delphi / C++TsgcHTMLComponent_ImpersonateBanner
  • .NETTsgcHTMLComponent_ImpersonateBanner

Banner di impersonificazione admin mostrato mentre si agisce come un altro utente, con uscita con un clic.

See in feature matrix · Docs
Infrastruttura

Engine, Server e Temi

Le parti non visuali che servono le pagine e le mantengono attive.

EngineServer

  • Delphi / C++TsgcHTMLEngine_Server
  • .NETTsgcHTMLEngine_Server

Engine HTML collegato a un TsgcWebSocketHTTPServer che serve le pagine renderizzate e gli asset incorporati.

Pagina del componente · Docs

HTMXEngine

  • Delphi / C++TsgcHTMX_Engine_Server
  • .NETTsgcHTMX_Engine_Server

Engine 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.

Pagina del componente · Docs

PageBuilder

  • Delphi / C++TsgcHTMLPageBuilder
  • .NETTsgcHTMLPageBuilder

Assembla i componenti registrati in una pagina responsive completa, con un editor visuale in design-time.

Pagina del componente · Docs

ThemeController

  • Delphi / C++TsgcHTMLThemeController
  • .NETTsgcHTMLThemeController

Commutatore di tema a runtime la cui proprietà Theme (ptDefault, ptDark, ptDarkPro) applica il tema selezionato e il foglio di stile condiviso alla pagina.

Pagina del componente · Docs

ThemeBuilder

  • Delphi / C++TsgcHTMLThemeBuilder
  • .NETTsgcHTMLThemeBuilder

Generatore 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.

Pagina del componente · Docs

HTMXFragment

  • Delphi / C++TsgcHTMX_Fragment
  • .NETTsgcHTMX_Fragment

Frammento htmx out-of-band per inviare un aggiornamento parziale di pagina dal server al browser.

Pagina del componente · Docs

HTMXRouter

  • Delphi / C++TsgcHTMX_Router
  • .NETTsgcHTMX_Router

Tabella di routing di Routes che confronta il percorso di una richiesta in ingresso e la instrada (tramite HandleRequest) all'handler OnRoute di quella route.

Pagina del componente · Docs
La scelta più conveniente: All-AccessTutti i prodotti eSeGeCe, con Supporto Premium incluso, a partire da €1,059/anno.
Vedi i prezzi All-Access

Crea con sgcHTML

Scarica la prova gratuita e inizia a comporre interfacce web in Delphi, C++ Builder o .NET.

Scarica la prova gratuita Vedi i prezzi