Matriz de características de sgcHTML — Todos los componentes | eSeGeCe

sgcHTML Matriz de características

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. La mayoría admiten datos y se vinculan directamente a un TDataSet mediante LoadFromDataSet / DataSource (o una fuente .NET equivalente). 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.

Datos y Tablas

11 componentes

Contenido y Diseño

10 componentes

Chat e IA

4 componentes

Autenticación

7 componentes

Datos y Tablas

Grids, calendarios y tableros que renderizan tus datasets directamente.

ComponenteClaseDescripciónAyuda
GridTsgcHTMLComponent_GridTabla con muchas funciones: orden, filtrado, exportación a CSV/PDF, edición en línea, agrupación, scroll virtual y consultas con IA.Docs
DataTableTsgcHTMLComponent_DataTableTabla de datos de más alto nivel que envuelve Grid + Pagination con una barra de herramientas, búsqueda y recuento de filas.Docs
CalendarTsgcHTMLComponent_CalendarCalendario en cuadrícula mensual con puntos de eventos y navegación anterior/siguiente.Docs
SchedulerTsgcHTMLComponent_SchedulerPlanificador de calendario (vistas de mes / semana) que renderiza eventos por fecha.Docs
TimelineTsgcHTMLComponent_TimelineLínea de tiempo vertical de eventos con fecha, cargable desde un dataset.Docs
KanbanBoardTsgcHTMLComponent_KanbanBoardTablero Kanban de columnas y tarjetas arrastrables.Docs
GanttTsgcHTMLComponent_GanttDiagrama de Gantt de cronograma de proyecto con barras de progreso de tareas.Docs
TreeGridTsgcHTMLComponent_TreeGridTabla Bootstrap con filas jerárquicas plegables construidas a partir de pares de nodos Id/ParentId.Docs
PivotTableTsgcHTMLComponent_PivotTableTabla dinámica (pivot) Bootstrap que agrupa filas y columnas y agrega medidas con totales de fila, columna y gran total.Docs
ActivityFeedTsgcHTMLComponent_ActivityFeedFeed de actividad en directo, con lo más reciente primero, marcas de tiempo relativas y envío out-of-band por WebSocket.Docs
AuditTrailTsgcHTMLComponent_AuditTrailFeed cronológico de registro de auditoría de acciones de usuario y del sistema con actor, acción, objetivo y marca de tiempo.Docs

Gráficos y Visualización

Visualizaciones basadas en datos creadas a partir de tus propios números.

ComponenteClaseDescripciónAyuda
ChartTsgcHTMLComponent_ChartGráfico Chart.js: líneas, barras, circular, anillo, radar, polar, burbujas y dispersión.Docs
GaugeTsgcHTMLComponent_GaugeMedidor SVG semicircular con umbrales de color bajo / medio / alto.Docs
DiagramTsgcHTMLComponent_DiagramDiagrama de flujo de nodos y flechas renderizado como SVG en línea.Docs
MapTsgcHTMLComponent_MapMapa interactivo Leaflet.js (mosaicos de OpenStreetMap / CartoDB) con marcadores.Docs
HeatmapTsgcHTMLComponent_HeatmapCuadrícula de mapa de calor SVG con escala de color a partir de valores de celda o un dataset vinculado, con leyenda y etiquetas de fila/columna.Docs
SparklineTsgcHTMLComponent_SparklineSparkline SVG compacto en línea, de líneas, barras o área, a partir de una serie de valores o un dataset vinculado.Docs
CandlestickChartTsgcHTMLComponent_CandlestickChartGráfico de velas OHLC en SVG con mechas, colores de subida/bajada y una franja de volumen opcional.Docs
QRCodeTsgcHTMLComponent_QRCodeCódigo QR SVG ISO/IEC 18004 en Pascal puro a partir de cualquier texto o URL, con nivel de corrección de errores seleccionable.Docs
BarcodeTsgcHTMLComponent_BarcodeCódigo de barras Code 128 SVG en Pascal puro a partir de cualquier texto ASCII, con leyenda legible opcional.Docs
TreeMapTsgcHTMLComponent_TreeMapTreemap squarified renderizado como SVG en línea autocontenido y generado en el servidor, sin necesidad de biblioteca de gráficos.Docs

Formularios y Entradas

Todo lo que necesitas para capturar datos, con validación y vinculación a datasets.

