Matryca funkcji sgcHTML — wszystkie komponenty | eSeGeCe

sgcHTML Matryca funkcji

Każdy komponent w bibliotece, pogrupowany w dziewięć rodzin. Każdy z nich renderuje się do znaczników Bootstrap 5 i działa tak samo w Delphi, C++ Builder i .NET. Większość z nich jest powiązana z danymi (data-aware) i wiąże się bezpośrednio z TDataSet przez LoadFromDataSet / DataSource (lub równoważne źródło w .NET). Kliknij komponent, aby przejść do jego strony z opisem zastosowania i przykładami. Wszystkie komponenty stosują automatyczne kodowanie wyjścia HTML, atrybutów, JavaScript i adresów URL oraz oczyszczanie adresów URL, dzięki czemu dynamiczna treść jest domyślnie ekranowana, aby chronić przed XSS i wstrzyknięciami.

Nawigacja i struktura

14 komponentów

Dane i tabele

11 komponentów

Wykresy i wizualizacja

10 komponentów

Formularze i pola

21 komponentów

Treść i układ

10 komponentów

Nakładki i komunikaty

12 komponentów

Czat i AI

4 komponenty

Uwierzytelnianie

7 komponentów

Dane i tabele

Siatki, kalendarze i tablice renderujące Twoje zestawy danych bezpośrednio.

KomponentKlasaOpisPomoc
GridTsgcHTMLComponent_GridRozbudowana tabela: sortowanie, filtrowanie, eksport CSV/PDF, edycja w miejscu, grupowanie, wirtualne przewijanie i zapytania AI.Docs
DataTableTsgcHTMLComponent_DataTableTabela danych wyższego poziomu opakowująca Grid + Pagination z paskiem narzędzi, wyszukiwaniem i licznikiem wierszy.Docs
CalendarTsgcHTMLComponent_CalendarKalendarz w układzie miesięcznym z kropkami wydarzeń i nawigacją poprzedni/następny.Docs
SchedulerTsgcHTMLComponent_SchedulerHarmonogram kalendarza (widoki miesiąc / tydzień) renderujący wydarzenia według daty.Docs
TimelineTsgcHTMLComponent_TimelinePionowa oś czasu datowanych wydarzeń, ładowalna z zestawu danych.Docs
KanbanBoardTsgcHTMLComponent_KanbanBoardTablica Kanban z kolumnami i przeciąganymi kartami.Docs
GanttTsgcHTMLComponent_GanttWykres Gantta osi czasu projektu z paskami postępu zadań.Docs
TreeGridTsgcHTMLComponent_TreeGridTabela Bootstrap ze zwijanymi, hierarchicznymi wierszami zbudowanymi z par węzłów Id/ParentId.Docs
PivotTableTsgcHTMLComponent_PivotTableTabela przestawna Bootstrap grupująca wiersze i kolumny oraz agregująca miary z sumami wierszy, kolumn i sumą całkowitą.Docs
ActivityFeedTsgcHTMLComponent_ActivityFeedAktualizowany na żywo strumień aktywności (od najnowszych) ze znacznikami czasu względnego i wypychaniem danych WebSocket poza pasmem (out-of-band).Docs
AuditTrailTsgcHTMLComponent_AuditTrailChronologiczny strumień dziennika audytu działań użytkownika i systemu z podmiotem, akcją, celem i znacznikiem czasu.Docs

Wykresy i wizualizacja

Wizualizacje sterowane danymi, zbudowane z Twoich własnych liczb.

