Bekijk alle 89 sgcHTML UI-componenten op één plek, gegroepeerd in negen families. Elk component rendert naar Bootstrap 5-markup en werkt op dezelfde manier in Delphi, C++ Builder en .NET, met dezelfde Tsgc*-klassenaam in elk. 27 van de 89 componenten zijn data-aware en binden rechtstreeks aan een TDataSet / DataSource (of een gelijkwaardige .NET-bron); die dragen een Data-aware badge. Klik op een kaart voor de componentpagina, of open de documentatie.
Elk component hieronder wordt geleverd als een uitvoerbaar voorbeeld. Het project 08.Components in de demoset 60.HTML rendert deze hele catalogus als een live, doorklikbare galerij die je in de browser kunt bedienen. Het is inbegrepen bij de gratis proefversie, zodat je de hele galerij lokaal tegen je eigen data kunt draaien.
De proefversie bevat de 60.HTML demoprojecten (waaronder 08.Components). Een gehoste, altijd beschikbare versie van de interactieve galerij is een aparte deploy.
Spring direct naar een familie, of scroll hieronder door de hele catalogus.
14 componenten
11 componenten
10 componenten
21 componenten
10 componenten
12 componenten
4 componenten
7 componenten
7 klassen
Grids, kalenders en boards die je datasets rechtstreeks renderen.
TsgcHTMLComponent_GridTsgcHTMLComponent_GridFunctierijke tabel: sorteren, filteren, CSV/PDF-export, inline bewerken, groeperen, virtueel scrollen en AI-query.
TsgcHTMLComponent_DataTableTsgcHTMLComponent_DataTableDatatabel op hoger niveau die Grid + Pagination omhult met een werkbalk, zoeken en rijtelling.
TsgcHTMLComponent_CalendarTsgcHTMLComponent_CalendarMaandrasterkalender met gebeurtenisstippen en vorige/volgende navigatie.
TsgcHTMLComponent_SchedulerTsgcHTMLComponent_SchedulerKalenderplanner (maand- / weekweergaven) die gebeurtenissen per datum rendert.
TsgcHTMLComponent_TimelineTsgcHTMLComponent_TimelineVerticale tijdlijn van gedateerde gebeurtenissen, te laden vanuit een dataset.
TsgcHTMLComponent_KanbanBoardTsgcHTMLComponent_KanbanBoardKanban-board met kolommen en versleepbare kaarten.
TsgcHTMLComponent_GanttTsgcHTMLComponent_GanttGantt projecttijdlijngrafiek met voortgangsbalken voor taken.
TsgcHTMLComponent_TreeGridTsgcHTMLComponent_TreeGridBootstrap-tabel met inklapbare, hiërarchische rijen opgebouwd uit Id/ParentId-knooppuntparen.
TsgcHTMLComponent_PivotTableTsgcHTMLComponent_PivotTableBootstrap-draaitabel die rijen en kolommen groepeert en metingen aggregeert met rij-, kolom- en eindtotalen.
TsgcHTMLComponent_ActivityFeedTsgcHTMLComponent_ActivityFeedLive activiteitenfeed, nieuwste eerst, met relatieve tijdstempels en out-of-band WebSocket-push.
TsgcHTMLComponent_AuditTrailTsgcHTMLComponent_AuditTrailChronologische audit-logfeed van gebruikers- en systeemacties met actor, actie, doelwit en tijdstempel.
Datagedreven beelden gebouwd op je eigen cijfers.
TsgcHTMLComponent_ChartTsgcHTMLComponent_ChartChart.js-grafiek: lijn, staaf, taart, ring, radar, polair, bubbel en scatter.
TsgcHTMLComponent_GaugeTsgcHTMLComponent_GaugeHalfronde SVG-meter met kleurdrempels voor laag / midden / hoog.
TsgcHTMLComponent_DiagramTsgcHTMLComponent_DiagramStroomdiagram met knooppunten en pijlen, gerenderd als inline SVG.
TsgcHTMLComponent_MapTsgcHTMLComponent_MapLeaflet.js interactieve kaart (OpenStreetMap / CartoDB-tegels) met markers.
TsgcHTMLComponent_HeatmapTsgcHTMLComponent_HeatmapKleurgeschaald SVG-heatmapraster op basis van celwaarden of een gebonden dataset, met legenda en rij-/kolomlabels.
TsgcHTMLComponent_SparklineTsgcHTMLComponent_SparklineCompacte inline SVG-lijn-, staaf- of vlaksparkline op basis van een waardenreeks of een gebonden dataset.
TsgcHTMLComponent_CandlestickChartTsgcHTMLComponent_CandlestickChartSVG OHLC-candlestickgrafiek met lonten, op/neer-kleuren en een optionele volumestrook.
TsgcHTMLComponent_QRCodeTsgcHTMLComponent_QRCodePure-Pascal ISO/IEC 18004 SVG QR-code van elke tekst of URL, met instelbaar foutcorrectieniveau.
TsgcHTMLComponent_BarcodeTsgcHTMLComponent_BarcodePure-Pascal Code 128 SVG-barcode van elke ASCII-tekst, met optioneel leesbaar onderschrift.
TsgcHTMLComponent_TreeMapTsgcHTMLComponent_TreeMapSquarified treemap gerenderd als een zelfstandige, server-gegenereerde inline SVG, zonder dat een grafiekbibliotheek nodig is.
Alles wat je nodig hebt om data vast te leggen, met validatie en datasetbinding.
TsgcHTMLComponent_FormTsgcHTMLComponent_FormDatagedreven formulierbouwer met validatie, layouts en AI-formuliergeneratie.
TsgcHTMLComponent_EditTsgcHTMLComponent_EditEenregelige tekstinvoer met label, helptekst en datasetbinding.
TsgcHTMLComponent_MemoTsgcHTMLComponent_MemoMeerregelige tekstvakinvoer met label en helptekst.
TsgcHTMLComponent_CheckBoxTsgcHTMLComponent_CheckBoxSelectievakje-invoer met label en aangevinkte status.
TsgcHTMLComponent_RadioGroupTsgcHTMLComponent_RadioGroupGroep van elkaar uitsluitende keuzerondjes.
TsgcHTMLComponent_SelectTsgcHTMLComponent_SelectSelect-dropdown met optiegroepen, meervoudige selectie en datasetbinding.
TsgcHTMLComponent_InputGroupTsgcHTMLComponent_InputGroupInvoer met voor- / achtervoegsel-addontekst.
TsgcHTMLComponent_AutoCompleteTsgcHTMLComponent_AutoCompleteTekstinvoer ondersteund door een HTML5-datalist met suggesties.
TsgcHTMLComponent_DatePickerTsgcHTMLComponent_DatePickerNative date- / time- / datetime-invoerveld.
TsgcHTMLComponent_FileUploadTsgcHTMLComponent_FileUploadSleep-en-neerzet bestandsuploadzone met multipart formulier-post.
TsgcHTMLComponent_RichEditorTsgcHTMLComponent_RichEditorOp Quill gebaseerde WYSIWYG rich-text-editor met verborgen formulierveld.
TsgcHTMLComponent_RatingTsgcHTMLComponent_RatingSter- (symbool-) beoordelingsweergave of -invoer.
TsgcHTMLComponent_MultiSelectTsgcHTMLComponent_MultiSelectEen doorzoekbare Bootstrap multi-select-dropdown met chips, gegroepeerde opties en datasetbinding.
TsgcHTMLComponent_ColorPickerTsgcHTMLComponent_ColorPickerEen native HTML5-kleurinvoer met een optioneel hex-tekstveld en voorinstellingen voor kleurstalen.
TsgcHTMLComponent_SliderTsgcHTMLComponent_SliderEen Bootstrap-schuifregelaar met een live waardebadge, min/max-labels en kleurstyling.
TsgcHTMLComponent_TimePickerTsgcHTMLComponent_TimePickerEen native HTML5-tijdinvoer met min/max-grenzen en granulariteit tot op de seconde.
TsgcHTMLComponent_SignaturePadTsgcHTMLComponent_SignaturePadEen canvas-handtekeningveld op basis van pointer-events met acties Wissen, Ongedaan maken en Opslaan.
TsgcHTMLComponent_TransferTsgcHTMLComponent_TransferDubbele-lijstwidget om items te verplaatsen tussen een beschikbaar en een toegewezen paneel, met filtering en datasetbinding.
TsgcHTMLComponent_DateTimePickerTsgcHTMLComponent_DateTimePickerNative HTML5 datum-en-tijdkiezer die kalender en klok in één veld combineert.
TsgcHTMLComponent_DateRangePickerTsgcHTMLComponent_DateRangePickerGekoppelde begin- en einddatuminvoer voor het kiezen van een datumbereik, met min/max-grenzen.
TsgcHTMLComponent_RangeSliderTsgcHTMLComponent_RangeSliderSchuifregelaar met twee grepen die een laag/hoog-waardepaar selecteert, met live waardebadges.
Kaarten, media en KPI-tegels om een pagina in te delen.
TsgcHTMLComponent_PanelTsgcHTMLComponent_PanelBootstrap-kaartpaneel met kop / body / voettekst, inklapbaar en scrollbaar.
TsgcHTMLComponent_StatCardTsgcHTMLComponent_StatCardDashboard KPI- / statkaart met icoon, trendpijl en optioneel verloop.
TsgcHTMLComponent_AccordionTsgcHTMLComponent_AccordionVerticaal inklappende accordeon van gestapelde uitklapbare panelen.
TsgcHTMLComponent_CarouselTsgcHTMLComponent_CarouselDiavoorstelling / carrousel met indicatoren, bediening en autoplay.
TsgcHTMLComponent_ImageTsgcHTMLComponent_ImageAfbeelding met vorm, responsief / lazy-load, lightbox-link en bijschrift.
TsgcHTMLComponent_AvatarTsgcHTMLComponent_AvatarGebruikersavatar (afbeelding of initialen) met grootte, vorm en aanwezigheidsstatusstip.
TsgcHTMLComponent_VideoTsgcHTMLComponent_VideoHTML5 video- / audiospeler plus een YouTube-insluithelper.
TsgcHTMLComponent_BadgeTsgcHTMLComponent_BadgeEnkele Bootstrap-badge met kleur, pilvorm, een inline icoon en een positioneerbare meldingsstip-modus.
TsgcHTMLComponent_PDFViewerTsgcHTMLComponent_PDFViewerPDF-viewer op de pagina zelf, aangedreven door pdf.js, met paginanavigatie, zoomen, zoeken, downloaden en afdrukken.
TsgcHTMLComponent_ChipTsgcHTMLComponent_ChipCompacte chip / tag met een optioneel icoon, kleur en een verwijderbare sluitknop.
Dialoogvensters, statusvlakken en laadtoestanden.
TsgcHTMLComponent_ModalTsgcHTMLComponent_ModalModaal dialoogvenster met titel / body / voettekst, formaten, gecentreerd en statische achtergrond.
TsgcHTMLComponent_OffcanvasTsgcHTMLComponent_OffcanvasOff-canvas inschuifpaneel vanaf links, rechts, boven of onder.
TsgcHTMLComponent_PopoverTsgcHTMLComponent_PopoverPopover-bel op een triggerelement (klik / hover / focus).
TsgcHTMLComponent_ToastTsgcHTMLComponent_ToastToast-melding met kop, body, tijdstempel en automatisch verbergen.
TsgcHTMLComponent_SnackbarTsgcHTMLComponent_SnackbarMaterial-stijl tijdelijke snackbar met een optionele actie.
TsgcHTMLComponent_NotificationTsgcHTMLComponent_NotificationBel-icoon dropdown-meldingscentrum met een badge voor ongelezen items.
TsgcHTMLComponent_SpinnerTsgcHTMLComponent_SpinnerLaadspinner (border / grow), met grootte en kleur.
TsgcHTMLComponent_PlaceholderTsgcHTMLComponent_PlaceholderSkelet- / placeholder-laadkaart met een geanimeerde glinstering.
TsgcHTMLComponent_ContextMenuTsgcHTMLComponent_ContextMenuRechtsklik-dropdownmenu gekoppeld aan een CSS-selector, met iconen, scheidingslijnen, koppen en server-gerouteerde acties.
TsgcHTMLComponent_JobProgressTsgcHTMLComponent_JobProgressLive lijst van voortgangsbalken voor achtergrondtaken met statusbadges, annuleerknoppen en out-of-band fragmentupdates.
TsgcHTMLComponent_LogViewerTsgcHTMLComponent_LogViewerStreamende log-/terminalviewer met niveaufilter, zoeken en automatisch scrollen.
TsgcHTMLComponent_ProgressBarTsgcHTMLComponent_ProgressBarBootstrap-voortgangsbalk, gestreept en geanimeerd, enkel of gestapeld multisegment.
Conversationele UI, van eenvoudige bubbels tot een streamende AI-assistent.
TsgcHTMLComponent_ChatBoxTsgcHTMLComponent_ChatBoxKaartstijl chatbubbelvak met een invoerbalk en typindicator.
TsgcHTMLComponent_ChatTsgcHTMLComponent_ChatWhatsApp-stijl chat met tekst- / afbeelding- / bestand- / audio- / videoberichten, leesbevestigingen en antwoorden.
TsgcHTMLComponent_AIChatTsgcHTMLComponent_AIChatAI-assistentchat met provider- / modelkiezer, token-streaming en RAG-bronvermeldingen.
TsgcHTMLComponent_PresenceTsgcHTMLComponent_Presence"Wie is online"-lijst als avatarstapel of lijst, met live statusupdates.
Kant-en-klare aanmeldstromen, van wachtwoorden tot passkeys.
TsgcHTMLComponent_LoginTsgcHTMLComponent_LoginKant-en-klaar loginformulier / -pagina (kaart, gecentreerd of volledige pagina) met onthoud-mij en waarschuwingen.
TsgcHTMLComponent_SocialLoginTsgcHTMLComponent_SocialLoginOAuth social-login knoppenpaneel (Google, Facebook, Apple, GitHub, Microsoft en meer).
TsgcHTMLComponent_OAuthCallbackTsgcHTMLComponent_OAuthCallbackOAuth callback- / landingspagina in succes-, fout- of laadtoestand met automatische doorverwijzing.
TsgcHTMLComponent_WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginWachtwoordloze passkey- / WebAuthn-login- en registratiewidget.
TsgcHTMLComponent_RolesPermissionsTsgcHTMLComponent_RolesPermissionsRol-/rechtenmatrix met een selectievakje per cel en live WebSocket-updates voor rechten.
TsgcHTMLComponent_UserManagementTsgcHTMLComponent_UserManagementGebruikersbeheertabel met rollen, status, zoeken en een acties-dropdown per rij.
TsgcHTMLComponent_ImpersonateBannerTsgcHTMLComponent_ImpersonateBannerBeheerdersimpersonatiebanner die wordt getoond terwijl je als een andere gebruiker handelt, met uitgang in één klik.
De niet-visuele onderdelen die de pagina's serveren en live houden.
TsgcHTMLEngine_ServerTsgcHTMLEngine_ServerHTML-engine gekoppeld aan een TsgcWebSocketHTTPServer die gerenderde pagina's en ingesloten assets serveert.
TsgcHTMX_Engine_ServerTsgcHTMX_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).
TsgcHTMLPageBuilderTsgcHTMLPageBuilderVoegt geregistreerde componenten samen tot een complete responsieve pagina, met een visuele editor tijdens design-time.
TsgcHTMLThemeControllerTsgcHTMLThemeControllerRuntime thema-wisselaar waarvan de eigenschap Theme (ptDefault, ptDark, ptDarkPro) het geselecteerde thema en de gedeelde stylesheet op de pagina toepast.
TsgcHTMLThemeBuilderTsgcHTMLThemeBuilderCSS-generator waarvan Mode (tmLight, tmDark, tmSystem) Bootstrap CSS-variabelen schrijft op basis van eigenschapswaarden, met een optioneel OS-voorkeur-synchronisatiescript voor tmSystem.
TsgcHTMX_FragmentTsgcHTMX_FragmentOut-of-band htmx-fragment voor het pushen van een gedeeltelijke pagina-update van de server naar de browser.
TsgcHTMX_RouterTsgcHTMX_RouterRouteringstabel van Routes die een binnenkomend verzoekpad matcht en het (via HandleRequest) doorstuurt naar de OnRoute-handler van die route.