sgcHTML Functiematrix — Alle componenten | eSeGeCe

sgcHTML Functiematrix

Elk component in de bibliotheek, gegroepeerd in negen families. Elk component rendert naar Bootstrap 5-markup en werkt op dezelfde manier in Delphi, C++ Builder en .NET. De meeste zijn data-aware en binden rechtstreeks aan een TDataSet via LoadFromDataSet / DataSource (of een gelijkwaardige .NET-bron). Klik op een component voor zijn eigen pagina met gebruik en voorbeelden. Alle componenten passen automatische HTML-, attribuut-, JavaScript- en URL-uitvoercodering plus URL-sanering toe, zodat dynamische content standaard wordt ge-escaped ter bescherming tegen XSS en injectie.

14 componenten

Data en tabellen

11 componenten

Grafieken en visualisatie

10 componenten

Formulieren en invoer

21 componenten

Content en layout

10 componenten

Overlays en feedback

12 componenten

Chat en AI

4 componenten

Authenticatie

7 componenten

Infrastructuur

8 klassen

Data en tabellen

Data en tabellen

Grids, kalenders en boards die je datasets rechtstreeks renderen.

ComponentKlasseBeschrijvingHelp
GridTsgcHTMLComponent_GridFunctierijke tabel: sorteren, filteren, CSV/PDF-export, inline bewerken, groeperen, virtueel scrollen en AI-query.Docs
DataTableTsgcHTMLComponent_DataTableDatatabel op hoger niveau die Grid + Pagination omhult met een werkbalk, zoeken en rijtelling.Docs
CalendarTsgcHTMLComponent_CalendarMaandrasterkalender met gebeurtenisstippen en vorige/volgende navigatie.Docs
SchedulerTsgcHTMLComponent_SchedulerKalenderplanner (maand- / weekweergaven) die gebeurtenissen per datum rendert.Docs
TimelineTsgcHTMLComponent_TimelineVerticale tijdlijn van gedateerde gebeurtenissen, te laden vanuit een dataset.Docs
KanbanBoardTsgcHTMLComponent_KanbanBoardKanban-board met kolommen en versleepbare kaarten.Docs
GanttTsgcHTMLComponent_GanttGantt projecttijdlijngrafiek met voortgangsbalken voor taken.Docs
TreeGridTsgcHTMLComponent_TreeGridBootstrap-tabel met inklapbare, hiërarchische rijen opgebouwd uit Id/ParentId-knooppuntparen.Docs
PivotTableTsgcHTMLComponent_PivotTableBootstrap-draaitabel die rijen en kolommen groepeert en metingen aggregeert met rij-, kolom- en eindtotalen.Docs
ActivityFeedTsgcHTMLComponent_ActivityFeedLive activiteitenfeed, nieuwste eerst, met relatieve tijdstempels en out-of-band WebSocket-push.Docs
AuditTrailTsgcHTMLComponent_AuditTrailChronologische audit-logfeed van gebruikers- en systeemacties met actor, actie, doelwit en tijdstempel.Docs
Grafieken en visualisatie

Grafieken en visualisatie

Datagedreven beelden gebouwd op je eigen cijfers.

ComponentKlasseBeschrijvingHelp
ChartTsgcHTMLComponent_ChartChart.js-grafiek: lijn, staaf, taart, ring, radar, polair, bubbel en scatter.Docs
GaugeTsgcHTMLComponent_GaugeHalfronde SVG-meter met kleurdrempels voor laag / midden / hoog.Docs
DiagramTsgcHTMLComponent_DiagramStroomdiagram met knooppunten en pijlen, gerenderd als inline SVG.Docs
MapTsgcHTMLComponent_MapLeaflet.js interactieve kaart (OpenStreetMap / CartoDB-tegels) met markers.Docs
HeatmapTsgcHTMLComponent_HeatmapKleurgeschaald SVG-heatmapraster op basis van celwaarden of een gebonden dataset, met legenda en rij-/kolomlabels.Docs
SparklineTsgcHTMLComponent_SparklineCompacte inline SVG-lijn-, staaf- of vlaksparkline op basis van een waardenreeks of een gebonden dataset.Docs
CandlestickChartTsgcHTMLComponent_CandlestickChartSVG OHLC-candlestickgrafiek met lonten, op/neer-kleuren en een optionele volumestrook.Docs
QRCodeTsgcHTMLComponent_QRCodePure-Pascal ISO/IEC 18004 SVG QR-code van elke tekst of URL, met instelbaar foutcorrectieniveau.Docs
BarcodeTsgcHTMLComponent_BarcodePure-Pascal Code 128 SVG-barcode van elke ASCII-tekst, met optioneel leesbaar onderschrift.Docs
TreeMapTsgcHTMLComponent_TreeMapSquarified treemap gerenderd als een zelfstandige, server-gegenereerde inline SVG, zonder dat een grafiekbibliotheek nodig is.Docs
Formulieren en invoer