KomponentKlasaOpisPomoc
ChartTsgcHTMLComponent_ChartWykres Chart.js: liniowy, słupkowy, kołowy, pierścieniowy, radarowy, polarny, bąbelkowy i punktowy.Docs
GaugeTsgcHTMLComponent_GaugePółkolisty wskaźnik SVG z progami kolorów niski / średni / wysoki.Docs
DiagramTsgcHTMLComponent_DiagramDiagram przepływu z węzłami i strzałkami renderowany jako wbudowany SVG.Docs
MapTsgcHTMLComponent_MapInteraktywna mapa Leaflet.js (kafelki OpenStreetMap / CartoDB) ze znacznikami.Docs
HeatmapTsgcHTMLComponent_HeatmapSiatka mapy cieplnej SVG skalowana kolorem na podstawie wartości komórek lub powiązanego zestawu danych, z legendą i etykietami wierszy/kolumn.Docs
SparklineTsgcHTMLComponent_SparklineKompaktowy wykres iskrowy (sparkline) SVG liniowy, słupkowy lub obszarowy z serii wartości lub powiązanego zestawu danych.Docs
CandlestickChartTsgcHTMLComponent_CandlestickChartWykres świecowy OHLC SVG z knotami, kolorami wzrostu/spadku i opcjonalnym paskiem wolumenu.Docs
QRCodeTsgcHTMLComponent_QRCodeKod QR SVG ISO/IEC 18004 w czystym Pascalu z dowolnego tekstu lub adresu URL, z wybieralnym poziomem korekcji błędów.Docs
BarcodeTsgcHTMLComponent_BarcodeKod kreskowy Code 128 SVG w czystym Pascalu z dowolnego tekstu ASCII, z opcjonalnym czytelnym dla człowieka podpisem.Docs
TreeMapTsgcHTMLComponent_TreeMapMapa drzewa (treemap) typu squarified renderowana jako samodzielny, generowany po stronie serwera inline SVG, bez potrzeby biblioteki wykresów.Docs

Formularze i pola

Wszystko, czego potrzebujesz do zbierania danych, z walidacją i wiązaniem z zestawem danych.

KomponentKlasaOpisPomoc
FormTsgcHTMLComponent_FormKreator formularzy sterowany danymi z walidacją, układami i generowaniem formularzy przez AI.Docs
EditTsgcHTMLComponent_EditJednowierszowe pole tekstowe z etykietą, tekstem pomocy i wiązaniem z zestawem danych.Docs
MemoTsgcHTMLComponent_MemoWielowierszowe pole tekstowe z etykietą i tekstem pomocy.Docs
CheckBoxTsgcHTMLComponent_CheckBoxPole wyboru z etykietą i stanem zaznaczenia.Docs
RadioGroupTsgcHTMLComponent_RadioGroupGrupa wzajemnie wykluczających się opcji radiowych.Docs
SelectTsgcHTMLComponent_SelectLista rozwijana z grupami opcji, wyborem wielokrotnym i wiązaniem z zestawem danych.Docs
InputGroupTsgcHTMLComponent_InputGroupPole z dodatkiem tekstowym z przodu / na końcu.Docs
AutoCompleteTsgcHTMLComponent_AutoCompletePole tekstowe oparte na liście datalist HTML5 z sugestiami.Docs
DatePickerTsgcHTMLComponent_DatePickerNatywne pole wprowadzania daty / godziny / daty i godziny.Docs
FileUploadTsgcHTMLComponent_FileUploadStrefa przesyłania plików metodą przeciągnij i upuść z wysyłką formularza multipart.Docs
RichEditorTsgcHTMLComponent_RichEditorEdytor tekstu sformatowanego WYSIWYG oparty na Quill z ukrytym polem formularza.Docs
RatingTsgcHTMLComponent_RatingWyświetlanie lub wprowadzanie oceny w postaci gwiazdek (symboli).Docs
MultiSelectTsgcHTMLComponent_MultiSelectPrzeszukiwalna lista rozwijana Bootstrap z wielokrotnym wyborem, plakietkami (chips), grupowanymi opcjami i wiązaniem z zestawem danych.Docs
ColorPickerTsgcHTMLComponent_ColorPickerNatywne pole wyboru koloru HTML5 z opcjonalnym polem tekstowym hex i gotowymi próbkami kolorów.Docs
SliderTsgcHTMLComponent_SliderSuwak zakresu Bootstrap z plakietką wartości na żywo, etykietami min/maks i kolorystyką.Docs
TimePickerTsgcHTMLComponent_TimePickerNatywne pole wyboru godziny HTML5 z granicami min/maks i dokładnością co do sekundy.Docs
SignaturePadTsgcHTMLComponent_SignaturePadPole podpisu na canvasie oparte na zdarzeniach wskaźnika, z akcjami Wyczyść, Cofnij i Zapisz.Docs
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.Docs
DateTimePickerTsgcHTMLComponent_DateTimePickerNatywne pole wyboru daty i godziny HTML5 łączące kalendarz i zegar w jednym polu.Docs
DateRangePickerTsgcHTMLComponent_DateRangePickerSparowane pola daty początkowej i końcowej do wyboru zakresu dat, z granicami min/maks.Docs
RangeSliderTsgcHTMLComponent_RangeSliderSuwak z dwoma uchwytami wybierający parę wartości dolna/górna, z plakietkami wartości na żywo.Docs

