Todos los componentes de la biblioteca, agrupados en nueve 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. Todos los componentes aplican codificación automática de salida de HTML, atributos, JavaScript y URL, además de saneamiento de URL, de modo que el contenido dinámico se escapa por defecto para protegerte frente a XSS e inyección.
13 componentes
7 componentes
4 componentes
12 componentes
7 componentes
8 componentes
3 componentes
4 componentes
8 clases
Grids, calendarios y tableros que renderizan tus datasets directamente.
| Componente | Clase | Descripción | Ayuda |
|---|---|---|---|
| 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. | Docs |
| 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. | Docs |
| Calendar | TsgcHTMLComponent_Calendar | Calendario en cuadrícula mensual con puntos de eventos y navegación anterior/siguiente. | Docs |
| Scheduler | TsgcHTMLComponent_Scheduler | Planificador de calendario (vistas de mes / semana) que renderiza eventos por fecha. | Docs |
| Timeline | TsgcHTMLComponent_Timeline | Línea de tiempo vertical de eventos con fecha, cargable desde un dataset. | Docs |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | Tablero Kanban de columnas y tarjetas arrastrables. | Docs |
| Gantt | TsgcHTMLComponent_Gantt | Diagrama de Gantt de cronograma de proyecto con barras de progreso de tareas. | Docs |
Visualizaciones basadas en datos creadas a partir de tus propios números.
| Componente | Clase | Descripción | Ayuda |
|---|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Gráfico Chart.js: líneas, barras, circular, anillo, radar, polar, burbujas y dispersión. | Docs |
| Gauge | TsgcHTMLComponent_Gauge | Medidor SVG semicircular con umbrales de color bajo / medio / alto. | Docs |
| Diagram | TsgcHTMLComponent_Diagram | Diagrama de flujo de nodos y flechas renderizado como SVG en línea. | Docs |
| Map | TsgcHTMLComponent_Map | Mapa interactivo Leaflet.js (mosaicos de OpenStreetMap / CartoDB) con marcadores. | Docs |
Todo lo que necesitas para capturar datos, con validación y vinculación a datasets.
| Componente | Clase | Descripción | Ayuda |
|---|---|---|---|
| Form | TsgcHTMLComponent_Form | Constructor de formularios basado en datos con validación, diseños y generación de formularios con IA. | Docs |
| Edit | TsgcHTMLComponent_Edit | Campo de texto de una sola línea con etiqueta, texto de ayuda y vinculación a dataset. | Docs |
| Memo | TsgcHTMLComponent_Memo | Campo de área de texto multilínea con etiqueta y texto de ayuda. | Docs |
| CheckBox | TsgcHTMLComponent_CheckBox | Casilla de verificación con etiqueta y estado marcado. | Docs |
| RadioGroup | TsgcHTMLComponent_RadioGroup | Grupo de opciones de radio mutuamente excluyentes. | Docs |
| Select | TsgcHTMLComponent_Select | Lista desplegable con grupos de opciones, selección múltiple y vinculación a dataset. | Docs |
| InputGroup | TsgcHTMLComponent_InputGroup | Campo con texto complementario antepuesto / añadido. | Docs |
| AutoComplete | TsgcHTMLComponent_AutoComplete | Campo de texto respaldado por un datalist HTML5 de sugerencias. | Docs |
| DatePicker | TsgcHTMLComponent_DatePicker | Campo nativo de entrada de fecha / hora / fecha y hora. | Docs |
| FileUpload | TsgcHTMLComponent_FileUpload | Zona de subida de archivos por arrastrar y soltar con envío de formulario multipart. | Docs |
| RichEditor | TsgcHTMLComponent_RichEditor | Editor de texto enriquecido WYSIWYG basado en Quill con campo de formulario oculto. | Docs |
| Rating | TsgcHTMLComponent_Rating | Visualización o entrada de valoración con estrellas (símbolos). | Docs |
Tarjetas, multimedia y mosaicos de KPI para componer una página.
| Componente | Clase | Descripción | Ayuda |
|---|---|---|---|
| Panel | TsgcHTMLComponent_Panel | Panel de tarjeta Bootstrap con cabecera / cuerpo / pie, plegable y desplazable. | Docs |
| StatCard | TsgcHTMLComponent_StatCard | Tarjeta de KPI / estadística para paneles con icono, flecha de tendencia y degradado opcional. | Docs |
| Accordion | TsgcHTMLComponent_Accordion | Acordeón de colapso vertical con paneles expandibles apilados. | Docs |
| Carousel | TsgcHTMLComponent_Carousel | Pase de diapositivas / carrusel de imágenes con indicadores, controles y reproducción automática. | Docs |
| Image | TsgcHTMLComponent_Image | Imagen con forma, responsive / carga diferida, enlace a lightbox y pie de foto. | Docs |
| Avatar | TsgcHTMLComponent_Avatar | Avatar de usuario (imagen o iniciales) con tamaño, forma y punto de estado de presencia. | Docs |
| Video | TsgcHTMLComponent_Video | Reproductor de vídeo / audio HTML5 más un ayudante para incrustar YouTube. | Docs |
Diálogos, superficies de estado y estados de carga.
| Componente | Clase | Descripción | Ayuda |
|---|---|---|---|
| Modal | TsgcHTMLComponent_Modal | Diálogo modal con título / cuerpo / pie, tamaños, centrado y fondo estático. | Docs |
| Offcanvas | TsgcHTMLComponent_Offcanvas | Panel deslizante off-canvas desde la izquierda, la derecha, arriba o abajo. | Docs |
| Popover | TsgcHTMLComponent_Popover | Burbuja de popover sobre un elemento disparador (clic / hover / foco). | Docs |
| Toast | TsgcHTMLComponent_Toast | Notificación toast con cabecera, cuerpo, marca de tiempo y ocultación automática. | Docs |
| Snackbar | TsgcHTMLComponent_Snackbar | Snackbar transitorio de estilo Material con una acción opcional. | Docs |
| Notification | TsgcHTMLComponent_Notification | Centro de notificaciones desplegable con icono de campana e insignia de no leídas. | Docs |
| Spinner | TsgcHTMLComponent_Spinner | Spinner de carga (borde / crecimiento), con tamaño y color. | Docs |
| Placeholder | TsgcHTMLComponent_Placeholder | Tarjeta de carga esqueleto / placeholder con un brillo animado. | Docs |
UI conversacional, desde simples burbujas hasta un asistente de IA con streaming.
| Componente | Clase | Descripción | Ayuda |
|---|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | Caja de burbujas de chat estilo tarjeta con una barra de entrada e indicador de escritura. | Docs |
| Chat | TsgcHTMLComponent_Chat | Chat estilo WhatsApp con mensajes de texto / imagen / archivo / audio / vídeo, confirmaciones de lectura y respuestas. | Docs |
| AIChat | TsgcHTMLComponent_AIChat | Chat de asistente de IA con selector de proveedor / modelo, streaming de tokens y citas de fuentes RAG. | Docs |
Flujos de inicio de sesión listos para usar, desde contraseñas hasta passkeys.
| Componente | Clase | Descripción | Ayuda |
|---|---|---|---|
| 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. | Docs |
| SocialLogin | TsgcHTMLComponent_SocialLogin | Panel de botones de inicio de sesión social con OAuth (Google, Facebook, Apple, GitHub, Microsoft y más). | Docs |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | Página de retorno / aterrizaje de OAuth en estado de éxito, error o carga con redirección automática. | Docs |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | Widget de inicio de sesión y registro con passkey / WebAuthn sin contraseña. | Docs |
Las piezas no visuales que sirven las páginas y las mantienen en directo.
| Componente | Clase | Descripción | Ayuda |
|---|---|---|---|
| EngineServer | TsgcHTMLEngine_Server | Motor HTML vinculado a un TsgcWebSocketHTTPServer que sirve las páginas renderizadas y los assets incrustados. | Docs |
| HTMXEngine | TsgcHTMX_Engine_Server | Motor htmx conectado al mismo servidor. Engancha los manejadores de HTTP y WebSocket, despacha las peticiones y los mensajes entrantes, y envía o difunde fragmentos de HTML a los navegadores conectados en tiempo real (DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment). | Docs |
| PageBuilder | TsgcHTMLPageBuilder | Ensambla los componentes registrados en una página responsive completa (con un editor visual en tiempo de diseño). | Docs |
| TemplateBootstrap | TsgcHTMLTemplate_Bootstrap | Envuelve el contenido del cuerpo en un documento HTML Bootstrap 5 completo con tema, idioma y dirección. | Docs |
| ThemeController | TsgcHTMLThemeController | Selector de temas en tiempo de ejecución cuya propiedad Theme (ptDefault, ptDark, ptDarkPro) aplica el tema seleccionado y la hoja de estilos compartida a la página. | Docs |
| ThemeBuilder | TsgcHTMLThemeBuilder | Generador de CSS cuyo Mode (tmLight, tmDark, tmSystem) escribe variables CSS de Bootstrap a partir de los valores de las propiedades, con un script opcional de sincronización con la preferencia del sistema operativo para tmSystem. | Docs |
| HTMXFragment | TsgcHTMX_Fragment | Fragmento htmx out-of-band para enviar una actualización de página parcial desde el servidor al navegador. | Docs |
| HTMXRouter | TsgcHTMX_Router | Tabla de enrutamiento de Routes que hace coincidir la ruta de una petición entrante y la despacha (mediante HandleRequest) al manejador OnRoute de esa ruta. | Docs |