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