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. 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.
13 komponentów
7 komponentów
4 komponenty
12 komponentów
7 komponentów
8 komponentów
3 komponenty
4 komponenty
8 klas
Siatki, kalendarze i tablice renderujące Twoje zestawy danych bezpośrednio.
| Komponent | Klasa | Opis | Pomoc |
|---|---|---|---|
| Grid | TsgcHTMLComponent_Grid | Rozbudowana tabela: sortowanie, filtrowanie, eksport CSV/PDF, edycja w miejscu, grupowanie, wirtualne przewijanie i zapytania AI. | Docs |
| DataTable | TsgcHTMLComponent_DataTable | Tabela danych wyższego poziomu opakowująca Grid + Pagination z paskiem narzędzi, wyszukiwaniem i licznikiem wierszy. | Docs |
| Calendar | TsgcHTMLComponent_Calendar | Kalendarz w układzie miesięcznym z kropkami wydarzeń i nawigacją poprzedni/następny. | Docs |
| Scheduler | TsgcHTMLComponent_Scheduler | Harmonogram kalendarza (widoki miesiąc / tydzień) renderujący wydarzenia według daty. | Docs |
| Timeline | TsgcHTMLComponent_Timeline | Pionowa oś czasu datowanych wydarzeń, ładowalna z zestawu danych. | Docs |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | Tablica Kanban z kolumnami i przeciąganymi kartami. | Docs |
| Gantt | TsgcHTMLComponent_Gantt | Wykres Gantta osi czasu projektu z paskami postępu zadań. | Docs |
Wizualizacje sterowane danymi, zbudowane z Twoich własnych liczb.
| Komponent | Klasa | Opis | Pomoc |
|---|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Wykres Chart.js: liniowy, słupkowy, kołowy, pierścieniowy, radarowy, polarny, bąbelkowy i punktowy. | Docs |
| Gauge | TsgcHTMLComponent_Gauge | Półkolisty wskaźnik SVG z progami kolorów niski / średni / wysoki. | Docs |
| Diagram | TsgcHTMLComponent_Diagram | Diagram przepływu z węzłami i strzałkami renderowany jako wbudowany SVG. | Docs |
| Map | TsgcHTMLComponent_Map | Interaktywna mapa Leaflet.js (kafelki OpenStreetMap / CartoDB) ze znacznikami. | Docs |
Wszystko, czego potrzebujesz do zbierania danych, z walidacją i wiązaniem z zestawem danych.
| Komponent | Klasa | Opis | Pomoc |
|---|---|---|---|
| Form | TsgcHTMLComponent_Form | Kreator formularzy sterowany danymi z walidacją, układami i generowaniem formularzy przez AI. | Docs |
| Edit | TsgcHTMLComponent_Edit | Jednowierszowe pole tekstowe z etykietą, tekstem pomocy i wiązaniem z zestawem danych. | Docs |
| Memo | TsgcHTMLComponent_Memo | Wielowierszowe pole tekstowe z etykietą i tekstem pomocy. | Docs |
| CheckBox | TsgcHTMLComponent_CheckBox | Pole wyboru z etykietą i stanem zaznaczenia. | Docs |
| RadioGroup | TsgcHTMLComponent_RadioGroup | Grupa wzajemnie wykluczających się opcji radiowych. | Docs |
| Select | TsgcHTMLComponent_Select | Lista rozwijana z grupami opcji, wyborem wielokrotnym i wiązaniem z zestawem danych. | Docs |
| InputGroup | TsgcHTMLComponent_InputGroup | Pole z dodatkiem tekstowym z przodu / na końcu. | Docs |
| AutoComplete | TsgcHTMLComponent_AutoComplete | Pole tekstowe oparte na liście datalist HTML5 z sugestiami. | Docs |
| DatePicker | TsgcHTMLComponent_DatePicker | Natywne pole wprowadzania daty / godziny / daty i godziny. | Docs |
| FileUpload | TsgcHTMLComponent_FileUpload | Strefa przesyłania plików metodą przeciągnij i upuść z wysyłką formularza multipart. | Docs |
| RichEditor | TsgcHTMLComponent_RichEditor | Edytor tekstu sformatowanego WYSIWYG oparty na Quill z ukrytym polem formularza. | Docs |
| Rating | TsgcHTMLComponent_Rating | Wyświetlanie lub wprowadzanie oceny w postaci gwiazdek (symboli). | Docs |
Karty, multimedia i kafelki KPI do rozplanowania strony.
| Komponent | Klasa | Opis | Pomoc |
|---|---|---|---|
| Panel | TsgcHTMLComponent_Panel | Karta panelu Bootstrap z nagłówkiem / treścią / stopką, zwijana i przewijalna. | Docs |
| StatCard | TsgcHTMLComponent_StatCard | Karta KPI / statystyki dla pulpitu z ikoną, strzałką trendu i opcjonalnym gradientem. | Docs |
| Accordion | TsgcHTMLComponent_Accordion | Pionowo zwijana harmonijka ułożonych w stos rozwijanych paneli. | Docs |
| Carousel | TsgcHTMLComponent_Carousel | Pokaz slajdów / karuzela obrazów ze wskaźnikami, sterowaniem i autoodtwarzaniem. | Docs |
| Image | TsgcHTMLComponent_Image | Obraz z kształtem, responsywnością / leniwym ładowaniem, linkiem lightbox i podpisem. | Docs |
| Avatar | TsgcHTMLComponent_Avatar | Awatar użytkownika (obraz lub inicjały) z rozmiarem, kształtem i kropką statusu obecności. | Docs |
| Video | TsgcHTMLComponent_Video | Odtwarzacz wideo / audio HTML5 wraz z pomocnikiem do osadzania YouTube. | Docs |
Okna dialogowe, powierzchnie statusu i stany ładowania.
| Komponent | Klasa | Opis | Pomoc |
|---|---|---|---|
| Modal | TsgcHTMLComponent_Modal | Modalne okno dialogowe z tytułem / treścią / stopką, rozmiarami, wyśrodkowane i ze statycznym tłem. | Docs |
| Offcanvas | TsgcHTMLComponent_Offcanvas | Wysuwany panel off-canvas z lewej, prawej, góry lub dołu. | Docs |
| Popover | TsgcHTMLComponent_Popover | Dymek popover na elemencie wyzwalającym (kliknięcie / najechanie / fokus). | Docs |
| Toast | TsgcHTMLComponent_Toast | Powiadomienie toast z nagłówkiem, treścią, znacznikiem czasu i automatycznym ukrywaniem. | Docs |
| Snackbar | TsgcHTMLComponent_Snackbar | Przejściowy snackbar w stylu Material z opcjonalną akcją. | Docs |
| Notification | TsgcHTMLComponent_Notification | Centrum powiadomień w postaci rozwijanego dzwonka z plakietką nieprzeczytanych. | Docs |
| Spinner | TsgcHTMLComponent_Spinner | Wskaźnik ładowania (border / grow), z rozmiarem i kolorem. | Docs |
| Placeholder | TsgcHTMLComponent_Placeholder | Karta ładowania typu szkielet / placeholder z animowanym połyskiem. | Docs |
Interfejs konwersacyjny, od prostych dymków po strumieniujący asystent AI.
| Komponent | Klasa | Opis | Pomoc |
|---|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | Okno czatu w stylu karty z dymkami, paskiem wprowadzania i wskaźnikiem pisania. | Docs |
| Chat | TsgcHTMLComponent_Chat | Czat w stylu WhatsApp z wiadomościami tekst / obraz / plik / audio / wideo, potwierdzeniami odczytu i odpowiedziami. | Docs |
| AIChat | TsgcHTMLComponent_AIChat | Czat z asystentem AI z wyborem dostawcy / modelu, strumieniowaniem tokenów i cytowaniem źródeł RAG. | Docs |
Gotowe procesy logowania, od haseł po klucze passkey.
| Komponent | Klasa | Opis | Pomoc |
|---|---|---|---|
| Login | TsgcHTMLComponent_Login | Gotowy formularz / strona logowania (karta, wyśrodkowana lub pełnoekranowa) z opcją zapamiętania mnie i alertami. | Docs |
| SocialLogin | TsgcHTMLComponent_SocialLogin | Panel przycisków logowania społecznościowego OAuth (Google, Facebook, Apple, GitHub, Microsoft i więcej). | Docs |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | Strona zwrotna / docelowa OAuth w stanie sukcesu, błędu lub ładowania z automatycznym przekierowaniem. | Docs |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | Widżet logowania i rejestracji bez hasła przy użyciu klucza passkey / WebAuthn. | Docs |
Niewizualne elementy, które obsługują strony i utrzymują je na żywo.
| Komponent | Klasa | Opis | Pomoc |
|---|---|---|---|
| EngineServer | TsgcHTMLEngine_Server | Silnik HTML powiązany z TsgcWebSocketHTTPServer, który obsługuje wyrenderowane strony i wbudowane zasoby. | Docs |
| HTMXEngine | TsgcHTMX_Engine_Server | Silnik 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 |
| PageBuilder | TsgcHTMLPageBuilder | Składa zarejestrowane komponenty w kompletną responsywną stronę (z wizualnym edytorem działającym w czasie projektowania). | Docs |
| TemplateBootstrap | TsgcHTMLTemplate_Bootstrap | Opakowuje treść strony w pełny dokument HTML Bootstrap 5 z motywem, językiem i kierunkiem. | Docs |
| ThemeController | TsgcHTMLThemeController | Przełą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 |
| ThemeBuilder | TsgcHTMLThemeBuilder | Generator 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 |
| HTMXFragment | TsgcHTMX_Fragment | Fragment htmx out-of-band do wypychania częściowej aktualizacji strony z serwera do przeglądarki. | Docs |
| HTMXRouter | TsgcHTMX_Router | Tabela routingu Routes, która dopasowuje ścieżkę przychodzącego żądania i przekazuje je (przez HandleRequest) do procedury obsługi OnRoute danej trasy. | Docs |