Graphiques, jauges et treemaps
Séries Chart.js, jauge SVG, sparkline et treemap, tous générés depuis Pascal.
Ouvrir la démo en ligne →
Parcourez les 93 composants d'interface sgcHTML au même endroit, regroupés en neuf familles. Chaque composant produit du balisage Bootstrap 5 et fonctionne de la même façon en Delphi, C++ Builder et .NET, avec le même nom de classe Tsgc*. 28 des 93 composants sont orientés données et se lient directement à un TDataSet / DataSource (ou une source .NET équivalente) ; ceux-ci portent un badge Orienté données. Cliquez sur une carte pour accéder à sa page de composant, ou ouvrez la documentation.
Chaque composant ci-dessous est fourni sous forme d'exemple exécutable. Le projet 08.Components du jeu de démos 60.HTML restitue tout ce catalogue sous forme de galerie interactive et cliquable que vous pouvez piloter dans le navigateur. Il est inclus dans la version d'essai gratuite, vous pouvez donc exécuter toute la galerie localement sur vos propres données.
La version d'essai fournit les projets de démonstration 60.HTML (y compris 08.Components). Une version hébergée et toujours active de la galerie interactive fait l'objet d'un déploiement distinct.
Accédez directement à une famille, ou faites défiler tout le catalogue ci-dessous.
14 composants
11 composants
10 composants
23 composants
10 composants
14 composants
4 composants
7 composants
7 classes
Grilles, calendriers et tableaux qui rendent vos jeux de données directement.
TsgcHTMLComponent_GridTsgcHTMLComponent_GridTableau riche en fonctionnalités : tri, filtre, export CSV/PDF, édition en ligne, regroupement, défilement virtuel et requête IA.
TsgcHTMLComponent_DataTableTsgcHTMLComponent_DataTableTableau de données de plus haut niveau enveloppant Grid + Pagination avec une barre d'outils, une recherche et un décompte de lignes.
TsgcHTMLComponent_CalendarTsgcHTMLComponent_CalendarCalendrier en grille mensuelle avec points d'événements et navigation précédent/suivant.
TsgcHTMLComponent_SchedulerTsgcHTMLComponent_SchedulerPlanificateur de calendrier (vues mois / semaine) rendant les événements par date.
TsgcHTMLComponent_TimelineTsgcHTMLComponent_TimelineChronologie verticale d'événements datés, chargeable depuis un jeu de données.
TsgcHTMLComponent_KanbanBoardTsgcHTMLComponent_KanbanBoardTableau Kanban de colonnes et de cartes déplaçables.
TsgcHTMLComponent_GanttTsgcHTMLComponent_GanttDiagramme de Gantt de planning de projet avec barres de progression des tâches.
TsgcHTMLComponent_TreeGridTsgcHTMLComponent_TreeGridTableau Bootstrap avec des lignes hiérarchiques repliables construites à partir de paires de nœuds Id/ParentId.
TsgcHTMLComponent_PivotTableTsgcHTMLComponent_PivotTableTableau croisé dynamique Bootstrap qui regroupe les lignes et les colonnes et agrège les mesures avec des totaux de ligne, de colonne et généraux.
TsgcHTMLComponent_ActivityFeedTsgcHTMLComponent_ActivityFeedFlux d'activité en direct, du plus récent au plus ancien, avec horodatages relatifs et envoi WebSocket hors-bande.
TsgcHTMLComponent_AuditTrailTsgcHTMLComponent_AuditTrailFlux de journal d'audit chronologique des actions des utilisateurs et du système avec acteur, action, cible et horodatage.
Des visuels pilotés par les données, construits à partir de vos propres chiffres.
TsgcHTMLComponent_ChartTsgcHTMLComponent_ChartGraphique Chart.js : ligne, barre, secteurs, anneau, radar, polaire, bulles et nuage de points.
TsgcHTMLComponent_GaugeTsgcHTMLComponent_GaugeJauge SVG semi-circulaire avec seuils de couleur bas / moyen / haut.
TsgcHTMLComponent_DiagramTsgcHTMLComponent_DiagramDiagramme de flux à nœuds et flèches rendu en SVG en ligne.
TsgcHTMLComponent_MapTsgcHTMLComponent_MapCarte interactive Leaflet.js (tuiles OpenStreetMap / CartoDB) avec marqueurs.
TsgcHTMLComponent_HeatmapTsgcHTMLComponent_HeatmapGrille de carte de chaleur SVG à échelle de couleur à partir de valeurs de cellules ou d'un jeu de données lié, avec légende et libellés de ligne/colonne.
TsgcHTMLComponent_SparklineTsgcHTMLComponent_SparklineSparkline SVG compacte, en ligne, barre ou aire, intégrée dans le texte, à partir d'une série de valeurs ou d'un jeu de données lié.
TsgcHTMLComponent_CandlestickChartTsgcHTMLComponent_CandlestickChartGraphique en chandeliers OHLC en SVG avec mèches, couleurs hausse/baisse et bande de volume optionnelle.
TsgcHTMLComponent_QRCodeTsgcHTMLComponent_QRCodeCode QR SVG ISO/IEC 18004 en Pascal pur à partir de tout texte ou URL, avec niveau de correction d'erreur sélectionnable.
TsgcHTMLComponent_BarcodeTsgcHTMLComponent_BarcodeCode-barres Code 128 SVG en Pascal pur à partir de tout texte ASCII, avec légende lisible optionnelle.
TsgcHTMLComponent_TreeMapTsgcHTMLComponent_TreeMapTreemap « squarifié » rendu en SVG en ligne, autonome et généré côté serveur, sans bibliothèque de graphiques requise.
Tout ce dont vous avez besoin pour capturer des données, avec validation et liaison aux jeux de données.
TsgcHTMLComponent_FormTsgcHTMLComponent_FormGénérateur de formulaires piloté par les données avec validation, mises en page et génération de formulaires par IA.
TsgcHTMLComponent_EditTsgcHTMLComponent_EditChamp de saisie de texte sur une ligne avec libellé, texte d'aide et liaison aux jeux de données.
TsgcHTMLComponent_MemoTsgcHTMLComponent_MemoZone de saisie de texte multiligne avec libellé et texte d'aide.
TsgcHTMLComponent_CheckBoxTsgcHTMLComponent_CheckBoxCase à cocher avec libellé et état coché.
TsgcHTMLComponent_RadioGroupTsgcHTMLComponent_RadioGroupGroupe d'options radio mutuellement exclusives.
TsgcHTMLComponent_SelectTsgcHTMLComponent_SelectListe déroulante de sélection avec groupes d'options, sélection multiple et liaison aux jeux de données.
TsgcHTMLComponent_InputGroupTsgcHTMLComponent_InputGroupSaisie avec texte d'addon en préfixe / suffixe.
TsgcHTMLComponent_AutoCompleteTsgcHTMLComponent_AutoCompleteChamp de saisie adossé à une datalist HTML5 de suggestions.
TsgcHTMLComponent_DatePickerTsgcHTMLComponent_DatePickerChamp de saisie natif date / heure / date-heure.
TsgcHTMLComponent_FileUploadTsgcHTMLComponent_FileUploadZone d'envoi de fichiers par glisser-déposer avec soumission de formulaire multipart.
TsgcHTMLComponent_RichEditorTsgcHTMLComponent_RichEditorÉditeur de texte enrichi WYSIWYG basé sur Quill avec champ de formulaire masqué.
TsgcHTMLComponent_RatingTsgcHTMLComponent_RatingAffichage ou saisie de notation par étoiles (symboles).
TsgcHTMLComponent_MultiSelectTsgcHTMLComponent_MultiSelectUne liste déroulante Bootstrap à sélection multiple et recherche, avec puces, options groupées et liaison aux jeux de données.
TsgcHTMLComponent_ColorPickerTsgcHTMLComponent_ColorPickerUne saisie de couleur HTML5 native avec un champ de texte hexadécimal optionnel et des nuanciers prédéfinis.
TsgcHTMLComponent_SliderTsgcHTMLComponent_SliderUn curseur de plage Bootstrap avec un badge de valeur en direct, des libellés min/max et une coloration.
TsgcHTMLComponent_TimePickerTsgcHTMLComponent_TimePickerUne saisie d'heure HTML5 native avec bornes min/max et une granularité à la seconde.
TsgcHTMLComponent_SignaturePadTsgcHTMLComponent_SignaturePadUn pavé de signature sur canevas basé sur les événements pointeur, avec les actions Effacer, Annuler et Enregistrer.
TsgcHTMLComponent_TransferTsgcHTMLComponent_TransferWidget à double liste pour déplacer des éléments entre un panneau disponible et un panneau assigné, avec filtrage et liaison aux jeux de données.
TsgcHTMLComponent_DateTimePickerTsgcHTMLComponent_DateTimePickerSélecteur de date et d'heure HTML5 natif combinant calendrier et horloge dans un seul champ.
TsgcHTMLComponent_DateRangePickerTsgcHTMLComponent_DateRangePickerChamps de date de début et de fin appariés pour choisir une plage de dates, avec bornes min/max.
TsgcHTMLComponent_RangeSliderTsgcHTMLComponent_RangeSliderCurseur à deux poignées sélectionnant une paire de valeurs basse/haute, avec badges de valeur en direct.
TsgcHTMLComponent_CameraScannerTsgcHTMLComponent_CameraScannerPanneau caméra en direct qui scanne codes-barres et QR codes avec le BarcodeDetector natif du navigateur, sans bibliothèque tierce.
TsgcHTMLComponent_NumPadTsgcHTMLComponent_NumPadPavé numérique et monétaire tactile pour la saisie en point de vente, avec boutons de montants rapides et un formatage indépendant de la langue.
Cartes, médias et tuiles d'indicateurs pour agencer une page.
TsgcHTMLComponent_PanelTsgcHTMLComponent_PanelPanneau-carte Bootstrap avec en-tête / corps / pied de page, repliable et défilable.
TsgcHTMLComponent_StatCardTsgcHTMLComponent_StatCardCarte d'indicateur / de statistique de tableau de bord avec icône, flèche de tendance et dégradé optionnel.
TsgcHTMLComponent_AccordionTsgcHTMLComponent_AccordionAccordéon à repliement vertical de panneaux empilés et déployables.
TsgcHTMLComponent_CarouselTsgcHTMLComponent_CarouselDiaporama / carrousel d'images avec indicateurs, contrôles et lecture automatique.
TsgcHTMLComponent_ImageTsgcHTMLComponent_ImageImage avec forme, responsive / chargement différé, lien lightbox et légende.
TsgcHTMLComponent_AvatarTsgcHTMLComponent_AvatarAvatar utilisateur (image ou initiales) avec taille, forme et point d'état de présence.
TsgcHTMLComponent_VideoTsgcHTMLComponent_VideoLecteur vidéo / audio HTML5 ainsi qu'un assistant d'intégration YouTube.
TsgcHTMLComponent_BadgeTsgcHTMLComponent_BadgeBadge Bootstrap unique avec couleur, forme pilule, une icône en ligne et un mode point de notification positionné.
TsgcHTMLComponent_PDFViewerTsgcHTMLComponent_PDFViewerVisionneuse PDF intégrée à la page, basée sur pdf.js, avec navigation entre pages, zoom, recherche, téléchargement et impression.
TsgcHTMLComponent_ChipTsgcHTMLComponent_ChipPuce / étiquette compacte avec une icône optionnelle, une couleur et un bouton de fermeture amovible.
Boîtes de dialogue, surfaces d'état et états de chargement.
TsgcHTMLComponent_ModalTsgcHTMLComponent_ModalBoîte de dialogue modale avec titre / corps / pied de page, tailles, centrée et arrière-plan statique.
TsgcHTMLComponent_OffcanvasTsgcHTMLComponent_OffcanvasPanneau coulissant hors-canevas depuis la gauche, la droite, le haut ou le bas.
TsgcHTMLComponent_PopoverTsgcHTMLComponent_PopoverBulle popover sur un élément déclencheur (clic / survol / focus).
TsgcHTMLComponent_ToastTsgcHTMLComponent_ToastNotification toast avec en-tête, corps, horodatage et masquage automatique.
TsgcHTMLComponent_SnackbarTsgcHTMLComponent_SnackbarSnackbar transitoire de style Material avec une action optionnelle.
TsgcHTMLComponent_NotificationTsgcHTMLComponent_NotificationCentre de notifications déroulant à icône cloche avec un badge de non-lus.
TsgcHTMLComponent_SpinnerTsgcHTMLComponent_SpinnerIndicateur de chargement (bordure / croissance), dimensionné et coloré.
TsgcHTMLComponent_PlaceholderTsgcHTMLComponent_PlaceholderCarte de chargement en squelette / espace réservé avec un effet de scintillement animé.
TsgcHTMLComponent_ContextMenuTsgcHTMLComponent_ContextMenuMenu contextuel (clic droit) limité à un sélecteur CSS, avec icônes, séparateurs, en-têtes et actions routées côté serveur.
TsgcHTMLComponent_JobProgressTsgcHTMLComponent_JobProgressListe en direct de barres de progression de tâches en arrière-plan avec badges d'état, boutons d'annulation et mises à jour de fragments hors-bande.
TsgcHTMLComponent_LogViewerTsgcHTMLComponent_LogViewerVisionneuse de journaux / terminal en streaming avec filtre de niveau, recherche et défilement automatique.
TsgcHTMLComponent_ProgressBarTsgcHTMLComponent_ProgressBarBarre de progression Bootstrap, rayée et animée, à segment unique ou empilée multi-segments.
TsgcHTMLComponent_CommandPaletteTsgcHTMLComponent_CommandPaletteLanceur d'actions rapides Ctrl+K / Cmd+K avec filtrage par sous-chaîne puis flou, catégories et actions routées côté serveur.
TsgcHTMLComponent_EmptyStateTsgcHTMLComponent_EmptyStateLe panneau qu'une grille, une liste ou un résultat de recherche affiche lorsqu'il n'a aucune ligne, avec icône, titre, description et jusqu'à deux boutons.
Interface conversationnelle, des simples bulles à un assistant IA en streaming.
TsgcHTMLComponent_ChatBoxTsgcHTMLComponent_ChatBoxBoîte à bulles de chat de style carte avec une barre de saisie et un indicateur de frappe.
TsgcHTMLComponent_ChatTsgcHTMLComponent_ChatChat de style WhatsApp avec messages texte / image / fichier / audio / vidéo, accusés de lecture et réponses.
TsgcHTMLComponent_AIChatTsgcHTMLComponent_AIChatChat d'assistant IA avec sélecteur de fournisseur / modèle, streaming de jetons et citations de sources RAG.
TsgcHTMLComponent_PresenceTsgcHTMLComponent_PresenceListe « Qui est en ligne » sous forme de pile d'avatars ou de liste, avec mises à jour d'état en direct.
Des flux de connexion prêts à l'emploi, des mots de passe aux passkeys.
TsgcHTMLComponent_LoginTsgcHTMLComponent_LoginFormulaire / page de connexion prêt à l'emploi (carte, centré ou pleine page) avec « se souvenir de moi » et alertes.
TsgcHTMLComponent_SocialLoginTsgcHTMLComponent_SocialLoginPanneau de boutons de connexion sociale OAuth (Google, Facebook, Apple, GitHub, Microsoft et plus).
TsgcHTMLComponent_OAuthCallbackTsgcHTMLComponent_OAuthCallbackPage de rappel / d'atterrissage OAuth en état succès, erreur ou chargement avec redirection automatique.
TsgcHTMLComponent_WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginWidget de connexion et d'enregistrement par passkey / WebAuthn sans mot de passe.
TsgcHTMLComponent_RolesPermissionsTsgcHTMLComponent_RolesPermissionsMatrice de rôles / permissions avec une case à cocher par cellule et des mises à jour d'octroi en direct via WebSocket.
TsgcHTMLComponent_UserManagementTsgcHTMLComponent_UserManagementTableau d'administration des utilisateurs avec rôles, statut, recherche et un menu déroulant d'actions par ligne.
TsgcHTMLComponent_ImpersonateBannerTsgcHTMLComponent_ImpersonateBannerBannière d'usurpation d'identité admin affichée lorsqu'on agit en tant qu'un autre utilisateur, avec une sortie en un clic.
Les pièces non visuelles qui servent les pages et les maintiennent vivantes.
TsgcHTMLEngine_ServerTsgcHTMLEngine_ServerMoteur HTML lié à un TsgcWebSocketHTTPServer qui sert les pages rendues et les ressources intégrées.
TsgcHTMX_Engine_ServerTsgcHTMX_Engine_ServerMoteur htmx câblé au même serveur ; s'accroche aux gestionnaires HTTP et WebSocket, distribue les requêtes et messages entrants, et pousse ou diffuse des fragments HTML vers les navigateurs connectés en temps réel.
TsgcHTMLPageBuilderTsgcHTMLPageBuilderAssemble les composants enregistrés en une page responsive complète (avec un éditeur visuel à la conception).
TsgcHTMLThemeControllerTsgcHTMLThemeControllerSélecteur de thème à l'exécution dont la propriété Theme (ptDefault, ptDark, ptDarkPro) applique le thème sélectionné et la feuille de style partagée à la page.
TsgcHTMLThemeBuilderTsgcHTMLThemeBuilderGénérateur CSS dont le Mode (tmLight, tmDark, tmSystem) écrit les variables CSS de Bootstrap à partir des valeurs de propriétés, avec un script optionnel de synchronisation sur la préférence du système d'exploitation pour tmSystem.
TsgcHTMX_FragmentTsgcHTMX_FragmentFragment htmx hors-bande pour envoyer une mise à jour de page partielle du serveur vers le navigateur.
TsgcHTMX_RouterTsgcHTMX_RouterTable de routage de Routes qui fait correspondre un chemin de requête entrant et le distribue (via HandleRequest) au gestionnaire OnRoute de cette route.
Les composants de cette page ne sont pas des maquettes. Chacun tourne en ce moment dans ces applications Delphi.
Séries Chart.js, jauge SVG, sparkline et treemap, tous générés depuis Pascal.
Ouvrir la démo en ligne →
Un tableau de planification sur plusieurs jours avec dépendances, dessiné côté serveur.
Ouvrir la démo en ligne →
Tuiles de catégories, panier en direct, promotions et affichage client.
Ouvrir la démo en ligne →