sgcHTML Feature Matrix — All Components | eSeGeCe

sgcHTML-Funktionsmatrix

Jede Komponente der Bibliothek, gruppiert in neun Familien. Jede rendert zu Bootstrap-5-Markup und funktioniert in Delphi, C++ Builder und .NET gleich. Die meisten sind datengebunden und binden direkt an ein TDataSet über LoadFromDataSet / DataSource (oder eine entsprechende .NET-Quelle). Klicken Sie auf eine Komponente für ihre eigene Seite mit Verwendung und Beispielen. Alle Komponenten wenden automatische HTML-, Attribut-, JavaScript- und URL-Ausgabekodierung sowie URL-Bereinigung an, sodass dynamischer Inhalt standardmäßig maskiert wird, um vor XSS und Injection zu schützen.

14 Komponenten

Daten & Tabellen

11 Komponenten

Diagramme & Visualisierung

10 Komponenten

Formulare & Eingaben

21 Komponenten

Inhalt & Layout

10 Komponenten

Overlays & Feedback

12 Komponenten

Chat & KI

4 Komponenten

Authentifizierung

7 Komponenten

Infrastruktur

8 Klassen

Daten & Tabellen

Daten & Tabellen

Grids, Kalender und Boards, die Ihre Datasets direkt rendern.

KomponenteKlasseBeschreibungHilfe
GridTsgcHTMLComponent_GridFunktionsreiche Tabelle: Sortieren, Filtern, CSV-/PDF-Export, Inline-Bearbeitung, Gruppierung, virtuelles Scrollen und KI-Abfrage.Docs
DataTableTsgcHTMLComponent_DataTableÜbergeordnete Datentabelle, die Grid + Pagination mit Toolbar, Suche und Zeilenanzahl umschließt.Docs
CalendarTsgcHTMLComponent_CalendarKalender im Monatsraster mit Ereignispunkten und Vor-/Zurück-Navigation.Docs
SchedulerTsgcHTMLComponent_SchedulerKalenderplaner (Monats-/Wochenansicht), der Ereignisse nach Datum rendert.Docs
TimelineTsgcHTMLComponent_TimelineVertikale Zeitleiste aus datierten Ereignissen, aus einem Dataset ladbar.Docs
KanbanBoardTsgcHTMLComponent_KanbanBoardKanban-Board aus Spalten und ziehbaren Karten.Docs
GanttTsgcHTMLComponent_GanttGantt-Projektzeitplandiagramm mit Aufgabenfortschrittsbalken.Docs
TreeGridTsgcHTMLComponent_TreeGridBootstrap-Tabelle mit einklappbaren, hierarchischen Zeilen, aufgebaut aus Id/ParentId-Knotenpaaren.Docs
PivotTableTsgcHTMLComponent_PivotTableBootstrap-Pivot-Tabelle, die Zeilen und Spalten gruppiert und Kennzahlen mit Zeilen-, Spalten- und Gesamtsummen aggregiert.Docs
ActivityFeedTsgcHTMLComponent_ActivityFeedLive-Aktivitäts-Feed (neueste zuerst) mit relativen Zeitstempeln und Out-of-Band-WebSocket-Push.Docs
AuditTrailTsgcHTMLComponent_AuditTrailChronologischer Audit-Log-Feed von Benutzer- und Systemaktionen mit Akteur, Aktion, Ziel und Zeitstempel.Docs
Diagramme & Visualisierung

Diagramme & Visualisierung

Datengetriebene Grafiken, aus Ihren eigenen Zahlen erstellt.

KomponenteKlasseBeschreibungHilfe
ChartTsgcHTMLComponent_ChartChart.js-Diagramm: Linie, Balken, Kreis, Donut, Radar, Polar, Blase und Streuung.Docs
GaugeTsgcHTMLComponent_GaugeHalbkreisförmiges SVG-Messgerät mit Niedrig-/Mittel-/Hoch-Farbschwellen.Docs
DiagramTsgcHTMLComponent_DiagramKnoten-und-Pfeil-Flussdiagramm, als Inline-SVG gerendert.Docs
MapTsgcHTMLComponent_MapInteraktive Leaflet.js-Karte (OpenStreetMap-/CartoDB-Kacheln) mit Markern.Docs
HeatmapTsgcHTMLComponent_HeatmapFarbskaliertes SVG-Heatmap-Raster aus Zellwerten oder einem gebundenen Dataset, mit Legende und Zeilen-/Spaltenbeschriftungen.Docs
SparklineTsgcHTMLComponent_SparklineKompakte Inline-SVG-Sparkline (Linie, Balken oder Fläche) aus einer Werteserie oder einem gebundenen Dataset.Docs
CandlestickChartTsgcHTMLComponent_CandlestickChartSVG-OHLC-Kerzenchart mit Dochten, Auf-/Ab-Farben und einem optionalen Volumenstreifen.Docs
QRCodeTsgcHTMLComponent_QRCodeReiner Pascal-ISO/IEC-18004-SVG-QR-Code aus beliebigem Text oder einer URL, mit wählbarer Fehlerkorrekturstufe.Docs
BarcodeTsgcHTMLComponent_BarcodeReiner Pascal-Code-128-SVG-Barcode aus beliebigem ASCII-Text, mit optionaler lesbarer Bildunterschrift.Docs
TreeMapTsgcHTMLComponent_TreeMapSquarified Treemap, gerendert als eigenständiges, serverseitig erzeugtes Inline-SVG, ohne Chart-Bibliothek.Docs
Formulare & Eingaben

