라이브러리의 모든 컴포넌트를 9개 패밀리로 그룹화했습니다. 각 컴포넌트는 Bootstrap 5 마크업으로 렌더링되며 Delphi, C++ Builder 및 .NET에서 동일하게 작동합니다. 대부분은 데이터 연동형으로, LoadFromDataSet / DataSource(또는 이에 상응하는 .NET 소스)를 통해 TDataSet에 바로 바인딩됩니다. 컴포넌트를 클릭하면 사용법과 예제가 포함된 자체 페이지로 이동합니다. 모든 컴포넌트는 자동 HTML, 속성, JavaScript 및 URL 출력 인코딩과 URL 정리를 적용하므로, 동적 콘텐츠는 기본적으로 이스케이프되어 XSS 및 주입으로부터 보호됩니다.
14개 컴포넌트
11개 컴포넌트
10개 컴포넌트
21개 컴포넌트
10개 컴포넌트
12개 컴포넌트
4개 컴포넌트
7개 컴포넌트
8개 클래스
데이터셋을 직접 렌더링하는 그리드, 캘린더 및 보드.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Grid | TsgcHTMLComponent_Grid | 기능이 풍부한 표: 정렬, 필터, CSV/PDF 내보내기, 인라인 편집, 그룹화, 가상 스크롤 및 AI 쿼리. | Docs |
| DataTable | TsgcHTMLComponent_DataTable | 툴바, 검색 및 행 수와 함께 Grid + Pagination을 감싸는 상위 수준 데이터 테이블. | Docs |
| Calendar | TsgcHTMLComponent_Calendar | 이벤트 점과 이전/다음 내비게이션을 갖춘 월별 그리드 캘린더. | Docs |
| Scheduler | TsgcHTMLComponent_Scheduler | 날짜별로 이벤트를 렌더링하는 캘린더 스케줄러(월 / 주 보기). | Docs |
| Timeline | TsgcHTMLComponent_Timeline | 데이터셋에서 로드할 수 있는, 날짜가 지정된 이벤트의 세로형 타임라인. | Docs |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | 열과 드래그 가능한 카드로 구성된 칸반 보드. | Docs |
| Gantt | TsgcHTMLComponent_Gantt | 작업 진행률 막대를 갖춘 간트 프로젝트 타임라인 차트. | Docs |
| TreeGrid | TsgcHTMLComponent_TreeGrid | Id/ParentId 노드 쌍으로 구성된, 접을 수 있는 계층적 행을 갖춘 Bootstrap 표. | Docs |
| PivotTable | TsgcHTMLComponent_PivotTable | 행과 열을 그룹화하고 측정값을 집계하며 행, 열 및 총합계를 제공하는 Bootstrap 피벗 테이블. | Docs |
| ActivityFeed | TsgcHTMLComponent_ActivityFeed | 상대 타임스탬프와 대역 외(out-of-band) WebSocket 푸시를 갖춘, 최신순으로 표시되는 실시간 활동 피드. | Docs |
| AuditTrail | TsgcHTMLComponent_AuditTrail | 행위자, 작업, 대상 및 타임스탬프와 함께 사용자 및 시스템 작업을 시간순으로 기록하는 감사 로그 피드. | Docs |
사용자 자신의 수치로 만든 데이터 기반 시각 자료.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Chart.js 차트: 선형, 막대, 원형, 도넛, 레이더, 극좌표, 버블 및 산점도. | Docs |
| Gauge | TsgcHTMLComponent_Gauge | 낮음 / 중간 / 높음 색상 임계값을 갖춘 반원형 SVG 게이지. | Docs |
| Diagram | TsgcHTMLComponent_Diagram | 인라인 SVG로 렌더링되는 노드-화살표 흐름도. | Docs |
| Map | TsgcHTMLComponent_Map | 마커가 있는 Leaflet.js 인터랙티브 지도(OpenStreetMap / CartoDB 타일). | Docs |
| Heatmap | TsgcHTMLComponent_Heatmap | 셀 값 또는 바인딩된 데이터셋을 기반으로 한 색상 스케일 SVG 히트맵 그리드로, 범례와 행/열 레이블을 갖췄습니다. | Docs |
| Sparkline | TsgcHTMLComponent_Sparkline | 값 시리즈 또는 바인딩된 데이터셋으로 만드는 컴팩트한 인라인 SVG 라인, 막대 또는 영역 스파크라인. | Docs |
| CandlestickChart | TsgcHTMLComponent_CandlestickChart | 심지, 상승/하락 색상 및 선택적 거래량 막대를 갖춘 SVG OHLC 캔들스틱 차트. | Docs |
| QRCode | TsgcHTMLComponent_QRCode | 선택 가능한 오류 정정 수준을 갖춘, 모든 텍스트나 URL로 만드는 순수 Pascal ISO/IEC 18004 SVG QR 코드. | Docs |
| Barcode | TsgcHTMLComponent_Barcode | 선택적 사람이 읽을 수 있는 캡션을 갖춘, 모든 ASCII 텍스트로 만드는 순수 Pascal Code 128 SVG 바코드. | Docs |
| TreeMap | TsgcHTMLComponent_TreeMap | 차팅 라이브러리가 필요 없는, 독립적으로 서버에서 생성되는 인라인 SVG로 렌더링되는 스퀘어파이드 트리맵. | Docs |
유효성 검사와 데이터셋 바인딩을 갖춘, 데이터 수집에 필요한 모든 것.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Form | TsgcHTMLComponent_Form | 유효성 검사, 레이아웃 및 AI 폼 생성을 갖춘 데이터 기반 폼 빌더. | Docs |
| Edit | TsgcHTMLComponent_Edit | 레이블, 도움말 텍스트 및 데이터셋 바인딩을 갖춘 한 줄 텍스트 입력. | Docs |
| Memo | TsgcHTMLComponent_Memo | 레이블과 도움말 텍스트를 갖춘 여러 줄 텍스트 영역 입력. | Docs |
| CheckBox | TsgcHTMLComponent_CheckBox | 레이블과 체크 상태를 갖춘 체크박스 입력. | Docs |
| RadioGroup | TsgcHTMLComponent_RadioGroup | 상호 배타적인 라디오 옵션 그룹. | Docs |
| Select | TsgcHTMLComponent_Select | 옵션 그룹, 다중 선택 및 데이터셋 바인딩을 갖춘 선택 드롭다운. | Docs |
| InputGroup | TsgcHTMLComponent_InputGroup | 앞/뒤 추가 텍스트 애드온을 갖춘 입력. | Docs |
| AutoComplete | TsgcHTMLComponent_AutoComplete | 제안 목록의 HTML5 datalist로 뒷받침되는 텍스트 입력. | Docs |
| DatePicker | TsgcHTMLComponent_DatePicker | 네이티브 날짜 / 시간 / 날짜시간 입력 필드. | Docs |
| FileUpload | TsgcHTMLComponent_FileUpload | 멀티파트 폼 전송을 갖춘 드래그 앤 드롭 파일 업로드 영역. | Docs |
| RichEditor | TsgcHTMLComponent_RichEditor | 숨김 폼 필드를 갖춘 Quill 기반 WYSIWYG 리치 텍스트 편집기. | Docs |
| Rating | TsgcHTMLComponent_Rating | 별점(기호) 평가 표시 또는 입력. | Docs |
| MultiSelect | TsgcHTMLComponent_MultiSelect | 칩, 그룹화된 옵션 및 데이터셋 바인딩을 갖춘 검색 가능한 Bootstrap 다중 선택 드롭다운. | Docs |
| ColorPicker | TsgcHTMLComponent_ColorPicker | 선택적 16진수 텍스트 필드와 색상 견본 프리셋을 갖춘 네이티브 HTML5 색상 입력. | Docs |
| Slider | TsgcHTMLComponent_Slider | 실시간 값 배지, 최소/최대 레이블 및 색상 스타일링을 갖춘 Bootstrap 범위 슬라이더. | Docs |
| TimePicker | TsgcHTMLComponent_TimePicker | 최소/최대 범위와 초 단위 정밀도를 갖춘 네이티브 HTML5 시간 입력. | Docs |
| SignaturePad | TsgcHTMLComponent_SignaturePad | 지우기, 실행 취소 및 저장 작업을 갖춘 포인터 이벤트 기반 캔버스 서명 패드. | Docs |
| Transfer | TsgcHTMLComponent_Transfer | 필터링 및 데이터셋 바인딩을 갖춘, 사용 가능 패널과 할당됨 패널 사이에서 항목을 이동하는 이중 목록 상자 위젯. | Docs |
| DateTimePicker | TsgcHTMLComponent_DateTimePicker | 캘린더와 시계를 단일 필드에 결합한 네이티브 HTML5 날짜 및 시간 선택기. | Docs |
| DateRangePicker | TsgcHTMLComponent_DateRangePicker | 최소/최대 범위와 함께 날짜 범위를 선택하기 위한 시작 및 종료 날짜 입력 쌍. | Docs |
| RangeSlider | TsgcHTMLComponent_RangeSlider | 실시간 값 배지와 함께 낮음/높음 값 쌍을 선택하는 이중 핸들 슬라이더. | Docs |
페이지를 구성하기 위한 카드, 미디어 및 KPI 타일.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Panel | TsgcHTMLComponent_Panel | 헤더 / 본문 / 푸터를 갖춘, 접을 수 있고 스크롤 가능한 Bootstrap 카드 패널. | Docs |
| StatCard | TsgcHTMLComponent_StatCard | 아이콘, 추세 화살표 및 선택적 그라데이션을 갖춘 대시보드 KPI / 통계 카드. | Docs |
| Accordion | TsgcHTMLComponent_Accordion | 쌓인 확장형 패널로 구성된 세로로 접히는 아코디언. | Docs |
| Carousel | TsgcHTMLComponent_Carousel | 표시기, 컨트롤 및 자동 재생을 갖춘 이미지 슬라이드쇼 / 캐러셀. | Docs |
| Image | TsgcHTMLComponent_Image | 모양, 반응형 / 지연 로드, 라이트박스 링크 및 캡션을 갖춘 이미지. | Docs |
| Avatar | TsgcHTMLComponent_Avatar | 크기, 모양 및 접속 상태 점을 갖춘 사용자 아바타(이미지 또는 이니셜). | Docs |
| Video | TsgcHTMLComponent_Video | HTML5 비디오 / 오디오 플레이어와 YouTube 임베드 헬퍼. | Docs |
| Badge | TsgcHTMLComponent_Badge | 색상, 알약형 모양, 인라인 아이콘 및 위치 지정 가능한 알림 점 모드를 갖춘 단일 Bootstrap 배지. | Docs |
| PDFViewer | TsgcHTMLComponent_PDFViewer | 페이지 탐색, 확대/축소, 검색, 다운로드 및 인쇄를 갖춘, pdf.js 기반의 페이지 내 PDF 뷰어. | Docs |
| Chip | TsgcHTMLComponent_Chip | 선택적 아이콘, 색상 및 제거 가능한 닫기 버튼을 갖춘 컴팩트한 칩 / 태그. | Docs |
대화 상자, 상태 표시 영역 및 로딩 상태.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Modal | TsgcHTMLComponent_Modal | 제목 / 본문 / 푸터, 크기, 가운데 정렬 및 정적 배경을 갖춘 모달 대화 상자. | Docs |
| Offcanvas | TsgcHTMLComponent_Offcanvas | 왼쪽, 오른쪽, 위 또는 아래에서 슬라이드되는 오프캔버스 패널. | Docs |
| Popover | TsgcHTMLComponent_Popover | 트리거 요소에 표시되는 팝오버 말풍선(클릭 / 호버 / 포커스). | Docs |
| Toast | TsgcHTMLComponent_Toast | 헤더, 본문, 타임스탬프 및 자동 숨김을 갖춘 토스트 알림. | Docs |
| Snackbar | TsgcHTMLComponent_Snackbar | 선택적 작업을 갖춘 머티리얼 스타일의 일시적 스낵바. | Docs |
| Notification | TsgcHTMLComponent_Notification | 읽지 않음 배지를 갖춘 종 아이콘 드롭다운 알림 센터. | Docs |
| Spinner | TsgcHTMLComponent_Spinner | 크기와 색상이 지정된 로딩 스피너(테두리 / 확대). | Docs |
| Placeholder | TsgcHTMLComponent_Placeholder | 애니메이션 반짝임을 갖춘 스켈레톤 / 플레이스홀더 로딩 카드. | Docs |
| ContextMenu | TsgcHTMLComponent_ContextMenu | CSS 선택자 범위로 지정된 우클릭 드롭다운 메뉴로, 아이콘, 구분선, 헤더 및 서버 라우팅 작업을 갖췄습니다. | Docs |
| JobProgress | TsgcHTMLComponent_JobProgress | 상태 배지, 취소 버튼 및 대역 외(out-of-band) 조각 업데이트를 갖춘, 백그라운드 작업 진행률 표시줄의 실시간 목록. | Docs |
| LogViewer | TsgcHTMLComponent_LogViewer | 레벨 필터, 검색 및 자동 스크롤을 갖춘 스트리밍 로그 / 터미널 뷰어. | Docs |
| ProgressBar | TsgcHTMLComponent_ProgressBar | 줄무늬와 애니메이션을 갖춘 Bootstrap 진행률 표시줄로, 단일 또는 다중 세그먼트 누적 형태입니다. | Docs |
단순한 말풍선부터 스트리밍 AI 어시스턴트까지, 대화형 UI.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | 입력 바와 입력 중 표시기를 갖춘 카드 스타일의 채팅 말풍선 박스. | Docs |
| Chat | TsgcHTMLComponent_Chat | 텍스트 / 이미지 / 파일 / 오디오 / 비디오 메시지, 읽음 확인 및 답장을 갖춘 WhatsApp 스타일 채팅. | Docs |
| AIChat | TsgcHTMLComponent_AIChat | 제공자 / 모델 선택기, 토큰 스트리밍 및 RAG 출처 인용을 갖춘 AI 어시스턴트 채팅. | Docs |
| Presence | TsgcHTMLComponent_Presence | 아바타 스택 또는 목록 형태의 “접속자” 명단으로, 실시간 상태 업데이트를 제공합니다. | Docs |
비밀번호부터 패스키까지, 즉시 사용 가능한 로그인 흐름.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Login | TsgcHTMLComponent_Login | 로그인 유지와 알림을 갖춘 즉시 사용 가능한 로그인 폼 / 페이지(카드, 가운데 정렬 또는 전체 페이지). | Docs |
| SocialLogin | TsgcHTMLComponent_SocialLogin | OAuth 소셜 로그인 버튼 패널(Google, Facebook, Apple, GitHub, Microsoft 등). | Docs |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | 자동 리디렉션과 함께 성공, 오류 또는 로딩 상태의 OAuth 콜백 / 랜딩 페이지. | Docs |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | 비밀번호 없는 패스키 / WebAuthn 로그인 및 등록 위젯. | Docs |
| RolesPermissions | TsgcHTMLComponent_RolesPermissions | 셀마다 체크박스가 있는 역할 / 권한 매트릭스로, 실시간 WebSocket 권한 부여 업데이트를 제공합니다. | Docs |
| UserManagement | TsgcHTMLComponent_UserManagement | 역할, 상태, 검색 및 행별 작업 드롭다운을 갖춘 사용자 관리 테이블. | Docs |
| ImpersonateBanner | TsgcHTMLComponent_ImpersonateBanner | 다른 사용자로 활동하는 동안 표시되며 한 번의 클릭으로 종료할 수 있는 관리자 가장(impersonation) 배너. | Docs |
페이지를 제공하고 실시간으로 유지하는 비주얼이 아닌 구성 요소.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| EngineServer | TsgcHTMLEngine_Server | 렌더링된 페이지와 내장 자산을 제공하는, TsgcWebSocketHTTPServer에 바인딩된 HTML 엔진. | Docs |
| HTMXEngine | TsgcHTMX_Engine_Server | 동일한 서버에 연결된 htmx 엔진입니다. HTTP 및 WebSocket 핸들러에 후킹하고, 인바운드 요청과 메시지를 디스패치하며, 연결된 브라우저에 HTML 조각을 실시간으로 푸시하거나 브로드캐스트합니다(DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment). | Docs |
| PageBuilder | TsgcHTMLPageBuilder | 등록된 컴포넌트를 완전한 반응형 페이지로 조립합니다(디자인 타임 비주얼 편집기 포함). | Docs |
| TemplateBootstrap | TsgcHTMLTemplate_Bootstrap | 본문 콘텐츠를 테마, 언어 및 방향이 있는 완전한 Bootstrap 5 HTML 문서로 감쌉니다. | Docs |
| ThemeController | TsgcHTMLThemeController | Theme 속성(ptDefault, ptDark, ptDarkPro)이 선택된 테마와 공유 스타일시트를 페이지에 적용하는 런타임 테마 전환기. | Docs |
| ThemeBuilder | TsgcHTMLThemeBuilder | Mode(tmLight, tmDark, tmSystem)에 따라 속성 값에서 Bootstrap CSS 변수를 작성하는 CSS 생성기로, tmSystem의 경우 선택적 OS 기본 설정 동기화 스크립트를 제공합니다. | Docs |
| HTMXFragment | TsgcHTMX_Fragment | 서버에서 브라우저로 부분 페이지 업데이트를 푸시하기 위한 대역 외(out-of-band) htmx 조각. | Docs |
| HTMXRouter | TsgcHTMX_Router | 수신 요청 경로를 일치시키고 이를(HandleRequest를 통해) 해당 경로의 OnRoute 핸들러로 디스패치하는 Routes 라우팅 테이블. | Docs |