sgcHTML Functiematrix

Component	Klasse	Beschrijving	Help
NavBar	`TsgcHTMLComponent_NavBar`	Responsieve bovenste navigatiebalk met merk en inklapbare menu-items.	Docs
Sidebar	`TsgcHTMLComponent_Sidebar`	Verticale zijnavigatie met iconen, koppen, scheidingslijnen en een voettekst.	Docs
Breadcrumb	`TsgcHTMLComponent_Breadcrumb`	Broodkruimelpad dat de huidige locatie in een hiërarchie toont.	Docs
Tabs	`TsgcHTMLComponent_Tabs`	Tab-, pill- of onderstreepte tabset met verwisselbare inhoudspanelen.	Docs
Pagination	`TsgcHTMLComponent_Pagination`	Paginanavigatiebesturing afgeleid van item- of paginatellingen.	Docs
Toolbar	`TsgcHTMLComponent_Toolbar`	Knoppenwerkbalk die knoppen groepeert met scheidingstekens en tooltips.	Docs
TreeView	`TsgcHTMLComponent_TreeView`	Inklapbare hiërarchische boom, te laden vanuit een dataset.	Docs
Stepper	`TsgcHTMLComponent_Stepper`	Wizard- / stapvoortgangsindicator, horizontaal of verticaal.	Docs
Dropdown	`TsgcHTMLComponent_Dropdown`	Dropdown-knop met een menu van links, koppen en scheidingslijnen.	Docs
ButtonGroup	`TsgcHTMLComponent_ButtonGroup`	Gesegmenteerde set knoppen, horizontaal of verticaal.	Docs
ListGroup	`TsgcHTMLComponent_ListGroup`	Lijstgroep van links of items met badges en extra inhoud.	Docs
DashboardLayout	`TsgcHTMLDashboardLayout`	Volledige dashboard-shell met een vaste sidebar en inhoudssecties.	Docs
Site	`TsgcHTMLComponent_Site`	Volledige pagina-shell — header, navigatiemenu, inhoud en voettekst — met een verwisselbare layouttemplate.	Docs
Splitter	`TsgcHTMLComponent_Splitter`	Twee herschaalbare panelen met een sleepbare scheidingslijn, horizontaal of verticaal, met een optioneel bewaarde positie.	Docs

Data en tabellen

Grids, kalenders en boards die je datasets rechtstreeks renderen.

Component	Klasse	Beschrijving	Help
Grid	`TsgcHTMLComponent_Grid`	Functierijke tabel: sorteren, filteren, CSV/PDF-export, inline bewerken, groeperen, virtueel scrollen en AI-query.	Docs
DataTable	`TsgcHTMLComponent_DataTable`	Datatabel op hoger niveau die Grid + Pagination omhult met een werkbalk, zoeken en rijtelling.	Docs
Calendar	`TsgcHTMLComponent_Calendar`	Maandrasterkalender met gebeurtenisstippen en vorige/volgende navigatie.	Docs
Scheduler	`TsgcHTMLComponent_Scheduler`	Kalenderplanner (maand- / weekweergaven) die gebeurtenissen per datum rendert.	Docs
Timeline	`TsgcHTMLComponent_Timeline`	Verticale tijdlijn van gedateerde gebeurtenissen, te laden vanuit een dataset.	Docs
KanbanBoard	`TsgcHTMLComponent_KanbanBoard`	Kanban-board met kolommen en versleepbare kaarten.	Docs
Gantt	`TsgcHTMLComponent_Gantt`	Gantt projecttijdlijngrafiek met voortgangsbalken voor taken.	Docs
TreeGrid	`TsgcHTMLComponent_TreeGrid`	Bootstrap-tabel met inklapbare, hiërarchische rijen opgebouwd uit Id/ParentId-knooppuntparen.	Docs
PivotTable	`TsgcHTMLComponent_PivotTable`	Bootstrap-draaitabel die rijen en kolommen groepeert en metingen aggregeert met rij-, kolom- en eindtotalen.	Docs
ActivityFeed	`TsgcHTMLComponent_ActivityFeed`	Live activiteitenfeed, nieuwste eerst, met relatieve tijdstempels en out-of-band WebSocket-push.	Docs
AuditTrail	`TsgcHTMLComponent_AuditTrail`	Chronologische audit-logfeed van gebruikers- en systeemacties met actor, actie, doelwit en tijdstempel.	Docs

Grafieken en visualisatie

Datagedreven beelden gebouwd op je eigen cijfers.