Treść i układ

Karty, multimedia i kafelki KPI do rozplanowania strony.

KomponentKlasaOpisPomoc
PanelTsgcHTMLComponent_PanelKarta panelu Bootstrap z nagłówkiem / treścią / stopką, zwijana i przewijalna.Docs
StatCardTsgcHTMLComponent_StatCardKarta KPI / statystyki dla pulpitu z ikoną, strzałką trendu i opcjonalnym gradientem.Docs
AccordionTsgcHTMLComponent_AccordionPionowo zwijana harmonijka ułożonych w stos rozwijanych paneli.Docs
CarouselTsgcHTMLComponent_CarouselPokaz slajdów / karuzela obrazów ze wskaźnikami, sterowaniem i autoodtwarzaniem.Docs
ImageTsgcHTMLComponent_ImageObraz z kształtem, responsywnością / leniwym ładowaniem, linkiem lightbox i podpisem.Docs
AvatarTsgcHTMLComponent_AvatarAwatar użytkownika (obraz lub inicjały) z rozmiarem, kształtem i kropką statusu obecności.Docs
VideoTsgcHTMLComponent_VideoOdtwarzacz wideo / audio HTML5 wraz z pomocnikiem do osadzania YouTube.Docs
BadgeTsgcHTMLComponent_BadgePojedyncza plakietka Bootstrap z kolorem, kształtem pigułki, ikoną w linii i trybem pozycjonowanej kropki powiadomienia.Docs
PDFViewerTsgcHTMLComponent_PDFViewerWbudowana przeglądarka PDF oparta na pdf.js, z nawigacją po stronach, powiększeniem, wyszukiwaniem, pobieraniem i drukowaniem.Docs
ChipTsgcHTMLComponent_ChipKompaktowy element chip / tag z opcjonalną ikoną, kolorem i przyciskiem zamknięcia do usunięcia.Docs

Nakładki i komunikaty

Okna dialogowe, powierzchnie statusu i stany ładowania.

KomponentKlasaOpisPomoc
ModalTsgcHTMLComponent_ModalModalne okno dialogowe z tytułem / treścią / stopką, rozmiarami, wyśrodkowane i ze statycznym tłem.Docs
OffcanvasTsgcHTMLComponent_OffcanvasWysuwany panel off-canvas z lewej, prawej, góry lub dołu.Docs
PopoverTsgcHTMLComponent_PopoverDymek popover na elemencie wyzwalającym (kliknięcie / najechanie / fokus).Docs
ToastTsgcHTMLComponent_ToastPowiadomienie toast z nagłówkiem, treścią, znacznikiem czasu i automatycznym ukrywaniem.Docs
SnackbarTsgcHTMLComponent_SnackbarPrzejściowy snackbar w stylu Material z opcjonalną akcją.Docs
NotificationTsgcHTMLComponent_NotificationCentrum powiadomień w postaci rozwijanego dzwonka z plakietką nieprzeczytanych.Docs
SpinnerTsgcHTMLComponent_SpinnerWskaźnik ładowania (border / grow), z rozmiarem i kolorem.Docs
PlaceholderTsgcHTMLComponent_PlaceholderKarta ładowania typu szkielet / placeholder z animowanym połyskiem.Docs
ContextMenuTsgcHTMLComponent_ContextMenuMenu rozwijane po kliknięciu prawym przyciskiem myszy, ograniczone do selektora CSS, z ikonami, separatorami, nagłówkami i akcjami kierowanymi po stronie serwera.Docs
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).Docs
LogViewerTsgcHTMLComponent_LogViewerStrumieniowa przeglądarka logów / terminala z filtrem poziomu, wyszukiwaniem i automatycznym przewijaniem.Docs
ProgressBarTsgcHTMLComponent_ProgressBarPasek postępu Bootstrap, w paski i animowany, pojedynczy lub wieloczęściowy skumulowany.Docs