Formulieren en invoer

Alles wat je nodig hebt om data vast te leggen, met validatie en datasetbinding.

ComponentKlasseBeschrijvingHelp
FormTsgcHTMLComponent_FormDatagedreven formulierbouwer met validatie, layouts en AI-formuliergeneratie.Docs
EditTsgcHTMLComponent_EditEenregelige tekstinvoer met label, helptekst en datasetbinding.Docs
MemoTsgcHTMLComponent_MemoMeerregelige tekstvakinvoer met label en helptekst.Docs
CheckBoxTsgcHTMLComponent_CheckBoxSelectievakje-invoer met label en aangevinkte status.Docs
RadioGroupTsgcHTMLComponent_RadioGroupGroep van elkaar uitsluitende keuzerondjes.Docs
SelectTsgcHTMLComponent_SelectSelect-dropdown met optiegroepen, meervoudige selectie en datasetbinding.Docs
InputGroupTsgcHTMLComponent_InputGroupInvoer met voor- / achtervoegsel-addontekst.Docs
AutoCompleteTsgcHTMLComponent_AutoCompleteTekstinvoer ondersteund door een HTML5-datalist met suggesties.Docs
DatePickerTsgcHTMLComponent_DatePickerNative date- / time- / datetime-invoerveld.Docs
FileUploadTsgcHTMLComponent_FileUploadSleep-en-neerzet bestandsuploadzone met multipart formulier-post.Docs
RichEditorTsgcHTMLComponent_RichEditorOp Quill gebaseerde WYSIWYG rich-text-editor met verborgen formulierveld.Docs
RatingTsgcHTMLComponent_RatingSter- (symbool-) beoordelingsweergave of -invoer.Docs
MultiSelectTsgcHTMLComponent_MultiSelectEen doorzoekbare Bootstrap multi-select-dropdown met chips, gegroepeerde opties en datasetbinding.Docs
ColorPickerTsgcHTMLComponent_ColorPickerEen native HTML5-kleurinvoer met een optioneel hex-tekstveld en voorinstellingen voor kleurstalen.Docs
SliderTsgcHTMLComponent_SliderEen Bootstrap-schuifregelaar met een live waardebadge, min/max-labels en kleurstyling.Docs
TimePickerTsgcHTMLComponent_TimePickerEen native HTML5-tijdinvoer met min/max-grenzen en granulariteit tot op de seconde.Docs
SignaturePadTsgcHTMLComponent_SignaturePadEen canvas-handtekeningveld op basis van pointer-events met acties Wissen, Ongedaan maken en Opslaan.Docs
TransferTsgcHTMLComponent_TransferDubbele-lijstwidget om items te verplaatsen tussen een beschikbaar en een toegewezen paneel, met filtering en datasetbinding.Docs
DateTimePickerTsgcHTMLComponent_DateTimePickerNative HTML5 datum-en-tijdkiezer die kalender en klok in één veld combineert.Docs
DateRangePickerTsgcHTMLComponent_DateRangePickerGekoppelde begin- en einddatuminvoer voor het kiezen van een datumbereik, met min/max-grenzen.Docs
RangeSliderTsgcHTMLComponent_RangeSliderSchuifregelaar met twee grepen die een laag/hoog-waardepaar selecteert, met live waardebadges.Docs
Content en layout