Component	Klasse	Beschrijving	Help
Chart	`TsgcHTMLComponent_Chart`	Chart.js-grafiek: lijn, staaf, taart, ring, radar, polair, bubbel en scatter.	Docs
Gauge	`TsgcHTMLComponent_Gauge`	Halfronde SVG-meter met kleurdrempels voor laag / midden / hoog.	Docs
Diagram	`TsgcHTMLComponent_Diagram`	Stroomdiagram met knooppunten en pijlen, gerenderd als inline SVG.	Docs
Map	`TsgcHTMLComponent_Map`	Leaflet.js interactieve kaart (OpenStreetMap / CartoDB-tegels) met markers.	Docs
Heatmap	`TsgcHTMLComponent_Heatmap`	Kleurgeschaald SVG-heatmapraster op basis van celwaarden of een gebonden dataset, met legenda en rij-/kolomlabels.	Docs
Sparkline	`TsgcHTMLComponent_Sparkline`	Compacte inline SVG-lijn-, staaf- of vlaksparkline op basis van een waardenreeks of een gebonden dataset.	Docs
CandlestickChart	`TsgcHTMLComponent_CandlestickChart`	SVG OHLC-candlestickgrafiek met lonten, op/neer-kleuren en een optionele volumestrook.	Docs
QRCode	`TsgcHTMLComponent_QRCode`	Pure-Pascal ISO/IEC 18004 SVG QR-code van elke tekst of URL, met instelbaar foutcorrectieniveau.	Docs
Barcode	`TsgcHTMLComponent_Barcode`	Pure-Pascal Code 128 SVG-barcode van elke ASCII-tekst, met optioneel leesbaar onderschrift.	Docs
TreeMap	`TsgcHTMLComponent_TreeMap`	Squarified treemap gerenderd als een zelfstandige, server-gegenereerde inline SVG, zonder dat een grafiekbibliotheek nodig is.	Docs

Formulieren en invoer

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

Component	Klasse	Beschrijving	Help
Form	`TsgcHTMLComponent_Form`	Datagedreven formulierbouwer met validatie, layouts en AI-formuliergeneratie.	Docs
Edit	`TsgcHTMLComponent_Edit`	Eenregelige tekstinvoer met label, helptekst en datasetbinding.	Docs
Memo	`TsgcHTMLComponent_Memo`	Meerregelige tekstvakinvoer met label en helptekst.	Docs
CheckBox	`TsgcHTMLComponent_CheckBox`	Selectievakje-invoer met label en aangevinkte status.	Docs
RadioGroup	`TsgcHTMLComponent_RadioGroup`	Groep van elkaar uitsluitende keuzerondjes.	Docs
Select	`TsgcHTMLComponent_Select`	Select-dropdown met optiegroepen, meervoudige selectie en datasetbinding.	Docs
InputGroup	`TsgcHTMLComponent_InputGroup`	Invoer met voor- / achtervoegsel-addontekst.	Docs
AutoComplete	`TsgcHTMLComponent_AutoComplete`	Tekstinvoer ondersteund door een HTML5-datalist met suggesties.	Docs
DatePicker	`TsgcHTMLComponent_DatePicker`	Native date- / time- / datetime-invoerveld.	Docs
FileUpload	`TsgcHTMLComponent_FileUpload`	Sleep-en-neerzet bestandsuploadzone met multipart formulier-post.	Docs
RichEditor	`TsgcHTMLComponent_RichEditor`	Op Quill gebaseerde WYSIWYG rich-text-editor met verborgen formulierveld.	Docs
Rating	`TsgcHTMLComponent_Rating`	Ster- (symbool-) beoordelingsweergave of -invoer.	Docs
MultiSelect	`TsgcHTMLComponent_MultiSelect`	Een doorzoekbare Bootstrap multi-select-dropdown met chips, gegroepeerde opties en datasetbinding.	Docs
ColorPicker	`TsgcHTMLComponent_ColorPicker`	Een native HTML5-kleurinvoer met een optioneel hex-tekstveld en voorinstellingen voor kleurstalen.	Docs
Slider	`TsgcHTMLComponent_Slider`	Een Bootstrap-schuifregelaar met een live waardebadge, min/max-labels en kleurstyling.	Docs
TimePicker	`TsgcHTMLComponent_TimePicker`	Een native HTML5-tijdinvoer met min/max-grenzen en granulariteit tot op de seconde.	Docs
SignaturePad	`TsgcHTMLComponent_SignaturePad`	Een canvas-handtekeningveld op basis van pointer-events met acties Wissen, Ongedaan maken en Opslaan.	Docs
Transfer	`TsgcHTMLComponent_Transfer`	Dubbele-lijstwidget om items te verplaatsen tussen een beschikbaar en een toegewezen paneel, met filtering en datasetbinding.	Docs
DateTimePicker	`TsgcHTMLComponent_DateTimePicker`	Native HTML5 datum-en-tijdkiezer die kalender en klok in één veld combineert.	Docs
DateRangePicker	`TsgcHTMLComponent_DateRangePicker`	Gekoppelde begin- en einddatuminvoer voor het kiezen van een datumbereik, met min/max-grenzen.	Docs
RangeSlider	`TsgcHTMLComponent_RangeSlider`	Schuifregelaar met twee grepen die een laag/hoog-waardepaar selecteert, met live waardebadges.	Docs
CameraScanner	`TsgcHTMLComponent_CameraScanner`	Live camerapaneel dat barcodes en QR-codes scant met de native BarcodeDetector van de browser, zonder externe library.	Docs
NumPad	`TsgcHTMLComponent_NumPad`	Numeriek en valuta-toetsenblok voor kassa-invoer, met snelbedragknoppen en locale-onafhankelijke notatie.	Docs

