93개의 모든 sgcHTML UI 컴포넌트를 9개 패밀리로 그룹화하여 한곳에서 둘러보세요. 모든 컴포넌트는 Bootstrap 5 마크업으로 렌더링되며 Delphi, C++ Builder 및 .NET에서 동일하게 작동하고, 각 플랫폼에서 동일한 Tsgc* 클래스 이름을 사용합니다. 93개 컴포넌트 중 28개는 데이터 연동형으로 TDataSet / DataSource(또는 이에 상응하는 .NET 소스)에 바로 바인딩되며, 이들은 데이터 연동 배지를 표시합니다. 아무 카드나 클릭하여 컴포넌트 페이지로 이동하거나 문서를 여세요.
아래의 모든 컴포넌트는 실행 가능한 샘플로 제공됩니다. 60.HTML 데모 세트의 08.Components 프로젝트는 이 전체 카탈로그를 브라우저에서 직접 조작할 수 있는 라이브 클릭 스루 갤러리로 렌더링합니다. 무료 체험판에 포함되어 있으므로, 전체 갤러리를 사용자 자신의 데이터로 로컬에서 실행할 수 있습니다.
체험판에는 60.HTML 데모 프로젝트(08.Components 포함)가 들어 있습니다. 인터랙티브 갤러리의 상시 호스팅 버전은 별도 배포입니다.
원하는 패밀리로 바로 이동하거나 아래 전체 카탈로그를 스크롤하세요.
14개 컴포넌트
11개 컴포넌트
10개 컴포넌트
23개 컴포넌트
10개 컴포넌트
14개 컴포넌트
4개 컴포넌트
7개 컴포넌트
7개 클래스
데이터셋을 직접 렌더링하는 그리드, 캘린더 및 보드.
TsgcHTMLComponent_GridTsgcHTMLComponent_Grid기능이 풍부한 표: 정렬, 필터, CSV/PDF 내보내기, 인라인 편집, 그룹화, 가상 스크롤 및 AI 쿼리.
TsgcHTMLComponent_DataTableTsgcHTMLComponent_DataTable툴바, 검색 및 행 수와 함께 Grid + Pagination을 감싸는 상위 수준 데이터 테이블.
TsgcHTMLComponent_CalendarTsgcHTMLComponent_Calendar이벤트 점과 이전/다음 내비게이션을 갖춘 월별 그리드 캘린더.
TsgcHTMLComponent_SchedulerTsgcHTMLComponent_Scheduler날짜별로 이벤트를 렌더링하는 캘린더 스케줄러(월 / 주 보기).
TsgcHTMLComponent_TimelineTsgcHTMLComponent_Timeline데이터셋에서 로드할 수 있는, 날짜가 지정된 이벤트의 세로형 타임라인.
TsgcHTMLComponent_KanbanBoardTsgcHTMLComponent_KanbanBoard열과 드래그 가능한 카드로 구성된 칸반 보드.
TsgcHTMLComponent_GanttTsgcHTMLComponent_Gantt작업 진행률 막대를 갖춘 간트 프로젝트 타임라인 차트.
TsgcHTMLComponent_TreeGridTsgcHTMLComponent_TreeGridId/ParentId 노드 쌍으로 구성된, 접을 수 있는 계층적 행을 갖춘 Bootstrap 표.
TsgcHTMLComponent_PivotTableTsgcHTMLComponent_PivotTable행과 열을 그룹화하고 측정값을 집계하며 행, 열 및 총합계를 제공하는 Bootstrap 피벗 테이블.
TsgcHTMLComponent_ActivityFeedTsgcHTMLComponent_ActivityFeed상대 타임스탬프와 대역 외(out-of-band) WebSocket 푸시를 갖춘, 최신순으로 표시되는 실시간 활동 피드.
TsgcHTMLComponent_AuditTrailTsgcHTMLComponent_AuditTrail행위자, 작업, 대상 및 타임스탬프와 함께 사용자 및 시스템 작업을 시간순으로 기록하는 감사 로그 피드.
사용자 자신의 수치로 만든 데이터 기반 시각 자료.
TsgcHTMLComponent_ChartTsgcHTMLComponent_ChartChart.js 차트: 선형, 막대, 원형, 도넛, 레이더, 극좌표, 버블 및 산점도.
TsgcHTMLComponent_GaugeTsgcHTMLComponent_Gauge낮음 / 중간 / 높음 색상 임계값을 갖춘 반원형 SVG 게이지.
TsgcHTMLComponent_DiagramTsgcHTMLComponent_Diagram인라인 SVG로 렌더링되는 노드-화살표 흐름도.
TsgcHTMLComponent_MapTsgcHTMLComponent_Map마커가 있는 Leaflet.js 인터랙티브 지도(OpenStreetMap / CartoDB 타일).
TsgcHTMLComponent_HeatmapTsgcHTMLComponent_Heatmap셀 값 또는 바인딩된 데이터셋을 기반으로 한 색상 스케일 SVG 히트맵 그리드로, 범례와 행/열 레이블을 갖췄습니다.
TsgcHTMLComponent_SparklineTsgcHTMLComponent_Sparkline값 시리즈 또는 바인딩된 데이터셋으로 만드는 컴팩트한 인라인 SVG 라인, 막대 또는 영역 스파크라인.
TsgcHTMLComponent_CandlestickChartTsgcHTMLComponent_CandlestickChart심지, 상승/하락 색상 및 선택적 거래량 막대를 갖춘 SVG OHLC 캔들스틱 차트.
TsgcHTMLComponent_QRCodeTsgcHTMLComponent_QRCode선택 가능한 오류 정정 수준을 갖춘, 모든 텍스트나 URL로 만드는 순수 Pascal ISO/IEC 18004 SVG QR 코드.
TsgcHTMLComponent_BarcodeTsgcHTMLComponent_Barcode선택적 사람이 읽을 수 있는 캡션을 갖춘, 모든 ASCII 텍스트로 만드는 순수 Pascal Code 128 SVG 바코드.
유효성 검사와 데이터셋 바인딩을 갖춘, 데이터 수집에 필요한 모든 것.
TsgcHTMLComponent_FormTsgcHTMLComponent_Form유효성 검사, 레이아웃 및 AI 폼 생성을 갖춘 데이터 기반 폼 빌더.
TsgcHTMLComponent_EditTsgcHTMLComponent_Edit레이블, 도움말 텍스트 및 데이터셋 바인딩을 갖춘 한 줄 텍스트 입력.
TsgcHTMLComponent_MemoTsgcHTMLComponent_Memo레이블과 도움말 텍스트를 갖춘 여러 줄 텍스트 영역 입력.
TsgcHTMLComponent_CheckBoxTsgcHTMLComponent_CheckBox레이블과 체크 상태를 갖춘 체크박스 입력.
TsgcHTMLComponent_RadioGroupTsgcHTMLComponent_RadioGroup상호 배타적인 라디오 옵션 그룹.
TsgcHTMLComponent_SelectTsgcHTMLComponent_Select옵션 그룹, 다중 선택 및 데이터셋 바인딩을 갖춘 선택 드롭다운.
TsgcHTMLComponent_InputGroupTsgcHTMLComponent_InputGroup앞/뒤 추가 텍스트 애드온을 갖춘 입력.
TsgcHTMLComponent_AutoCompleteTsgcHTMLComponent_AutoComplete제안 목록의 HTML5 datalist로 뒷받침되는 텍스트 입력.
TsgcHTMLComponent_DatePickerTsgcHTMLComponent_DatePicker네이티브 날짜 / 시간 / 날짜시간 입력 필드.
TsgcHTMLComponent_FileUploadTsgcHTMLComponent_FileUpload멀티파트 폼 전송을 갖춘 드래그 앤 드롭 파일 업로드 영역.
TsgcHTMLComponent_RichEditorTsgcHTMLComponent_RichEditor숨김 폼 필드를 갖춘 Quill 기반 WYSIWYG 리치 텍스트 편집기.
TsgcHTMLComponent_RatingTsgcHTMLComponent_Rating별점(기호) 평가 표시 또는 입력.
TsgcHTMLComponent_MultiSelectTsgcHTMLComponent_MultiSelect칩, 그룹화된 옵션 및 데이터셋 바인딩을 갖춘 검색 가능한 Bootstrap 다중 선택 드롭다운.
TsgcHTMLComponent_ColorPickerTsgcHTMLComponent_ColorPicker선택적 16진수 텍스트 필드와 색상 견본 프리셋을 갖춘 네이티브 HTML5 색상 입력.
TsgcHTMLComponent_SliderTsgcHTMLComponent_Slider실시간 값 배지, 최소/최대 레이블 및 색상 스타일링을 갖춘 Bootstrap 범위 슬라이더.
TsgcHTMLComponent_TimePickerTsgcHTMLComponent_TimePicker최소/최대 범위와 초 단위 정밀도를 갖춘 네이티브 HTML5 시간 입력.
TsgcHTMLComponent_SignaturePadTsgcHTMLComponent_SignaturePad지우기, 실행 취소 및 저장 작업을 갖춘 포인터 이벤트 기반 캔버스 서명 패드.
TsgcHTMLComponent_TransferTsgcHTMLComponent_Transfer필터링 및 데이터셋 바인딩을 갖춘, 사용 가능 패널과 할당됨 패널 사이에서 항목을 이동하는 이중 목록 상자 위젯.
TsgcHTMLComponent_DateTimePickerTsgcHTMLComponent_DateTimePicker캘린더와 시계를 단일 필드에 결합한 네이티브 HTML5 날짜 및 시간 선택기.
TsgcHTMLComponent_DateRangePickerTsgcHTMLComponent_DateRangePicker최소/최대 범위와 함께 날짜 범위를 선택하기 위한 시작 및 종료 날짜 입력 쌍.
TsgcHTMLComponent_RangeSliderTsgcHTMLComponent_RangeSlider실시간 값 배지와 함께 낮음/높음 값 쌍을 선택하는 이중 핸들 슬라이더.
TsgcHTMLComponent_CameraScannerTsgcHTMLComponent_CameraScanner브라우저의 네이티브 BarcodeDetector로 바코드와 QR 코드를 스캔하는 실시간 카메라 패널로, 서드파티 라이브러리가 필요 없습니다.
페이지를 구성하기 위한 카드, 미디어 및 KPI 타일.
TsgcHTMLComponent_PanelTsgcHTMLComponent_Panel헤더 / 본문 / 푸터를 갖춘, 접을 수 있고 스크롤 가능한 Bootstrap 카드 패널.
TsgcHTMLComponent_StatCardTsgcHTMLComponent_StatCard아이콘, 추세 화살표 및 선택적 그라데이션을 갖춘 대시보드 KPI / 통계 카드.
TsgcHTMLComponent_AccordionTsgcHTMLComponent_Accordion쌓인 확장형 패널로 구성된 세로로 접히는 아코디언.
TsgcHTMLComponent_CarouselTsgcHTMLComponent_Carousel표시기, 컨트롤 및 자동 재생을 갖춘 이미지 슬라이드쇼 / 캐러셀.
TsgcHTMLComponent_ImageTsgcHTMLComponent_Image모양, 반응형 / 지연 로드, 라이트박스 링크 및 캡션을 갖춘 이미지.
TsgcHTMLComponent_AvatarTsgcHTMLComponent_Avatar크기, 모양 및 접속 상태 점을 갖춘 사용자 아바타(이미지 또는 이니셜).
TsgcHTMLComponent_VideoTsgcHTMLComponent_VideoHTML5 비디오 / 오디오 플레이어와 YouTube 임베드 헬퍼.
TsgcHTMLComponent_BadgeTsgcHTMLComponent_Badge색상, 알약형 모양, 인라인 아이콘 및 위치 지정 가능한 알림 점 모드를 갖춘 단일 Bootstrap 배지.
TsgcHTMLComponent_PDFViewerTsgcHTMLComponent_PDFViewer페이지 탐색, 확대/축소, 검색, 다운로드 및 인쇄를 갖춘, pdf.js 기반의 페이지 내 PDF 뷰어.
TsgcHTMLComponent_ChipTsgcHTMLComponent_Chip선택적 아이콘, 색상 및 제거 가능한 닫기 버튼을 갖춘 컴팩트한 칩 / 태그.
대화 상자, 상태 표시 영역 및 로딩 상태.
TsgcHTMLComponent_ModalTsgcHTMLComponent_Modal제목 / 본문 / 푸터, 크기, 가운데 정렬 및 정적 배경을 갖춘 모달 대화 상자.
TsgcHTMLComponent_OffcanvasTsgcHTMLComponent_Offcanvas왼쪽, 오른쪽, 위 또는 아래에서 슬라이드되는 오프캔버스 패널.
TsgcHTMLComponent_PopoverTsgcHTMLComponent_Popover트리거 요소에 표시되는 팝오버 말풍선(클릭 / 호버 / 포커스).
TsgcHTMLComponent_ToastTsgcHTMLComponent_Toast헤더, 본문, 타임스탬프 및 자동 숨김을 갖춘 토스트 알림.
TsgcHTMLComponent_SnackbarTsgcHTMLComponent_Snackbar선택적 작업을 갖춘 머티리얼 스타일의 일시적 스낵바.
TsgcHTMLComponent_NotificationTsgcHTMLComponent_Notification읽지 않음 배지를 갖춘 종 아이콘 드롭다운 알림 센터.
TsgcHTMLComponent_SpinnerTsgcHTMLComponent_Spinner크기와 색상이 지정된 로딩 스피너(테두리 / 확대).
TsgcHTMLComponent_PlaceholderTsgcHTMLComponent_Placeholder애니메이션 반짝임을 갖춘 스켈레톤 / 플레이스홀더 로딩 카드.
TsgcHTMLComponent_ContextMenuTsgcHTMLComponent_ContextMenuCSS 선택자 범위로 지정된 우클릭 드롭다운 메뉴로, 아이콘, 구분선, 헤더 및 서버 라우팅 작업을 갖췄습니다.
TsgcHTMLComponent_JobProgressTsgcHTMLComponent_JobProgress상태 배지, 취소 버튼 및 대역 외(out-of-band) 조각 업데이트를 갖춘, 백그라운드 작업 진행률 표시줄의 실시간 목록.
TsgcHTMLComponent_LogViewerTsgcHTMLComponent_LogViewer레벨 필터, 검색 및 자동 스크롤을 갖춘 스트리밍 로그 / 터미널 뷰어.
TsgcHTMLComponent_ProgressBarTsgcHTMLComponent_ProgressBar줄무늬와 애니메이션을 갖춘 Bootstrap 진행률 표시줄로, 단일 또는 다중 세그먼트 누적 형태입니다.
TsgcHTMLComponent_CommandPaletteTsgcHTMLComponent_CommandPalette부분 문자열 우선 퍼지 필터링, 카테고리 및 서버 라우팅 액션을 갖춘 Ctrl+K / Cmd+K 빠른 작업 실행기.
TsgcHTMLComponent_EmptyStateTsgcHTMLComponent_EmptyState그리드, 목록 또는 검색 결과에 표시할 행이 없을 때 보여주는 패널로, 아이콘, 제목, 설명 및 최대 두 개의 버튼을 갖췄습니다.
단순한 말풍선부터 스트리밍 AI 어시스턴트까지, 대화형 UI.
TsgcHTMLComponent_ChatBoxTsgcHTMLComponent_ChatBox입력 바와 입력 중 표시기를 갖춘 카드 스타일의 채팅 말풍선 박스.
TsgcHTMLComponent_ChatTsgcHTMLComponent_Chat텍스트 / 이미지 / 파일 / 오디오 / 비디오 메시지, 읽음 확인 및 답장을 갖춘 WhatsApp 스타일 채팅.
TsgcHTMLComponent_AIChatTsgcHTMLComponent_AIChat제공자 / 모델 선택기, 토큰 스트리밍 및 RAG 출처 인용을 갖춘 AI 어시스턴트 채팅.
비밀번호부터 패스키까지, 즉시 사용 가능한 로그인 흐름.
TsgcHTMLComponent_LoginTsgcHTMLComponent_Login로그인 유지와 알림을 갖춘 즉시 사용 가능한 로그인 폼 / 페이지(카드, 가운데 정렬 또는 전체 페이지).
TsgcHTMLComponent_SocialLoginTsgcHTMLComponent_SocialLoginOAuth 소셜 로그인 버튼 패널(Google, Facebook, Apple, GitHub, Microsoft 등).
TsgcHTMLComponent_OAuthCallbackTsgcHTMLComponent_OAuthCallback자동 리디렉션과 함께 성공, 오류 또는 로딩 상태의 OAuth 콜백 / 랜딩 페이지.
TsgcHTMLComponent_WebAuthnLoginTsgcHTMLComponent_WebAuthnLogin비밀번호 없는 패스키 / WebAuthn 로그인 및 등록 위젯.
TsgcHTMLComponent_RolesPermissionsTsgcHTMLComponent_RolesPermissions셀마다 체크박스가 있는 역할 / 권한 매트릭스로, 실시간 WebSocket 권한 부여 업데이트를 제공합니다.
TsgcHTMLComponent_UserManagementTsgcHTMLComponent_UserManagement역할, 상태, 검색 및 행별 작업 드롭다운을 갖춘 사용자 관리 테이블.
TsgcHTMLComponent_ImpersonateBannerTsgcHTMLComponent_ImpersonateBanner다른 사용자로 활동하는 동안 표시되며 한 번의 클릭으로 종료할 수 있는 관리자 가장(impersonation) 배너.
페이지를 제공하고 실시간으로 유지하는 비주얼이 아닌 구성 요소.
TsgcHTMLEngine_ServerTsgcHTMLEngine_Server렌더링된 페이지와 내장 자산을 제공하는, TsgcWebSocketHTTPServer에 바인딩된 HTML 엔진.
TsgcHTMX_Engine_ServerTsgcHTMX_Engine_Server동일한 서버에 연결된 htmx 엔진입니다. HTTP 및 WebSocket 핸들러에 후킹하고, 인바운드 요청과 메시지를 디스패치하며, 연결된 브라우저에 HTML 조각을 실시간으로 푸시하거나 브로드캐스트합니다.
TsgcHTMLPageBuilderTsgcHTMLPageBuilder등록된 컴포넌트를 완전한 반응형 페이지로 조립하며, 디자인 타임 비주얼 편집기를 제공합니다.
TsgcHTMLThemeControllerTsgcHTMLThemeControllerTheme 속성(ptDefault, ptDark, ptDarkPro)이 선택된 테마와 공유 스타일시트를 페이지에 적용하는 런타임 테마 전환기.
TsgcHTMLThemeBuilderTsgcHTMLThemeBuilderMode(tmLight, tmDark, tmSystem)에 따라 속성 값에서 Bootstrap CSS 변수를 작성하는 CSS 생성기로, tmSystem의 경우 선택적 OS 기본 설정 동기화 스크립트를 제공합니다.
TsgcHTMX_FragmentTsgcHTMX_Fragment서버에서 브라우저로 부분 페이지 업데이트를 푸시하기 위한 대역 외(out-of-band) htmx 조각.
TsgcHTMX_RouterTsgcHTMX_Router수신 요청 경로를 일치시키고 이를(HandleRequest를 통해) 해당 경로의 OnRoute 핸들러로 디스패치하는 Routes 라우팅 테이블.
이 페이지의 컴포넌트는 목업이 아닙니다. 하나하나가 지금 이 Delphi 애플리케이션들 안에서 실행되고 있습니다.