Content en layout

Kaarten, media en KPI-tegels om een pagina in te delen.

ComponentKlasseBeschrijvingHelp
PanelTsgcHTMLComponent_PanelBootstrap-kaartpaneel met kop / body / voettekst, inklapbaar en scrollbaar.Docs
StatCardTsgcHTMLComponent_StatCardDashboard KPI- / statkaart met icoon, trendpijl en optioneel verloop.Docs
AccordionTsgcHTMLComponent_AccordionVerticaal inklappende accordeon van gestapelde uitklapbare panelen.Docs
CarouselTsgcHTMLComponent_CarouselDiavoorstelling / carrousel met indicatoren, bediening en autoplay.Docs
ImageTsgcHTMLComponent_ImageAfbeelding met vorm, responsief / lazy-load, lightbox-link en bijschrift.Docs
AvatarTsgcHTMLComponent_AvatarGebruikersavatar (afbeelding of initialen) met grootte, vorm en aanwezigheidsstatusstip.Docs
VideoTsgcHTMLComponent_VideoHTML5 video- / audiospeler plus een YouTube-insluithelper.Docs
BadgeTsgcHTMLComponent_BadgeEnkele Bootstrap-badge met kleur, pilvorm, een inline icoon en een positioneerbare meldingsstip-modus.Docs
PDFViewerTsgcHTMLComponent_PDFViewerPDF-viewer op de pagina zelf, aangedreven door pdf.js, met paginanavigatie, zoomen, zoeken, downloaden en afdrukken.Docs
ChipTsgcHTMLComponent_ChipCompacte chip / tag met een optioneel icoon, kleur en een verwijderbare sluitknop.Docs
Overlays en feedback

Overlays en feedback

Dialoogvensters, statusvlakken en laadtoestanden.

ComponentKlasseBeschrijvingHelp
ModalTsgcHTMLComponent_ModalModaal dialoogvenster met titel / body / voettekst, formaten, gecentreerd en statische achtergrond.Docs
OffcanvasTsgcHTMLComponent_OffcanvasOff-canvas inschuifpaneel vanaf links, rechts, boven of onder.Docs
PopoverTsgcHTMLComponent_PopoverPopover-bel op een triggerelement (klik / hover / focus).Docs
ToastTsgcHTMLComponent_ToastToast-melding met kop, body, tijdstempel en automatisch verbergen.Docs
SnackbarTsgcHTMLComponent_SnackbarMaterial-stijl tijdelijke snackbar met een optionele actie.Docs
NotificationTsgcHTMLComponent_NotificationBel-icoon dropdown-meldingscentrum met een badge voor ongelezen items.Docs
SpinnerTsgcHTMLComponent_SpinnerLaadspinner (border / grow), met grootte en kleur.Docs
PlaceholderTsgcHTMLComponent_PlaceholderSkelet- / placeholder-laadkaart met een geanimeerde glinstering.Docs
ContextMenuTsgcHTMLComponent_ContextMenuRechtsklik-dropdownmenu gekoppeld aan een CSS-selector, met iconen, scheidingslijnen, koppen en server-gerouteerde acties.Docs
JobProgressTsgcHTMLComponent_JobProgressLive lijst van voortgangsbalken voor achtergrondtaken met statusbadges, annuleerknoppen en out-of-band fragmentupdates.Docs
LogViewerTsgcHTMLComponent_LogViewerStreamende log-/terminalviewer met niveaufilter, zoeken en automatisch scrollen.Docs
ProgressBarTsgcHTMLComponent_ProgressBarBootstrap-voortgangsbalk, gestreept en geanimeerd, enkel of gestapeld multisegment.Docs
Chat en AI

Chat en AI

Conversationele UI, van eenvoudige bubbels tot een streamende AI-assistent.