Content en layout

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

Component	Klasse	Beschrijving	Help
Panel	`TsgcHTMLComponent_Panel`	Bootstrap-kaartpaneel met kop / body / voettekst, inklapbaar en scrollbaar.	Docs
StatCard	`TsgcHTMLComponent_StatCard`	Dashboard KPI- / statkaart met icoon, trendpijl en optioneel verloop.	Docs
Accordion	`TsgcHTMLComponent_Accordion`	Verticaal inklappende accordeon van gestapelde uitklapbare panelen.	Docs
Carousel	`TsgcHTMLComponent_Carousel`	Diavoorstelling / carrousel met indicatoren, bediening en autoplay.	Docs
Image	`TsgcHTMLComponent_Image`	Afbeelding met vorm, responsief / lazy-load, lightbox-link en bijschrift.	Docs
Avatar	`TsgcHTMLComponent_Avatar`	Gebruikersavatar (afbeelding of initialen) met grootte, vorm en aanwezigheidsstatusstip.	Docs
Video	`TsgcHTMLComponent_Video`	HTML5 video- / audiospeler plus een YouTube-insluithelper.	Docs
Badge	`TsgcHTMLComponent_Badge`	Enkele Bootstrap-badge met kleur, pilvorm, een inline icoon en een positioneerbare meldingsstip-modus.	Docs
PDFViewer	`TsgcHTMLComponent_PDFViewer`	PDF-viewer op de pagina zelf, aangedreven door pdf.js, met paginanavigatie, zoomen, zoeken, downloaden en afdrukken.	Docs
Chip	`TsgcHTMLComponent_Chip`	Compacte chip / tag met een optioneel icoon, kleur en een verwijderbare sluitknop.	Docs

Overlays en feedback

Dialoogvensters, statusvlakken en laadtoestanden.

Component	Klasse	Beschrijving	Help
Modal	`TsgcHTMLComponent_Modal`	Modaal dialoogvenster met titel / body / voettekst, formaten, gecentreerd en statische achtergrond.	Docs
Offcanvas	`TsgcHTMLComponent_Offcanvas`	Off-canvas inschuifpaneel vanaf links, rechts, boven of onder.	Docs
Popover	`TsgcHTMLComponent_Popover`	Popover-bel op een triggerelement (klik / hover / focus).	Docs
Toast	`TsgcHTMLComponent_Toast`	Toast-melding met kop, body, tijdstempel en automatisch verbergen.	Docs
Snackbar	`TsgcHTMLComponent_Snackbar`	Material-stijl tijdelijke snackbar met een optionele actie.	Docs
Notification	`TsgcHTMLComponent_Notification`	Bel-icoon dropdown-meldingscentrum met een badge voor ongelezen items.	Docs
Spinner	`TsgcHTMLComponent_Spinner`	Laadspinner (border / grow), met grootte en kleur.	Docs
Placeholder	`TsgcHTMLComponent_Placeholder`	Skelet- / placeholder-laadkaart met een geanimeerde glinstering.	Docs
ContextMenu	`TsgcHTMLComponent_ContextMenu`	Rechtsklik-dropdownmenu gekoppeld aan een CSS-selector, met iconen, scheidingslijnen, koppen en server-gerouteerde acties.	Docs
JobProgress	`TsgcHTMLComponent_JobProgress`	Live lijst van voortgangsbalken voor achtergrondtaken met statusbadges, annuleerknoppen en out-of-band fragmentupdates.	Docs
LogViewer	`TsgcHTMLComponent_LogViewer`	Streamende log-/terminalviewer met niveaufilter, zoeken en automatisch scrollen.	Docs
ProgressBar	`TsgcHTMLComponent_ProgressBar`	Bootstrap-voortgangsbalk, gestreept en geanimeerd, enkel of gestapeld multisegment.	Docs
CommandPalette	`TsgcHTMLComponent_CommandPalette`	Ctrl+K / Cmd+K snelactielauncher met eerst-substring-dan-fuzzy filtering, categorieën en server-gerouteerde acties.	Docs
EmptyState	`TsgcHTMLComponent_EmptyState`	Het paneel dat een grid, een lijst of een zoekresultaat toont wanneer er geen rijen zijn, met icoon, titel, beschrijving en tot twee knoppen.	Docs