ComponenteClaseDescripciónAyuda
FormTsgcHTMLComponent_FormConstructor de formularios basado en datos con validación, diseños y generación de formularios con IA.Docs
EditTsgcHTMLComponent_EditCampo de texto de una sola línea con etiqueta, texto de ayuda y vinculación a dataset.Docs
MemoTsgcHTMLComponent_MemoCampo de área de texto multilínea con etiqueta y texto de ayuda.Docs
CheckBoxTsgcHTMLComponent_CheckBoxCasilla de verificación con etiqueta y estado marcado.Docs
RadioGroupTsgcHTMLComponent_RadioGroupGrupo de opciones de radio mutuamente excluyentes.Docs
SelectTsgcHTMLComponent_SelectLista desplegable con grupos de opciones, selección múltiple y vinculación a dataset.Docs
InputGroupTsgcHTMLComponent_InputGroupCampo con texto complementario antepuesto / añadido.Docs
AutoCompleteTsgcHTMLComponent_AutoCompleteCampo de texto respaldado por un datalist HTML5 de sugerencias.Docs
DatePickerTsgcHTMLComponent_DatePickerCampo nativo de entrada de fecha / hora / fecha y hora.Docs
FileUploadTsgcHTMLComponent_FileUploadZona de subida de archivos por arrastrar y soltar con envío de formulario multipart.Docs
RichEditorTsgcHTMLComponent_RichEditorEditor de texto enriquecido WYSIWYG basado en Quill con campo de formulario oculto.Docs
RatingTsgcHTMLComponent_RatingVisualización o entrada de valoración con estrellas (símbolos).Docs
MultiSelectTsgcHTMLComponent_MultiSelectDesplegable Bootstrap de selección múltiple con búsqueda, chips, opciones agrupadas y vinculación a dataset.Docs
ColorPickerTsgcHTMLComponent_ColorPickerEntrada de color HTML5 nativa con campo de texto hexadecimal opcional y muestras predefinidas.Docs
SliderTsgcHTMLComponent_SliderControl deslizante de rango Bootstrap con una insignia de valor en vivo, etiquetas mín/máx y estilo de color.Docs
TimePickerTsgcHTMLComponent_TimePickerEntrada de hora HTML5 nativa con límites mín/máx y granularidad de segundos.Docs
SignaturePadTsgcHTMLComponent_SignaturePadPanel de firma en canvas basado en eventos de puntero, con acciones Borrar, Deshacer y Guardar.Docs
TransferTsgcHTMLComponent_TransferWidget de doble lista para mover elementos entre un panel disponible y uno asignado, con filtrado y vinculación a dataset.Docs
DateTimePickerTsgcHTMLComponent_DateTimePickerSelector de fecha y hora HTML5 nativo que combina calendario y reloj en un solo campo.Docs
DateRangePickerTsgcHTMLComponent_DateRangePickerCampos emparejados de fecha inicial y final para elegir un rango de fechas, con límites mín/máx.Docs
RangeSliderTsgcHTMLComponent_RangeSliderControl deslizante de doble manija que selecciona un par de valores mínimo/máximo, con insignias de valor en vivo.Docs

Contenido y Diseño

Tarjetas, multimedia y mosaicos de KPI para componer una página.

ComponenteClaseDescripciónAyuda
PanelTsgcHTMLComponent_PanelPanel de tarjeta Bootstrap con cabecera / cuerpo / pie, plegable y desplazable.Docs
StatCardTsgcHTMLComponent_StatCardTarjeta de KPI / estadística para paneles con icono, flecha de tendencia y degradado opcional.Docs
AccordionTsgcHTMLComponent_AccordionAcordeón de colapso vertical con paneles expandibles apilados.Docs
CarouselTsgcHTMLComponent_CarouselPase de diapositivas / carrusel de imágenes con indicadores, controles y reproducción automática.Docs
ImageTsgcHTMLComponent_ImageImagen con forma, responsive / carga diferida, enlace a lightbox y pie de foto.Docs
AvatarTsgcHTMLComponent_AvatarAvatar de usuario (imagen o iniciales) con tamaño, forma y punto de estado de presencia.Docs
VideoTsgcHTMLComponent_VideoReproductor de vídeo / audio HTML5 más un ayudante para incrustar YouTube.Docs
BadgeTsgcHTMLComponent_BadgeInsignia Bootstrap individual con color, forma de píldora, un icono en línea y un modo de punto de notificación posicionado.Docs
PDFViewerTsgcHTMLComponent_PDFViewerVisor de PDF integrado en la página basado en pdf.js, con navegación de páginas, zoom, búsqueda, descarga e impresión.Docs
ChipTsgcHTMLComponent_ChipChip / etiqueta compacta con un icono opcional, color y un botón de cierre eliminable.Docs

Superposiciones y Avisos

Diálogos, superficies de estado y estados de carga.

