Wykresy, wskaźniki i mapy drzewa
Serie Chart.js, wskaźnik SVG, wykres iskrowy i mapa drzewa, wszystko generowane z Pascala.
Otwórz demo na żywo →
Przeglądaj wszystkie 93 komponentów UI sgcHTML w jednym miejscu, pogrupowanych w dziewięć rodzin. Każdy komponent renderuje się do znaczników Bootstrap 5 i działa tak samo w Delphi, C++ Builder i .NET, z tą samą nazwą klasy Tsgc* w każdym z nich. 28 z 93 komponentów jest powiązanych z danymi (data-aware) i wiąże się bezpośrednio z TDataSet / DataSource (lub równoważnym źródłem w .NET); te są oznaczone plakietką Obsługa danych. Kliknij dowolną kartę, aby otworzyć jej stronę komponentu, lub otwórz dokumentację.
Każdy komponent poniżej jest dostarczany jako uruchamialny przykład. Projekt 08.Components w zestawie demonstracyjnym 60.HTML renderuje cały ten katalog jako działającą na żywo, klikalną galerię, którą możesz obsługiwać w przeglądarce. Jest dołączony do bezpłatnej wersji próbnej, więc możesz uruchomić całą galerię lokalnie na własnych danych.
Wersja próbna zawiera projekty demonstracyjne 60.HTML (w tym 08.Components). Hostowana, zawsze dostępna wersja interaktywnej galerii to osobne wdrożenie.
Przejdź od razu do rodziny lub przewiń cały katalog poniżej.
14 komponentów
11 komponentów
10 komponentów
23 komponentów
10 komponentów
14 komponentów
4 komponenty
7 komponentów
7 klas
Siatki, kalendarze i tablice renderujące Twoje zestawy danych bezpośrednio.
TsgcHTMLComponent_GridTsgcHTMLComponent_GridRozbudowana tabela: sortowanie, filtrowanie, eksport CSV/PDF, edycja w miejscu, grupowanie, wirtualne przewijanie i zapytania AI.
TsgcHTMLComponent_DataTableTsgcHTMLComponent_DataTableTabela danych wyższego poziomu opakowująca Grid + Pagination z paskiem narzędzi, wyszukiwaniem i licznikiem wierszy.
TsgcHTMLComponent_CalendarTsgcHTMLComponent_CalendarKalendarz w układzie miesięcznym z kropkami wydarzeń i nawigacją poprzedni/następny.
TsgcHTMLComponent_SchedulerTsgcHTMLComponent_SchedulerHarmonogram kalendarza (widoki miesiąc / tydzień) renderujący wydarzenia według daty.
TsgcHTMLComponent_TimelineTsgcHTMLComponent_TimelinePionowa oś czasu datowanych wydarzeń, ładowalna z zestawu danych.
TsgcHTMLComponent_KanbanBoardTsgcHTMLComponent_KanbanBoardTablica Kanban z kolumnami i przeciąganymi kartami.
TsgcHTMLComponent_GanttTsgcHTMLComponent_GanttWykres Gantta osi czasu projektu z paskami postępu zadań.
TsgcHTMLComponent_TreeGridTsgcHTMLComponent_TreeGridTabela Bootstrap ze zwijanymi, hierarchicznymi wierszami zbudowanymi z par węzłów Id/ParentId.
TsgcHTMLComponent_PivotTableTsgcHTMLComponent_PivotTableTabela przestawna Bootstrap grupująca wiersze i kolumny oraz agregująca miary z sumami wierszy, kolumn i sumą całkowitą.
TsgcHTMLComponent_ActivityFeedTsgcHTMLComponent_ActivityFeedAktualizowany na żywo strumień aktywności (od najnowszych) ze znacznikami czasu względnego i wypychaniem danych WebSocket poza pasmem (out-of-band).
TsgcHTMLComponent_AuditTrailTsgcHTMLComponent_AuditTrailChronologiczny strumień dziennika audytu działań użytkownika i systemu z podmiotem, akcją, celem i znacznikiem czasu.
Wizualizacje sterowane danymi, zbudowane z Twoich własnych liczb.
TsgcHTMLComponent_ChartTsgcHTMLComponent_ChartWykres Chart.js: liniowy, słupkowy, kołowy, pierścieniowy, radarowy, polarny, bąbelkowy i punktowy.
TsgcHTMLComponent_GaugeTsgcHTMLComponent_GaugePółkolisty wskaźnik SVG z progami kolorów niski / średni / wysoki.
TsgcHTMLComponent_DiagramTsgcHTMLComponent_DiagramDiagram przepływu z węzłami i strzałkami renderowany jako wbudowany SVG.
TsgcHTMLComponent_MapTsgcHTMLComponent_MapInteraktywna mapa Leaflet.js (kafelki OpenStreetMap / CartoDB) ze znacznikami.
TsgcHTMLComponent_HeatmapTsgcHTMLComponent_HeatmapSiatka mapy cieplnej SVG skalowana kolorem na podstawie wartości komórek lub powiązanego zestawu danych, z legendą i etykietami wierszy/kolumn.
TsgcHTMLComponent_SparklineTsgcHTMLComponent_SparklineKompaktowy wykres iskrowy (sparkline) SVG liniowy, słupkowy lub obszarowy z serii wartości lub powiązanego zestawu danych.
TsgcHTMLComponent_CandlestickChartTsgcHTMLComponent_CandlestickChartWykres świecowy OHLC SVG z knotami, kolorami wzrostu/spadku i opcjonalnym paskiem wolumenu.
TsgcHTMLComponent_QRCodeTsgcHTMLComponent_QRCodeKod QR SVG ISO/IEC 18004 w czystym Pascalu z dowolnego tekstu lub adresu URL, z wybieralnym poziomem korekcji błędów.
TsgcHTMLComponent_BarcodeTsgcHTMLComponent_BarcodeKod kreskowy Code 128 SVG w czystym Pascalu z dowolnego tekstu ASCII, z opcjonalnym czytelnym dla człowieka podpisem.
TsgcHTMLComponent_TreeMapTsgcHTMLComponent_TreeMapMapa drzewa (treemap) typu squarified renderowana jako samodzielny, generowany po stronie serwera inline SVG, bez potrzeby biblioteki wykresów.
Wszystko, czego potrzebujesz do zbierania danych, z walidacją i wiązaniem z zestawem danych.
TsgcHTMLComponent_FormTsgcHTMLComponent_FormKreator formularzy sterowany danymi z walidacją, układami i generowaniem formularzy przez AI.
TsgcHTMLComponent_EditTsgcHTMLComponent_EditJednowierszowe pole tekstowe z etykietą, tekstem pomocy i wiązaniem z zestawem danych.
TsgcHTMLComponent_MemoTsgcHTMLComponent_MemoWielowierszowe pole tekstowe z etykietą i tekstem pomocy.
TsgcHTMLComponent_CheckBoxTsgcHTMLComponent_CheckBoxPole wyboru z etykietą i stanem zaznaczenia.
TsgcHTMLComponent_RadioGroupTsgcHTMLComponent_RadioGroupGrupa wzajemnie wykluczających się opcji radiowych.
TsgcHTMLComponent_SelectTsgcHTMLComponent_SelectLista rozwijana z grupami opcji, wyborem wielokrotnym i wiązaniem z zestawem danych.
TsgcHTMLComponent_InputGroupTsgcHTMLComponent_InputGroupPole z dodatkiem tekstowym z przodu / na końcu.
TsgcHTMLComponent_AutoCompleteTsgcHTMLComponent_AutoCompletePole tekstowe oparte na liście datalist HTML5 z sugestiami.
TsgcHTMLComponent_DatePickerTsgcHTMLComponent_DatePickerNatywne pole wprowadzania daty / godziny / daty i godziny.
TsgcHTMLComponent_FileUploadTsgcHTMLComponent_FileUploadStrefa przesyłania plików metodą przeciągnij i upuść z wysyłką formularza multipart.
TsgcHTMLComponent_RichEditorTsgcHTMLComponent_RichEditorEdytor tekstu sformatowanego WYSIWYG oparty na Quill z ukrytym polem formularza.
TsgcHTMLComponent_RatingTsgcHTMLComponent_RatingWyświetlanie lub wprowadzanie oceny w postaci gwiazdek (symboli).
TsgcHTMLComponent_MultiSelectTsgcHTMLComponent_MultiSelectPrzeszukiwalna lista rozwijana Bootstrap z wielokrotnym wyborem, plakietkami (chips), grupowanymi opcjami i wiązaniem z zestawem danych.
TsgcHTMLComponent_ColorPickerTsgcHTMLComponent_ColorPickerNatywne pole wyboru koloru HTML5 z opcjonalnym polem tekstowym hex i gotowymi próbkami kolorów.
TsgcHTMLComponent_SliderTsgcHTMLComponent_SliderSuwak zakresu Bootstrap z plakietką wartości na żywo, etykietami min/maks i kolorystyką.
TsgcHTMLComponent_TimePickerTsgcHTMLComponent_TimePickerNatywne pole wyboru godziny HTML5 z granicami min/maks i dokładnością co do sekundy.
TsgcHTMLComponent_SignaturePadTsgcHTMLComponent_SignaturePadPole podpisu na canvasie oparte na zdarzeniach wskaźnika, z akcjami Wyczyść, Cofnij i Zapisz.
TsgcHTMLComponent_TransferTsgcHTMLComponent_TransferWidżet dwóch list do przenoszenia elementów między panelem dostępnych i przypisanych, z filtrowaniem i wiązaniem z zestawem danych.
TsgcHTMLComponent_DateTimePickerTsgcHTMLComponent_DateTimePickerNatywne pole wyboru daty i godziny HTML5 łączące kalendarz i zegar w jednym polu.
TsgcHTMLComponent_DateRangePickerTsgcHTMLComponent_DateRangePickerSparowane pola daty początkowej i końcowej do wyboru zakresu dat, z granicami min/maks.
TsgcHTMLComponent_RangeSliderTsgcHTMLComponent_RangeSliderSuwak z dwoma uchwytami wybierający parę wartości dolna/górna, z plakietkami wartości na żywo.
TsgcHTMLComponent_CameraScannerTsgcHTMLComponent_CameraScannerPanel kamery na żywo skanujący kody kreskowe i kody QR natywnym BarcodeDetector przeglądarki, bez bibliotek firm trzecich.
TsgcHTMLComponent_NumPadTsgcHTMLComponent_NumPadDotykowa klawiatura numeryczna i walutowa do wprowadzania danych w punkcie sprzedaży, z przyciskami szybkich kwot i formatowaniem niezależnym od ustawień regionalnych.
Karty, multimedia i kafelki KPI do rozplanowania strony.
TsgcHTMLComponent_PanelTsgcHTMLComponent_PanelKarta panelu Bootstrap z nagłówkiem / treścią / stopką, zwijana i przewijalna.
TsgcHTMLComponent_StatCardTsgcHTMLComponent_StatCardKarta KPI / statystyki dla pulpitu z ikoną, strzałką trendu i opcjonalnym gradientem.
TsgcHTMLComponent_AccordionTsgcHTMLComponent_AccordionPionowo zwijana harmonijka ułożonych w stos rozwijanych paneli.
TsgcHTMLComponent_CarouselTsgcHTMLComponent_CarouselPokaz slajdów / karuzela obrazów ze wskaźnikami, sterowaniem i autoodtwarzaniem.
TsgcHTMLComponent_ImageTsgcHTMLComponent_ImageObraz z kształtem, responsywnością / leniwym ładowaniem, linkiem lightbox i podpisem.
TsgcHTMLComponent_AvatarTsgcHTMLComponent_AvatarAwatar użytkownika (obraz lub inicjały) z rozmiarem, kształtem i kropką statusu obecności.
TsgcHTMLComponent_VideoTsgcHTMLComponent_VideoOdtwarzacz wideo / audio HTML5 wraz z pomocnikiem do osadzania YouTube.
TsgcHTMLComponent_BadgeTsgcHTMLComponent_BadgePojedyncza plakietka Bootstrap z kolorem, kształtem pigułki, ikoną w linii i trybem pozycjonowanej kropki powiadomienia.
TsgcHTMLComponent_PDFViewerTsgcHTMLComponent_PDFViewerWbudowana przeglądarka PDF oparta na pdf.js, z nawigacją po stronach, powiększeniem, wyszukiwaniem, pobieraniem i drukowaniem.
TsgcHTMLComponent_ChipTsgcHTMLComponent_ChipKompaktowy element chip / tag z opcjonalną ikoną, kolorem i przyciskiem zamknięcia do usunięcia.
Okna dialogowe, powierzchnie statusu i stany ładowania.
TsgcHTMLComponent_ModalTsgcHTMLComponent_ModalModalne okno dialogowe z tytułem / treścią / stopką, rozmiarami, wyśrodkowane i ze statycznym tłem.
TsgcHTMLComponent_OffcanvasTsgcHTMLComponent_OffcanvasWysuwany panel off-canvas z lewej, prawej, góry lub dołu.
TsgcHTMLComponent_PopoverTsgcHTMLComponent_PopoverDymek popover na elemencie wyzwalającym (kliknięcie / najechanie / fokus).
TsgcHTMLComponent_ToastTsgcHTMLComponent_ToastPowiadomienie toast z nagłówkiem, treścią, znacznikiem czasu i automatycznym ukrywaniem.
TsgcHTMLComponent_SnackbarTsgcHTMLComponent_SnackbarPrzejściowy snackbar w stylu Material z opcjonalną akcją.
TsgcHTMLComponent_NotificationTsgcHTMLComponent_NotificationCentrum powiadomień w postaci rozwijanego dzwonka z plakietką nieprzeczytanych.
TsgcHTMLComponent_SpinnerTsgcHTMLComponent_SpinnerWskaźnik ładowania (border / grow), z rozmiarem i kolorem.
TsgcHTMLComponent_PlaceholderTsgcHTMLComponent_PlaceholderKarta ładowania typu szkielet / placeholder z animowanym połyskiem.
TsgcHTMLComponent_ContextMenuTsgcHTMLComponent_ContextMenuMenu rozwijane po kliknięciu prawym przyciskiem myszy, ograniczone do selektora CSS, z ikonami, separatorami, nagłówkami i akcjami kierowanymi po stronie serwera.
TsgcHTMLComponent_JobProgressTsgcHTMLComponent_JobProgressAktualizowana na żywo lista pasków postępu zadań w tle z plakietkami statusu, przyciskami anulowania i aktualizacjami fragmentów poza pasmem (out-of-band).
TsgcHTMLComponent_LogViewerTsgcHTMLComponent_LogViewerStrumieniowa przeglądarka logów / terminala z filtrem poziomu, wyszukiwaniem i automatycznym przewijaniem.
TsgcHTMLComponent_ProgressBarTsgcHTMLComponent_ProgressBarPasek postępu Bootstrap, w paski i animowany, pojedynczy lub wieloczęściowy skumulowany.
TsgcHTMLComponent_CommandPaletteTsgcHTMLComponent_CommandPaletteLauncher szybkich akcji Ctrl+K / Cmd+K z filtrowaniem najpierw po podciągu, a potem rozmytym, kategoriami i akcjami kierowanymi po stronie serwera.
TsgcHTMLComponent_EmptyStateTsgcHTMLComponent_EmptyStatePanel wyświetlany przez siatkę, listę lub wynik wyszukiwania, gdy nie ma żadnych wierszy, z ikoną, tytułem, opisem i do dwóch przycisków.
Interfejs konwersacyjny, od prostych dymków po strumieniujący asystent AI.
TsgcHTMLComponent_ChatBoxTsgcHTMLComponent_ChatBoxOkno czatu w stylu karty z dymkami, paskiem wprowadzania i wskaźnikiem pisania.
TsgcHTMLComponent_ChatTsgcHTMLComponent_ChatCzat w stylu WhatsApp z wiadomościami tekst / obraz / plik / audio / wideo, potwierdzeniami odczytu i odpowiedziami.
TsgcHTMLComponent_AIChatTsgcHTMLComponent_AIChatCzat z asystentem AI z wyborem dostawcy / modelu, strumieniowaniem tokenów i cytowaniem źródeł RAG.
TsgcHTMLComponent_PresenceTsgcHTMLComponent_PresenceLista "kto jest online" w formie stosu awatarów lub listy, z aktualizacjami statusu na żywo.
Gotowe procesy logowania, od haseł po klucze passkey.
TsgcHTMLComponent_LoginTsgcHTMLComponent_LoginGotowy formularz / strona logowania (karta, wyśrodkowana lub pełnoekranowa) z opcją zapamiętania mnie i alertami.
TsgcHTMLComponent_SocialLoginTsgcHTMLComponent_SocialLoginPanel przycisków logowania społecznościowego OAuth (Google, Facebook, Apple, GitHub, Microsoft i więcej).
TsgcHTMLComponent_OAuthCallbackTsgcHTMLComponent_OAuthCallbackStrona zwrotna / docelowa OAuth w stanie sukcesu, błędu lub ładowania z automatycznym przekierowaniem.
TsgcHTMLComponent_WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginWidżet logowania i rejestracji bez hasła przy użyciu klucza passkey / WebAuthn.
TsgcHTMLComponent_RolesPermissionsTsgcHTMLComponent_RolesPermissionsMatryca ról / uprawnień z polem wyboru dla każdej komórki i aktualizacjami nadań na żywo przez WebSocket.
TsgcHTMLComponent_UserManagementTsgcHTMLComponent_UserManagementTabela administracji użytkownikami z rolami, statusem, wyszukiwaniem i rozwijanym menu akcji dla każdego wiersza.
TsgcHTMLComponent_ImpersonateBannerTsgcHTMLComponent_ImpersonateBannerBaner personifikacji administratora wyświetlany podczas działania jako inny użytkownik, z wyjściem jednym kliknięciem.
Niewizualne elementy, które obsługują strony i utrzymują je na żywo.
TsgcHTMLEngine_ServerTsgcHTMLEngine_ServerSilnik HTML powiązany z TsgcWebSocketHTTPServer, który obsługuje wyrenderowane strony i wbudowane zasoby.
TsgcHTMX_Engine_ServerTsgcHTMX_Engine_ServerSilnik htmx podłączony do tego samego serwera; podłącza się pod procedury obsługi HTTP i WebSocket, rozdziela przychodzące żądania i wiadomości oraz wypycha lub rozgłasza fragmenty HTML do podłączonych przeglądarek w czasie rzeczywistym.
TsgcHTMLPageBuilderTsgcHTMLPageBuilderSkłada zarejestrowane komponenty w kompletną responsywną stronę, z wizualnym edytorem działającym w czasie projektowania.
TsgcHTMLThemeControllerTsgcHTMLThemeControllerPrzełącznik motywu w czasie działania, którego właściwość Theme (ptDefault, ptDark, ptDarkPro) stosuje wybrany motyw i wspólny arkusz stylów do strony.
TsgcHTMLThemeBuilderTsgcHTMLThemeBuilderGenerator CSS, którego Mode (tmLight, tmDark, tmSystem) zapisuje zmienne CSS Bootstrap na podstawie wartości właściwości, z opcjonalnym skryptem synchronizacji z preferencją systemu operacyjnego dla tmSystem.
TsgcHTMX_FragmentTsgcHTMX_FragmentFragment htmx out-of-band do wypychania częściowej aktualizacji strony z serwera do przeglądarki.
TsgcHTMX_RouterTsgcHTMX_RouterTabela routingu Routes, która dopasowuje ścieżkę przychodzącego żądania i przekazuje je (przez HandleRequest) do procedury obsługi OnRoute danej trasy.
Komponenty na tej stronie to nie makiety. Każdy z nich działa właśnie teraz wewnątrz tych aplikacji Delphi.
Serie Chart.js, wskaźnik SVG, wykres iskrowy i mapa drzewa, wszystko generowane z Pascala.
Otwórz demo na żywo →
Wielodniowa tablica planowania z zależnościami, rysowana po stronie serwera.
Otwórz demo na żywo →
Kafelki kategorii, koszyk na żywo, promocje i wyświetlacz dla klienta.
Otwórz demo na żywo →