Chat en AI

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

Component	Klasse	Beschrijving	Help
ChatBox	`TsgcHTMLComponent_ChatBox`	Kaartstijl chatbubbelvak met een invoerbalk en typindicator.	Docs
Chat	`TsgcHTMLComponent_Chat`	WhatsApp-stijl chat met tekst- / afbeelding- / bestand- / audio- / videoberichten, leesbevestigingen en antwoorden.	Docs
AIChat	`TsgcHTMLComponent_AIChat`	AI-assistentchat met provider- / modelkiezer, token-streaming en RAG-bronvermeldingen.	Docs
Presence	`TsgcHTMLComponent_Presence`	"Wie is online"-lijst als avatarstapel of lijst, met live statusupdates.	Docs

Authenticatie

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

Component	Klasse	Beschrijving	Help
Login	`TsgcHTMLComponent_Login`	Kant-en-klaar loginformulier / -pagina (kaart, gecentreerd of volledige pagina) met onthoud-mij en waarschuwingen.	Docs
SocialLogin	`TsgcHTMLComponent_SocialLogin`	OAuth social-login knoppenpaneel (Google, Facebook, Apple, GitHub, Microsoft en meer).	Docs
OAuthCallback	`TsgcHTMLComponent_OAuthCallback`	OAuth callback- / landingspagina in succes-, fout- of laadtoestand met automatische doorverwijzing.	Docs
WebAuthnLogin	`TsgcHTMLComponent_WebAuthnLogin`	Wachtwoordloze passkey- / WebAuthn-login- en registratiewidget.	Docs
RolesPermissions	`TsgcHTMLComponent_RolesPermissions`	Rol-/rechtenmatrix met een selectievakje per cel en live WebSocket-updates voor rechten.	Docs
UserManagement	`TsgcHTMLComponent_UserManagement`	Gebruikersbeheertabel met rollen, status, zoeken en een acties-dropdown per rij.	Docs
ImpersonateBanner	`TsgcHTMLComponent_ImpersonateBanner`	Beheerdersimpersonatiebanner 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.

Component	Klasse	Beschrijving	Help
EngineServer	`TsgcHTMLEngine_Server`	HTML-engine gekoppeld aan een TsgcWebSocketHTTPServer die gerenderde pagina's en ingesloten assets serveert.	Docs
HTMXEngine	`TsgcHTMX_Engine_Server`	htmx-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
PageBuilder	`TsgcHTMLPageBuilder`	Voegt geregistreerde componenten samen tot een complete responsieve pagina, met een visuele editor tijdens design-time.	Docs
TemplateBootstrap	`TsgcHTMLTemplate_Bootstrap`	Verpakt body-inhoud in een volledig Bootstrap 5 HTML-document met thema, taal en richting.	Docs
ThemeController	`TsgcHTMLThemeController`	Runtime thema-wisselaar waarvan de eigenschap `Theme` (`ptDefault`, `ptDark`, `ptDarkPro`) het geselecteerde thema en de gedeelde stylesheet op de pagina toepast.	Docs
ThemeBuilder	`TsgcHTMLThemeBuilder`	CSS-generator waarvan `Mode` (`tmLight`, `tmDark`, `tmSystem`) Bootstrap CSS-variabelen schrijft op basis van eigenschapswaarden, met een optioneel OS-voorkeur-synchronisatiescript voor `tmSystem`.	Docs
HTMXFragment	`TsgcHTMX_Fragment`	Out-of-band htmx-fragment voor het pushen van een gedeeltelijke pagina-update van de server naar de browser.	Docs
HTMXRouter	`TsgcHTMX_Router`	Routeringstabel van `Routes` die een binnenkomend verzoekpad matcht en het (via `HandleRequest`) doorstuurt naar de `OnRoute`-handler van die route.	Docs