Czat i AI

Interfejs konwersacyjny, od prostych dymków po strumieniujący asystent AI.

KomponentKlasaOpisPomoc
ChatBoxTsgcHTMLComponent_ChatBoxOkno czatu w stylu karty z dymkami, paskiem wprowadzania i wskaźnikiem pisania.Docs
ChatTsgcHTMLComponent_ChatCzat w stylu WhatsApp z wiadomościami tekst / obraz / plik / audio / wideo, potwierdzeniami odczytu i odpowiedziami.Docs
AIChatTsgcHTMLComponent_AIChatCzat z asystentem AI z wyborem dostawcy / modelu, strumieniowaniem tokenów i cytowaniem źródeł RAG.Docs
PresenceTsgcHTMLComponent_PresenceLista "kto jest online" w formie stosu awatarów lub listy, z aktualizacjami statusu na żywo.Docs

Uwierzytelnianie

Gotowe procesy logowania, od haseł po klucze passkey.

KomponentKlasaOpisPomoc
LoginTsgcHTMLComponent_LoginGotowy formularz / strona logowania (karta, wyśrodkowana lub pełnoekranowa) z opcją zapamiętania mnie i alertami.Docs
SocialLoginTsgcHTMLComponent_SocialLoginPanel przycisków logowania społecznościowego OAuth (Google, Facebook, Apple, GitHub, Microsoft i więcej).Docs
OAuthCallbackTsgcHTMLComponent_OAuthCallbackStrona zwrotna / docelowa OAuth w stanie sukcesu, błędu lub ładowania z automatycznym przekierowaniem.Docs
WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginWidżet logowania i rejestracji bez hasła przy użyciu klucza passkey / WebAuthn.Docs
RolesPermissionsTsgcHTMLComponent_RolesPermissionsMatryca ról / uprawnień z polem wyboru dla każdej komórki i aktualizacjami nadań na żywo przez WebSocket.Docs
UserManagementTsgcHTMLComponent_UserManagementTabela administracji użytkownikami z rolami, statusem, wyszukiwaniem i rozwijanym menu akcji dla każdego wiersza.Docs
ImpersonateBannerTsgcHTMLComponent_ImpersonateBannerBaner personifikacji administratora wyświetlany podczas działania jako inny użytkownik, z wyjściem jednym kliknięciem.Docs

Silnik, serwer i motywy

Niewizualne elementy, które obsługują strony i utrzymują je na żywo.

KomponentKlasaOpisPomoc
EngineServerTsgcHTMLEngine_ServerSilnik HTML powiązany z TsgcWebSocketHTTPServer, który obsługuje wyrenderowane strony i wbudowane zasoby.Docs
HTMXEngineTsgcHTMX_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 (DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment).Docs
PageBuilderTsgcHTMLPageBuilderSkłada zarejestrowane komponenty w kompletną responsywną stronę (z wizualnym edytorem działającym w czasie projektowania).Docs
TemplateBootstrapTsgcHTMLTemplate_BootstrapOpakowuje treść strony w pełny dokument HTML Bootstrap 5 z motywem, językiem i kierunkiem.Docs
ThemeControllerTsgcHTMLThemeControllerPrzełą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.Docs
ThemeBuilderTsgcHTMLThemeBuilderGenerator 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.Docs
HTMXFragmentTsgcHTMX_FragmentFragment htmx out-of-band do wypychania częściowej aktualizacji strony z serwera do przeglądarki.Docs
HTMXRouterTsgcHTMX_RouterTabela routingu Routes, która dopasowuje ścieżkę przychodzącego żądania i przekazuje je (przez HandleRequest) do procedury obsługi OnRoute danej trasy.Docs
Najkorzystniejsza oferta: All-AccessWszystkie produkty eSeGeCe, ze wsparciem Premium w cenie, już od €1,059 rocznie.
Zobacz cennik All-Access

Twórz z sgcHTML

Pobierz bezpłatną wersję próbną i zacznij komponować interfejsy webowe w Delphi, C++ Builder lub .NET.