Formulare & Eingaben

Alles, was Sie zum Erfassen von Daten brauchen, mit Validierung und Dataset-Bindung.

KomponenteKlasseBeschreibungHilfe
FormTsgcHTMLComponent_FormDatengetriebener Formular-Builder mit Validierung, Layouts und KI-Formularerzeugung.Docs
EditTsgcHTMLComponent_EditEinzeiliges Texteingabefeld mit Label, Hilfetext und Dataset-Bindung.Docs
MemoTsgcHTMLComponent_MemoMehrzeiliges Textbereich-Eingabefeld mit Label und Hilfetext.Docs
CheckBoxTsgcHTMLComponent_CheckBoxKontrollkästchen-Eingabe mit Label und Aktiviert-Zustand.Docs
RadioGroupTsgcHTMLComponent_RadioGroupGruppe sich gegenseitig ausschließender Radio-Optionen.Docs
SelectTsgcHTMLComponent_SelectAuswahl-Dropdown mit Optionsgruppen, Mehrfachauswahl und Dataset-Bindung.Docs
InputGroupTsgcHTMLComponent_InputGroupEingabe mit vorangestelltem/nachgestelltem Addon-Text.Docs
AutoCompleteTsgcHTMLComponent_AutoCompleteTexteingabe mit einer HTML5-Datalist aus Vorschlägen.Docs
DatePickerTsgcHTMLComponent_DatePickerNatives Datums-/Zeit-/Datum-Zeit-Eingabefeld.Docs
FileUploadTsgcHTMLComponent_FileUploadDrag-and-Drop-Datei-Upload-Zone mit Multipart-Formular-POST.Docs
RichEditorTsgcHTMLComponent_RichEditorQuill-basierter WYSIWYG-Rich-Text-Editor mit verborgenem Formularfeld.Docs
RatingTsgcHTMLComponent_RatingStern- (Symbol-)Bewertungsanzeige oder -eingabe.Docs
MultiSelectTsgcHTMLComponent_MultiSelectEin durchsuchbares Bootstrap-Mehrfachauswahl-Dropdown mit Chips, gruppierten Optionen und Dataset-Bindung.Docs
ColorPickerTsgcHTMLComponent_ColorPickerEine native HTML5-Farbeingabe mit optionalem Hex-Textfeld und vordefinierten Farbfeldern.Docs
SliderTsgcHTMLComponent_SliderEin Bootstrap-Bereichsregler mit Live-Wert-Abzeichen, Min-/Max-Beschriftungen und Farbgestaltung.Docs
TimePickerTsgcHTMLComponent_TimePickerEine native HTML5-Zeiteingabe mit Min-/Max-Grenzen und sekundengenauer Granularität.Docs
SignaturePadTsgcHTMLComponent_SignaturePadEin Pointer-Events-Canvas-Unterschriftenfeld mit den Aktionen Löschen, Rückgängig und Speichern.Docs
TransferTsgcHTMLComponent_TransferDoppel-Listbox-Widget zum Verschieben von Elementen zwischen einem Verfügbar- und einem Zugewiesen-Panel, mit Filterung und Dataset-Bindung.Docs
DateTimePickerTsgcHTMLComponent_DateTimePickerNativer HTML5-Datum-und-Zeit-Picker, der Kalender und Uhr in einem einzigen Feld vereint.Docs
DateRangePickerTsgcHTMLComponent_DateRangePickerGepaarte Start- und End-Datumsfelder zur Auswahl eines Datumsbereichs, mit Min-/Max-Grenzen.Docs
RangeSliderTsgcHTMLComponent_RangeSliderSlider mit zwei Reglern zur Auswahl eines Wertepaars (niedrig/hoch), mit Live-Wert-Badges.Docs
Inhalt & Layout