ComponentKlasseBeschrijvingHelp
ChatBoxTsgcHTMLComponent_ChatBoxKaartstijl chatbubbelvak met een invoerbalk en typindicator.Docs
ChatTsgcHTMLComponent_ChatWhatsApp-stijl chat met tekst- / afbeelding- / bestand- / audio- / videoberichten, leesbevestigingen en antwoorden.Docs
AIChatTsgcHTMLComponent_AIChatAI-assistentchat met provider- / modelkiezer, token-streaming en RAG-bronvermeldingen.Docs
PresenceTsgcHTMLComponent_Presence"Wie is online"-lijst als avatarstapel of lijst, met live statusupdates.Docs
Authenticatie

Authenticatie

Kant-en-klare aanmeldstromen, van wachtwoorden tot passkeys.

ComponentKlasseBeschrijvingHelp
LoginTsgcHTMLComponent_LoginKant-en-klaar loginformulier / -pagina (kaart, gecentreerd of volledige pagina) met onthoud-mij en waarschuwingen.Docs
SocialLoginTsgcHTMLComponent_SocialLoginOAuth social-login knoppenpaneel (Google, Facebook, Apple, GitHub, Microsoft en meer).Docs
OAuthCallbackTsgcHTMLComponent_OAuthCallbackOAuth callback- / landingspagina in succes-, fout- of laadtoestand met automatische doorverwijzing.Docs
WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginWachtwoordloze passkey- / WebAuthn-login- en registratiewidget.Docs
RolesPermissionsTsgcHTMLComponent_RolesPermissionsRol-/rechtenmatrix met een selectievakje per cel en live WebSocket-updates voor rechten.Docs
UserManagementTsgcHTMLComponent_UserManagementGebruikersbeheertabel met rollen, status, zoeken en een acties-dropdown per rij.Docs
ImpersonateBannerTsgcHTMLComponent_ImpersonateBannerBeheerdersimpersonatiebanner die wordt getoond terwijl je als een andere gebruiker handelt, met uitgang in één klik.Docs
Infrastructuur

Engine, server en theming

De niet-visuele onderdelen die de pagina's serveren en live houden.

ComponentKlasseBeschrijvingHelp
EngineServerTsgcHTMLEngine_ServerHTML-engine gekoppeld aan een TsgcWebSocketHTTPServer die gerenderde pagina's en ingesloten assets serveert.Docs
HTMXEngineTsgcHTMX_Engine_Serverhtmx-engine gekoppeld aan dezelfde server. Het haakt in op de HTTP- en WebSocket-handlers, dispatcht binnenkomende verzoeken en berichten en pusht of broadcast HTML-fragmenten in realtime naar verbonden browsers (DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment).Docs
PageBuilderTsgcHTMLPageBuilderVoegt geregistreerde componenten samen tot een complete responsieve pagina, met een visuele editor tijdens design-time.Docs
TemplateBootstrapTsgcHTMLTemplate_BootstrapVerpakt body-inhoud in een volledig Bootstrap 5 HTML-document met thema, taal en richting.Docs
ThemeControllerTsgcHTMLThemeControllerRuntime thema-wisselaar waarvan de eigenschap Theme (ptDefault, ptDark, ptDarkPro) het geselecteerde thema en de gedeelde stylesheet op de pagina toepast.Docs
ThemeBuilderTsgcHTMLThemeBuilderCSS-generator waarvan Mode (tmLight, tmDark, tmSystem) Bootstrap CSS-variabelen schrijft op basis van eigenschapswaarden, met een optioneel OS-voorkeur-synchronisatiescript voor tmSystem.Docs
HTMXFragmentTsgcHTMX_FragmentOut-of-band htmx-fragment voor het pushen van een gedeeltelijke pagina-update van de server naar de browser.Docs
HTMXRouterTsgcHTMX_RouterRouteringstabel van Routes die een binnenkomend verzoekpad matcht en het (via HandleRequest) doorstuurt naar de OnRoute-handler van die route.Docs
De beste deal: All-AccessElk eSeGeCe-product, inclusief Premium-ondersteuning, vanaf €1,059 per jaar.
Bekijk de All-Access-prijzen

Bouw met sgcHTML

Download de gratis proefversie en begin met het samenstellen van web-UI's in Delphi, C++ Builder of .NET.

Download gratis proefversie Bekijk prijzen