Todos los componentes de la biblioteca, agrupados en ocho familias. Cada uno se renderiza como marcado Bootstrap 5 y funciona igual en Delphi, C++ Builder y .NET. Haz clic en un componente para ver su propia página con uso y ejemplos.
12 componentes
7 componentes
4 componentes
12 componentes
7 componentes
8 componentes
3 componentes
4 componentes
Grids, calendarios y tableros que renderizan tus datasets directamente.
| Componente | Clase | Descripción |
|---|---|---|
| Grid | TsgcHTMLComponent_Grid | Tabla con muchas funciones: orden, filtrado, exportación a CSV/PDF, edición en línea, agrupación, scroll virtual y consultas con IA. |
| DataTable | TsgcHTMLComponent_DataTable | Tabla de datos de más alto nivel que envuelve Grid + Pagination con una barra de herramientas, búsqueda y recuento de filas. |
| Calendar | TsgcHTMLComponent_Calendar | Calendario en cuadrícula mensual con puntos de eventos y navegación anterior/siguiente. |
| Scheduler | TsgcHTMLComponent_Scheduler | Planificador de calendario (vistas de mes / semana) que renderiza eventos por fecha. |
| Timeline | TsgcHTMLComponent_Timeline | Línea de tiempo vertical de eventos con fecha, cargable desde un dataset. |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | Tablero Kanban de columnas y tarjetas arrastrables. |
| Gantt | TsgcHTMLComponent_Gantt | Diagrama de Gantt de cronograma de proyecto con barras de progreso de tareas. |
Visualizaciones basadas en datos creadas a partir de tus propios números.
| Componente | Clase | Descripción |
|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Gráfico Chart.js: líneas, barras, circular, anillo, radar, polar, burbujas y dispersión. |
| Gauge | TsgcHTMLComponent_Gauge | Medidor SVG semicircular con umbrales de color bajo / medio / alto. |
| Diagram | TsgcHTMLComponent_Diagram | Diagrama de flujo de nodos y flechas renderizado como SVG en línea. |
| Map | TsgcHTMLComponent_Map | Mapa interactivo Leaflet.js (mosaicos de OpenStreetMap / CartoDB) con marcadores. |
Todo lo que necesitas para capturar datos, con validación y vinculación a datasets.
| Componente | Clase | Descripción |
|---|---|---|
| Form | TsgcHTMLComponent_Form | Constructor de formularios basado en datos con validación, diseños y generación de formularios con IA. |
| Edit | TsgcHTMLComponent_Edit | Campo de texto de una sola línea con etiqueta, texto de ayuda y vinculación a dataset. |
| Memo | TsgcHTMLComponent_Memo | Campo de área de texto multilínea con etiqueta y texto de ayuda. |
| CheckBox | TsgcHTMLComponent_CheckBox | Casilla de verificación con etiqueta y estado marcado. |
| RadioGroup | TsgcHTMLComponent_RadioGroup | Grupo de opciones de radio mutuamente excluyentes. |
| Select | TsgcHTMLComponent_Select | Lista desplegable con grupos de opciones, selección múltiple y vinculación a dataset. |
| InputGroup | TsgcHTMLComponent_InputGroup | Campo con texto complementario antepuesto / añadido. |
| AutoComplete | TsgcHTMLComponent_AutoComplete | Campo de texto respaldado por un datalist HTML5 de sugerencias. |
| DatePicker | TsgcHTMLComponent_DatePicker | Campo nativo de entrada de fecha / hora / fecha y hora. |
| FileUpload | TsgcHTMLComponent_FileUpload | Zona de subida de archivos por arrastrar y soltar con envío de formulario multipart. |
| RichEditor | TsgcHTMLComponent_RichEditor | Editor de texto enriquecido WYSIWYG basado en Quill con campo de formulario oculto. |
| Rating | TsgcHTMLComponent_Rating | Visualización o entrada de valoración con estrellas (símbolos). |
Tarjetas, multimedia y mosaicos de KPI para componer una página.
| Componente | Clase | Descripción |
|---|---|---|
| Panel | TsgcHTMLComponent_Panel | Panel de tarjeta Bootstrap con cabecera / cuerpo / pie, plegable y desplazable. |
| StatCard | TsgcHTMLComponent_StatCard | Tarjeta de KPI / estadística para paneles con icono, flecha de tendencia y degradado opcional. |
| Accordion | TsgcHTMLComponent_Accordion | Acordeón de colapso vertical con paneles expandibles apilados. |
| Carousel | TsgcHTMLComponent_Carousel | Pase de diapositivas / carrusel de imágenes con indicadores, controles y reproducción automática. |
| Image | TsgcHTMLComponent_Image | Imagen con forma, responsive / carga diferida, enlace a lightbox y pie de foto. |
| Avatar | TsgcHTMLComponent_Avatar | Avatar de usuario (imagen o iniciales) con tamaño, forma y punto de estado de presencia. |
| Video | TsgcHTMLComponent_Video | Reproductor de vídeo / audio HTML5 más un ayudante para incrustar YouTube. |
Diálogos, superficies de estado y estados de carga.
| Componente | Clase | Descripción |
|---|---|---|
| Modal | TsgcHTMLComponent_Modal | Diálogo modal con título / cuerpo / pie, tamaños, centrado y fondo estático. |
| Offcanvas | TsgcHTMLComponent_Offcanvas | Panel deslizante off-canvas desde la izquierda, la derecha, arriba o abajo. |
| Popover | TsgcHTMLComponent_Popover | Burbuja de popover sobre un elemento disparador (clic / hover / foco). |
| Toast | TsgcHTMLComponent_Toast | Notificación toast con cabecera, cuerpo, marca de tiempo y ocultación automática. |
| Snackbar | TsgcHTMLComponent_Snackbar | Snackbar transitorio de estilo Material con una acción opcional. |
| Notification | TsgcHTMLComponent_Notification | Centro de notificaciones desplegable con icono de campana e insignia de no leídas. |
| Spinner | TsgcHTMLComponent_Spinner | Spinner de carga (borde / crecimiento), con tamaño y color. |
| Placeholder | TsgcHTMLComponent_Placeholder | Tarjeta de carga esqueleto / placeholder con un brillo animado. |
UI conversacional, desde simples burbujas hasta un asistente de IA con streaming.
| Componente | Clase | Descripción |
|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | Caja de burbujas de chat estilo tarjeta con una barra de entrada e indicador de escritura. |
| Chat | TsgcHTMLComponent_Chat | Chat estilo WhatsApp con mensajes de texto / imagen / archivo / audio / vídeo, confirmaciones de lectura y respuestas. |
| AIChat | TsgcHTMLComponent_AIChat | Chat de asistente de IA con selector de proveedor / modelo, streaming de tokens y citas de fuentes RAG. |
Flujos de inicio de sesión listos para usar, desde contraseñas hasta passkeys.
| Componente | Clase | Descripción |
|---|---|---|
| Login | TsgcHTMLComponent_Login | Formulario / página de inicio de sesión listo para usar (tarjeta, centrado o a página completa) con recordarme y alertas. |
| SocialLogin | TsgcHTMLComponent_SocialLogin | Panel de botones de inicio de sesión social con OAuth (Google, Facebook, Apple, GitHub, Microsoft y más). |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | Página de retorno / aterrizaje de OAuth en estado de éxito, error o carga con redirección automática. |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | Widget de inicio de sesión y registro con passkey / WebAuthn sin contraseña. |
Las piezas no visuales que sirven las páginas y las mantienen en directo.
| Clase | Función |
|---|---|
TsgcHTMLEngine_Server | Motor HTML vinculado a un TsgcWebSocketHTTPServer que sirve las páginas renderizadas y los assets incrustados. |
TsgcHTMX_Engine_Server | Motor htmx conectado al mismo servidor: intercambios de página parcial por HTTP y push del servidor en directo sobre WebSockets. |
TsgcHTMLPageBuilder | Ensambla los componentes registrados en una página responsive completa (con un editor visual en tiempo de diseño). |
TsgcHTMLTemplate_Bootstrap | Envuelve el contenido del cuerpo en un documento HTML Bootstrap 5 completo con tema, idioma y dirección. |
TsgcHTMLThemeController / TsgcHTMLThemeBuilder | Temas claro / oscuro y un generador de CSS en tiempo de ejecución que escribe variables CSS de Bootstrap. |
TsgcHTMX_Fragment / TsgcHTMX_Router | Fragmentos htmx out-of-band para actualizaciones en directo y ayudantes de enrutamiento de peticiones. |