Inhalt & Layout

Karten, Medien und KPI-Kacheln zum Layout einer Seite.

KomponenteKlasseBeschreibungHilfe
PanelTsgcHTMLComponent_PanelBootstrap-Card-Panel mit Kopfzeile/Inhalt/Fußzeile, einklappbar und scrollbar.Docs
StatCardTsgcHTMLComponent_StatCardDashboard-KPI-/Statistik-Karte mit Icon, Trendpfeil und optionalem Verlauf.Docs
AccordionTsgcHTMLComponent_AccordionVertikal einklappbares Accordion aus gestapelten ausklappbaren Panels.Docs
CarouselTsgcHTMLComponent_CarouselBilder-Diashow/-Karussell mit Indikatoren, Steuerelementen und automatischer Wiedergabe.Docs
ImageTsgcHTMLComponent_ImageBild mit Form, responsiv/Lazy-Load, Lightbox-Link und Bildunterschrift.Docs
AvatarTsgcHTMLComponent_AvatarBenutzer-Avatar (Bild oder Initialen) mit Größe, Form und Präsenzstatus-Punkt.Docs
VideoTsgcHTMLComponent_VideoHTML5-Video-/Audioplayer plus ein YouTube-Einbettungshelfer.Docs
BadgeTsgcHTMLComponent_BadgeEinzelnes Bootstrap-Abzeichen mit Farbe, Pill-Form, einem Inline-Icon und einem positionierbaren Benachrichtigungspunkt-Modus.Docs
PDFViewerTsgcHTMLComponent_PDFViewerIn die Seite eingebetteter PDF-Viewer auf Basis von pdf.js, mit Seitennavigation, Zoom, Suche, Download und Druck.Docs
ChipTsgcHTMLComponent_ChipKompakter Chip / Tag mit optionalem Icon, Farbe und entfernbarem Schließen-Button.Docs
Overlays & Feedback

Overlays & Feedback

Dialoge, Statusflächen und Ladezustände.

KomponenteKlasseBeschreibungHilfe
ModalTsgcHTMLComponent_ModalModal-Dialog mit Titel/Inhalt/Fußzeile, Größen, zentriert und statischem Hintergrund.Docs
OffcanvasTsgcHTMLComponent_OffcanvasOff-Canvas-Slide-in-Panel von links, rechts, oben oder unten.Docs
PopoverTsgcHTMLComponent_PopoverPopover-Sprechblase an einem Trigger-Element (Klick/Hover/Fokus).Docs
ToastTsgcHTMLComponent_ToastToast-Benachrichtigung mit Kopfzeile, Inhalt, Zeitstempel und Auto-Ausblenden.Docs
SnackbarTsgcHTMLComponent_SnackbarKurzlebige Snackbar im Material-Stil mit einer optionalen Aktion.Docs
NotificationTsgcHTMLComponent_NotificationGlocken-Symbol-Dropdown als Benachrichtigungszentrale mit Ungelesen-Abzeichen.Docs
SpinnerTsgcHTMLComponent_SpinnerLade-Spinner (Rahmen/Grow), dimensioniert und eingefärbt.Docs
PlaceholderTsgcHTMLComponent_PlaceholderSkelett-/Platzhalter-Ladekarte mit einem animierten Schimmer.Docs
ContextMenuTsgcHTMLComponent_ContextMenuRechtsklick-Dropdown-Menü, begrenzt auf einen CSS-Selektor, mit Icons, Trennlinien, Überschriften und serverseitig weitergeleiteten Aktionen.Docs
JobProgressTsgcHTMLComponent_JobProgressLive-Liste von Fortschrittsbalken für Hintergrundjobs mit Status-Abzeichen, Abbrechen-Schaltflächen und Out-of-Band-Fragment-Updates.Docs
LogViewerTsgcHTMLComponent_LogViewerStreaming-Log-/Terminal-Viewer mit Stufenfilter, Suche und automatischem Scrollen.Docs
ProgressBarTsgcHTMLComponent_ProgressBarBootstrap-Fortschrittsbalken, gestreift und animiert, einzeln oder als gestapeltes Mehrfachsegment.Docs
Chat & KI

Chat & KI

Konversationelle Oberflächen, von einfachen Sprechblasen bis zu einem streamenden KI-Assistenten.

