라이브러리의 모든 컴포넌트를 9개 패밀리로 그룹화했습니다. 각 컴포넌트는 Bootstrap 5 마크업으로 렌더링되며 Delphi, C++ Builder 및 .NET에서 동일하게 작동합니다. 컴포넌트를 클릭하면 사용법과 예제가 포함된 자체 페이지로 이동합니다. 모든 컴포넌트는 자동 HTML, 속성, JavaScript 및 URL 출력 인코딩과 URL 정리를 적용하므로, 동적 콘텐츠는 기본적으로 이스케이프되어 XSS 및 주입으로부터 보호됩니다.
13개 컴포넌트
7개 컴포넌트
4개 컴포넌트
12개 컴포넌트
7개 컴포넌트
8개 컴포넌트
3개 컴포넌트
4개 컴포넌트
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 |
사용자 자신의 수치로 만든 데이터 기반 시각 자료.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Chart.js 차트: 선형, 막대, 원형, 도넛, 레이더, 극좌표, 버블 및 산점도. | Docs |
| Gauge | TsgcHTMLComponent_Gauge | 낮음 / 중간 / 높음 색상 임계값을 갖춘 반원형 SVG 게이지. | Docs |
| Diagram | TsgcHTMLComponent_Diagram | 인라인 SVG로 렌더링되는 노드-화살표 흐름도. | Docs |
| Map | TsgcHTMLComponent_Map | 마커가 있는 Leaflet.js 인터랙티브 지도(OpenStreetMap / CartoDB 타일). | 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 |
페이지를 구성하기 위한 카드, 미디어 및 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 |
대화 상자, 상태 표시 영역 및 로딩 상태.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| 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 |
단순한 말풍선부터 스트리밍 AI 어시스턴트까지, 대화형 UI.
비밀번호부터 패스키까지, 즉시 사용 가능한 로그인 흐름.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Login | TsgcHTMLComponent_Login | 로그인 유지와 알림을 갖춘 즉시 사용 가능한 로그인 폼 / 페이지(카드, 가운데 정렬 또는 전체 페이지). | Docs |
| SocialLogin | TsgcHTMLComponent_SocialLogin | OAuth 소셜 로그인 버튼 패널(Google, Facebook, Apple, GitHub, Microsoft 등). | Docs |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | 자동 리디렉션과 함께 성공, 오류 또는 로딩 상태의 OAuth 콜백 / 랜딩 페이지. | Docs |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | 비밀번호 없는 패스키 / WebAuthn 로그인 및 등록 위젯. | 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 |