ComponenteClaseDescripciónAyuda
ModalTsgcHTMLComponent_ModalDiálogo modal con título / cuerpo / pie, tamaños, centrado y fondo estático.Docs
OffcanvasTsgcHTMLComponent_OffcanvasPanel deslizante off-canvas desde la izquierda, la derecha, arriba o abajo.Docs
PopoverTsgcHTMLComponent_PopoverBurbuja de popover sobre un elemento disparador (clic / hover / foco).Docs
ToastTsgcHTMLComponent_ToastNotificación toast con cabecera, cuerpo, marca de tiempo y ocultación automática.Docs
SnackbarTsgcHTMLComponent_SnackbarSnackbar transitorio de estilo Material con una acción opcional.Docs
NotificationTsgcHTMLComponent_NotificationCentro de notificaciones desplegable con icono de campana e insignia de no leídas.Docs
SpinnerTsgcHTMLComponent_SpinnerSpinner de carga (borde / crecimiento), con tamaño y color.Docs
PlaceholderTsgcHTMLComponent_PlaceholderTarjeta de carga esqueleto / placeholder con un brillo animado.Docs
ContextMenuTsgcHTMLComponent_ContextMenuMenú desplegable de clic derecho acotado a un selector CSS, con iconos, separadores, cabeceras y acciones enrutadas al servidor.Docs
JobProgressTsgcHTMLComponent_JobProgressLista en directo de barras de progreso de tareas en segundo plano con insignias de estado, botones de cancelar y actualizaciones de fragmento out-of-band.Docs
LogViewerTsgcHTMLComponent_LogViewerVisor de log / terminal en streaming con filtro de nivel, búsqueda y desplazamiento automático.Docs
ProgressBarTsgcHTMLComponent_ProgressBarBarra de progreso Bootstrap, rayada y animada, de segmento único o apilada en varios segmentos.Docs

Chat e IA

UI conversacional, desde simples burbujas hasta un asistente de IA con streaming.

ComponenteClaseDescripciónAyuda
ChatBoxTsgcHTMLComponent_ChatBoxCaja de burbujas de chat estilo tarjeta con una barra de entrada e indicador de escritura.Docs
ChatTsgcHTMLComponent_ChatChat estilo WhatsApp con mensajes de texto / imagen / archivo / audio / vídeo, confirmaciones de lectura y respuestas.Docs
AIChatTsgcHTMLComponent_AIChatChat de asistente de IA con selector de proveedor / modelo, streaming de tokens y citas de fuentes RAG.Docs
PresenceTsgcHTMLComponent_PresenceLista de "quién está en línea" como pila de avatares o lista, con actualizaciones de estado en vivo.Docs

Autenticación

Flujos de inicio de sesión listos para usar, desde contraseñas hasta passkeys.

ComponenteClaseDescripciónAyuda
LoginTsgcHTMLComponent_LoginFormulario / página de inicio de sesión listo para usar (tarjeta, centrado o a página completa) con recordarme y alertas.Docs
SocialLoginTsgcHTMLComponent_SocialLoginPanel de botones de inicio de sesión social con OAuth (Google, Facebook, Apple, GitHub, Microsoft y más).Docs
OAuthCallbackTsgcHTMLComponent_OAuthCallbackPágina de retorno / aterrizaje de OAuth en estado de éxito, error o carga con redirección automática.Docs
WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginWidget de inicio de sesión y registro con passkey / WebAuthn sin contraseña.Docs
RolesPermissionsTsgcHTMLComponent_RolesPermissionsMatriz de roles / permisos con una casilla por celda y actualizaciones de concesión en vivo por WebSocket.Docs
UserManagementTsgcHTMLComponent_UserManagementTabla de administración de usuarios con roles, estado, búsqueda y un desplegable de acciones por fila.Docs
ImpersonateBannerTsgcHTMLComponent_ImpersonateBannerBanner de suplantación de administrador que se muestra mientras se actúa como otro usuario, con salida en un clic.Docs

Motor, servidor y temas

Las piezas no visuales que sirven las páginas y las mantienen en directo.

ComponenteClaseDescripciónAyuda
EngineServerTsgcHTMLEngine_ServerMotor HTML vinculado a un TsgcWebSocketHTTPServer que sirve las páginas renderizadas y los assets incrustados.Docs
HTMXEngineTsgcHTMX_Engine_ServerMotor 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
PageBuilderTsgcHTMLPageBuilderEnsambla los componentes registrados en una página responsive completa (con un editor visual en tiempo de diseño).Docs
TemplateBootstrapTsgcHTMLTemplate_BootstrapEnvuelve el contenido del cuerpo en un documento HTML Bootstrap 5 completo con tema, idioma y dirección.Docs
ThemeControllerTsgcHTMLThemeControllerSelector 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
ThemeBuilderTsgcHTMLThemeBuilderGenerador 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
HTMXFragmentTsgcHTMX_FragmentFragmento htmx out-of-band para enviar una actualización de página parcial desde el servidor al navegador.Docs
HTMXRouterTsgcHTMX_RouterTabla 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
La mejor opción: All-AccessTodos los productos de eSeGeCe, con Premium Support incluido, desde €1,059 al año.
Ver precios de All-Access

Construye con sgcHTML

Descarga la prueba gratuita y empieza a componer interfaces web en Delphi, C++ Builder o .NET.