KomponenteKlasseBeschreibungHilfe
ChatBoxTsgcHTMLComponent_ChatBoxKartenförmige Chat-Sprechblasen-Box mit Eingabeleiste und Tipp-Indikator.Docs
ChatTsgcHTMLComponent_ChatChat im WhatsApp-Stil mit Text-/Bild-/Datei-/Audio-/Videonachrichten, Lesebestätigungen und Antworten.Docs
AIChatTsgcHTMLComponent_AIChatKI-Assistenten-Chat mit Provider-/Modellauswahl, Token-Streaming und RAG-Quellenangaben.Docs
PresenceTsgcHTMLComponent_Presence„Wer ist online"-Liste als Avatar-Stapel oder Liste, mit Live-Statusaktualisierungen.Docs
Authentifizierung

Authentifizierung

Fertige Anmeldeabläufe, von Passwörtern bis zu Passkeys.

KomponenteKlasseBeschreibungHilfe
LoginTsgcHTMLComponent_LoginFertiges Anmeldeformular/-seite (Karte, zentriert oder ganzseitig) mit Angemeldet-bleiben und Hinweisen.Docs
SocialLoginTsgcHTMLComponent_SocialLoginOAuth-Social-Login-Schaltflächenpanel (Google, Facebook, Apple, GitHub, Microsoft und mehr).Docs
OAuthCallbackTsgcHTMLComponent_OAuthCallbackOAuth-Callback-/Landing-Seite im Erfolgs-, Fehler- oder Ladezustand mit automatischer Weiterleitung.Docs
WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginPasswortloses Passkey-/WebAuthn-Widget zum Anmelden und Registrieren.Docs
RolesPermissionsTsgcHTMLComponent_RolesPermissionsRollen-/Berechtigungsmatrix mit einem Kontrollkästchen pro Zelle und Live-WebSocket-Aktualisierungen der Berechtigungen.Docs
UserManagementTsgcHTMLComponent_UserManagementBenutzerverwaltungstabelle mit Rollen, Status, Suche und einem Aktionen-Dropdown pro Zeile.Docs
ImpersonateBannerTsgcHTMLComponent_ImpersonateBannerAdmin-Impersonation-Banner, das angezeigt wird, während man als anderer Benutzer agiert, mit Ein-Klick-Ausstieg.Docs
Infrastruktur

Engine, Server & Theming

Die nicht-visuellen Bausteine, die die Seiten ausliefern und live halten.

KomponenteKlasseBeschreibungHilfe
EngineServerTsgcHTMLEngine_ServerHTML-Engine, gebunden an einen TsgcWebSocketHTTPServer, der gerenderte Seiten und eingebettete Assets ausliefert.Docs
HTMXEngineTsgcHTMX_Engine_Serverhtmx-Engine, an denselben Server angebunden. Sie hängt sich in die HTTP- und WebSocket-Handler ein, verteilt eingehende Anfragen und Nachrichten und sendet oder broadcastet HTML-Fragmente in Echtzeit an verbundene Browser (DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment).Docs
PageBuilderTsgcHTMLPageBuilderSetzt registrierte Komponenten zu einer vollständigen responsiven Seite zusammen (mit einem visuellen Editor zur Entwurfszeit).Docs
TemplateBootstrapTsgcHTMLTemplate_BootstrapUmschließt Inhalt in einem vollständigen Bootstrap-5-HTML-Dokument mit Thema, Sprache und Schreibrichtung.Docs
ThemeControllerTsgcHTMLThemeControllerLaufzeit-Theme-Umschalter, dessen Eigenschaft Theme (ptDefault, ptDark, ptDarkPro) das ausgewählte Theme und das gemeinsame Stylesheet auf die Seite anwendet.Docs
ThemeBuilderTsgcHTMLThemeBuilderCSS-Generator, dessen Mode (tmLight, tmDark, tmSystem) Bootstrap-CSS-Variablen aus Eigenschaftswerten schreibt, mit einem optionalen Skript zur Synchronisierung mit der Betriebssystem-Einstellung für tmSystem.Docs
HTMXFragmentTsgcHTMX_FragmentOut-of-Band-htmx-Fragment zum Übertragen eines Teilseiten-Updates vom Server an den Browser.Docs
HTMXRouterTsgcHTMX_RouterRouting-Tabelle aus Routes, die einen eingehenden Anfragepfad abgleicht und ihn (über HandleRequest) an den OnRoute-Handler dieser Route weiterleitet.Docs
Bestes Preis-Leistungs-Verhältnis: All-AccessAlle eSeGeCe-Produkte, inklusive Premium-Support, ab €1,059 pro Jahr.
All-Access-Preise ansehen

Mit sgcHTML entwickeln

Laden Sie die kostenlose Testversion herunter und beginnen Sie, Web-UIs in Delphi, C++ Builder oder .NET zusammenzustellen.

Kostenlose Testversion herunterladen Preise ansehen