Elk component in de bibliotheek, gegroepeerd in acht families. Elk component rendert naar Bootstrap 5-markup en werkt op dezelfde manier in Delphi, C++ Builder en .NET. Klik op een component voor zijn eigen pagina met gebruik en voorbeelden.
12 componenten
7 componenten
4 componenten
12 componenten
7 componenten
8 componenten
3 componenten
4 componenten
Grids, kalenders en boards die je datasets rechtstreeks renderen.
| Component | Klasse | Beschrijving |
|---|---|---|
| Grid | TsgcHTMLComponent_Grid | Functierijke tabel: sorteren, filteren, CSV/PDF-export, inline bewerken, groeperen, virtueel scrollen en AI-query. |
| DataTable | TsgcHTMLComponent_DataTable | Datatabel op hoger niveau die Grid + Pagination omhult met een werkbalk, zoeken en rijtelling. |
| Calendar | TsgcHTMLComponent_Calendar | Maandrasterkalender met gebeurtenisstippen en vorige/volgende navigatie. |
| Scheduler | TsgcHTMLComponent_Scheduler | Kalenderplanner (maand- / weekweergaven) die gebeurtenissen per datum rendert. |
| Timeline | TsgcHTMLComponent_Timeline | Verticale tijdlijn van gedateerde gebeurtenissen, te laden vanuit een dataset. |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | Kanban-board met kolommen en versleepbare kaarten. |
| Gantt | TsgcHTMLComponent_Gantt | Gantt projecttijdlijngrafiek met voortgangsbalken voor taken. |
Datagedreven beelden gebouwd op je eigen cijfers.
| Component | Klasse | Beschrijving |
|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Chart.js-grafiek: lijn, staaf, taart, ring, radar, polair, bubbel en scatter. |
| Gauge | TsgcHTMLComponent_Gauge | Halfronde SVG-meter met kleurdrempels voor laag / midden / hoog. |
| Diagram | TsgcHTMLComponent_Diagram | Stroomdiagram met knooppunten en pijlen, gerenderd als inline SVG. |
| Map | TsgcHTMLComponent_Map | Leaflet.js interactieve kaart (OpenStreetMap / CartoDB-tegels) met markers. |
Alles wat je nodig hebt om data vast te leggen, met validatie en datasetbinding.
| Component | Klasse | Beschrijving |
|---|---|---|
| Form | TsgcHTMLComponent_Form | Datagedreven formulierbouwer met validatie, layouts en AI-formuliergeneratie. |
| Edit | TsgcHTMLComponent_Edit | Eenregelige tekstinvoer met label, helptekst en datasetbinding. |
| Memo | TsgcHTMLComponent_Memo | Meerregelige tekstvakinvoer met label en helptekst. |
| CheckBox | TsgcHTMLComponent_CheckBox | Selectievakje-invoer met label en aangevinkte status. |
| RadioGroup | TsgcHTMLComponent_RadioGroup | Groep van elkaar uitsluitende keuzerondjes. |
| Select | TsgcHTMLComponent_Select | Select-dropdown met optiegroepen, meervoudige selectie en datasetbinding. |
| InputGroup | TsgcHTMLComponent_InputGroup | Invoer met voor- / achtervoegsel-addontekst. |
| AutoComplete | TsgcHTMLComponent_AutoComplete | Tekstinvoer ondersteund door een HTML5-datalist met suggesties. |
| DatePicker | TsgcHTMLComponent_DatePicker | Native date- / time- / datetime-invoerveld. |
| FileUpload | TsgcHTMLComponent_FileUpload | Sleep-en-neerzet bestandsuploadzone met multipart formulier-post. |
| RichEditor | TsgcHTMLComponent_RichEditor | Op Quill gebaseerde WYSIWYG rich-text-editor met verborgen formulierveld. |
| Rating | TsgcHTMLComponent_Rating | Ster- (symbool-) beoordelingsweergave of -invoer. |
Kaarten, media en KPI-tegels om een pagina in te delen.
| Component | Klasse | Beschrijving |
|---|---|---|
| Panel | TsgcHTMLComponent_Panel | Bootstrap-kaartpaneel met kop / body / voettekst, inklapbaar en scrollbaar. |
| StatCard | TsgcHTMLComponent_StatCard | Dashboard KPI- / statkaart met icoon, trendpijl en optioneel verloop. |
| Accordion | TsgcHTMLComponent_Accordion | Verticaal inklappende accordeon van gestapelde uitklapbare panelen. |
| Carousel | TsgcHTMLComponent_Carousel | Diavoorstelling / carrousel met indicatoren, bediening en autoplay. |
| Image | TsgcHTMLComponent_Image | Afbeelding met vorm, responsief / lazy-load, lightbox-link en bijschrift. |
| Avatar | TsgcHTMLComponent_Avatar | Gebruikersavatar (afbeelding of initialen) met grootte, vorm en aanwezigheidsstatusstip. |
| Video | TsgcHTMLComponent_Video | HTML5 video- / audiospeler plus een YouTube-insluithelper. |
Dialoogvensters, statusvlakken en laadtoestanden.
| Component | Klasse | Beschrijving |
|---|---|---|
| Modal | TsgcHTMLComponent_Modal | Modaal dialoogvenster met titel / body / voettekst, formaten, gecentreerd en statische achtergrond. |
| Offcanvas | TsgcHTMLComponent_Offcanvas | Off-canvas inschuifpaneel vanaf links, rechts, boven of onder. |
| Popover | TsgcHTMLComponent_Popover | Popover-bel op een triggerelement (klik / hover / focus). |
| Toast | TsgcHTMLComponent_Toast | Toast-melding met kop, body, tijdstempel en automatisch verbergen. |
| Snackbar | TsgcHTMLComponent_Snackbar | Material-stijl tijdelijke snackbar met een optionele actie. |
| Notification | TsgcHTMLComponent_Notification | Bel-icoon dropdown-meldingscentrum met een badge voor ongelezen items. |
| Spinner | TsgcHTMLComponent_Spinner | Laadspinner (border / grow), met grootte en kleur. |
| Placeholder | TsgcHTMLComponent_Placeholder | Skelet- / placeholder-laadkaart met een geanimeerde glinstering. |
Conversationele UI, van eenvoudige bubbels tot een streamende AI-assistent.
| Component | Klasse | Beschrijving |
|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | Kaartstijl chatbubbelvak met een invoerbalk en typindicator. |
| Chat | TsgcHTMLComponent_Chat | WhatsApp-stijl chat met tekst- / afbeelding- / bestand- / audio- / videoberichten, leesbevestigingen en antwoorden. |
| AIChat | TsgcHTMLComponent_AIChat | AI-assistentchat met provider- / modelkiezer, token-streaming en RAG-bronvermeldingen. |
Kant-en-klare aanmeldstromen, van wachtwoorden tot passkeys.
| Component | Klasse | Beschrijving |
|---|---|---|
| Login | TsgcHTMLComponent_Login | Kant-en-klaar loginformulier / -pagina (kaart, gecentreerd of volledige pagina) met onthoud-mij en waarschuwingen. |
| SocialLogin | TsgcHTMLComponent_SocialLogin | OAuth social-login knoppenpaneel (Google, Facebook, Apple, GitHub, Microsoft en meer). |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | OAuth callback- / landingspagina in succes-, fout- of laadtoestand met automatische doorverwijzing. |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | Wachtwoordloze passkey- / WebAuthn-login- en registratiewidget. |
De niet-visuele onderdelen die de pagina's serveren en live houden.
| Klasse | Rol |
|---|---|
TsgcHTMLEngine_Server | HTML-engine gekoppeld aan een TsgcWebSocketHTTPServer die gerenderde pagina's en ingesloten assets serveert. |
TsgcHTMX_Engine_Server | htmx-engine gekoppeld aan dezelfde server: gedeeltelijke pagina-swaps over HTTP en live server-push over WebSockets. |
TsgcHTMLPageBuilder | Voegt geregistreerde componenten samen tot een complete responsieve pagina (met een visuele editor tijdens design-time). |
TsgcHTMLTemplate_Bootstrap | Verpakt body-inhoud in een volledig Bootstrap 5 HTML-document met thema, taal en richting. |
TsgcHTMLThemeController / TsgcHTMLThemeBuilder | Lichte / donkere theming en een runtime CSS-generator die Bootstrap CSS-variabelen schrijft. |
TsgcHTMX_Fragment / TsgcHTMX_Router | Out-of-band htmx-fragmenten voor live updates en helpers voor request-routing. |