Gráficos, medidores y treemaps
Series de Chart.js, un medidor SVG, un sparkline y un treemap, todo emitido desde Pascal.
Abrir la demo en vivo →Explora los 93 componentes de UI de sgcHTML en un solo lugar, agrupados en nueve familias. Cada componente se renderiza como marcado Bootstrap 5 y funciona igual en Delphi, C++ Builder y .NET, con el mismo nombre de clase Tsgc* en cada uno. 28 de los 93 componentes son compatibles con datos y se vinculan directamente a un TDataSet / DataSource (o una fuente .NET equivalente); esos llevan una insignia Compatible con datos. Haz clic en cualquier tarjeta para ver su página de componente, o abre la documentación.
Cada componente de abajo se incluye como una muestra ejecutable. El proyecto 08.Components del conjunto de demos 60.HTML renderiza todo este catálogo como una galería en vivo y navegable que puedes manejar en el navegador. Se incluye con la prueba gratuita, así que puedes ejecutar toda la galería localmente contra tus propios datos.
La prueba incluye los proyectos de demo 60.HTML (incluido 08.Components). Una versión alojada y siempre activa de la galería interactiva es un despliegue aparte.
Salta directamente a una familia, o desplázate por todo el catálogo de abajo.
14 componentes
11 componentes
10 componentes
23 componentes
10 componentes
14 componentes
4 componentes
7 componentes
7 clases
Grids, calendarios y tableros que renderizan tus datasets directamente.
TsgcHTMLComponent_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.
TsgcHTMLComponent_DataTableTsgcHTMLComponent_DataTableTabla de datos de más alto nivel que envuelve Grid + Pagination con una barra de herramientas, búsqueda y recuento de filas.
TsgcHTMLComponent_CalendarTsgcHTMLComponent_CalendarCalendario en cuadrícula mensual con puntos de eventos y navegación anterior/siguiente.
TsgcHTMLComponent_SchedulerTsgcHTMLComponent_SchedulerPlanificador de calendario (vistas de mes / semana) que renderiza eventos por fecha.
TsgcHTMLComponent_TimelineTsgcHTMLComponent_TimelineLínea de tiempo vertical de eventos con fecha, cargable desde un dataset.
TsgcHTMLComponent_KanbanBoardTsgcHTMLComponent_KanbanBoardTablero Kanban de columnas y tarjetas arrastrables.
TsgcHTMLComponent_GanttTsgcHTMLComponent_GanttDiagrama de Gantt de cronograma de proyecto con barras de progreso de tareas.
TsgcHTMLComponent_TreeGridTsgcHTMLComponent_TreeGridTabla Bootstrap con filas jerárquicas plegables construidas a partir de pares de nodos Id/ParentId.
TsgcHTMLComponent_PivotTableTsgcHTMLComponent_PivotTableTabla dinámica (pivot) Bootstrap que agrupa filas y columnas y agrega medidas con totales de fila, columna y gran total.
TsgcHTMLComponent_ActivityFeedTsgcHTMLComponent_ActivityFeedFeed de actividad en directo, con lo más reciente primero, marcas de tiempo relativas y envío out-of-band por WebSocket.
TsgcHTMLComponent_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.
Visualizaciones basadas en datos creadas a partir de tus propios números.
TsgcHTMLComponent_ChartTsgcHTMLComponent_ChartGráfico Chart.js: líneas, barras, circular, anillo, radar, polar, burbujas y dispersión.
TsgcHTMLComponent_GaugeTsgcHTMLComponent_GaugeMedidor SVG semicircular con umbrales de color bajo / medio / alto.
TsgcHTMLComponent_DiagramTsgcHTMLComponent_DiagramDiagrama de flujo de nodos y flechas renderizado como SVG en línea.
TsgcHTMLComponent_MapTsgcHTMLComponent_MapMapa interactivo Leaflet.js (mosaicos de OpenStreetMap / CartoDB) con marcadores.
TsgcHTMLComponent_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.
TsgcHTMLComponent_SparklineTsgcHTMLComponent_SparklineSparkline SVG compacto en línea, de líneas, barras o área, a partir de una serie de valores o un dataset vinculado.
TsgcHTMLComponent_CandlestickChartTsgcHTMLComponent_CandlestickChartGráfico de velas OHLC en SVG con mechas, colores de subida/bajada y una franja de volumen opcional.
TsgcHTMLComponent_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.
TsgcHTMLComponent_BarcodeTsgcHTMLComponent_BarcodeCódigo de barras Code 128 SVG en Pascal puro a partir de cualquier texto ASCII, con leyenda legible opcional.
TsgcHTMLComponent_TreeMapTsgcHTMLComponent_TreeMapTreemap squarified renderizado como SVG en línea autocontenido y generado en el servidor, sin necesidad de biblioteca de gráficos.
Todo lo que necesitas para capturar datos, con validación y vinculación a datasets.
TsgcHTMLComponent_FormTsgcHTMLComponent_FormConstructor de formularios basado en datos con validación, diseños y generación de formularios con IA.
TsgcHTMLComponent_EditTsgcHTMLComponent_EditCampo de texto de una sola línea con etiqueta, texto de ayuda y vinculación a dataset.
TsgcHTMLComponent_MemoTsgcHTMLComponent_MemoCampo de área de texto multilínea con etiqueta y texto de ayuda.
TsgcHTMLComponent_CheckBoxTsgcHTMLComponent_CheckBoxCasilla de verificación con etiqueta y estado marcado.
TsgcHTMLComponent_RadioGroupTsgcHTMLComponent_RadioGroupGrupo de opciones de radio mutuamente excluyentes.
TsgcHTMLComponent_SelectTsgcHTMLComponent_SelectLista desplegable con grupos de opciones, selección múltiple y vinculación a dataset.
TsgcHTMLComponent_InputGroupTsgcHTMLComponent_InputGroupCampo con texto complementario antepuesto / añadido.
TsgcHTMLComponent_AutoCompleteTsgcHTMLComponent_AutoCompleteCampo de texto respaldado por un datalist HTML5 de sugerencias.
TsgcHTMLComponent_DatePickerTsgcHTMLComponent_DatePickerCampo nativo de entrada de fecha / hora / fecha y hora.
TsgcHTMLComponent_FileUploadTsgcHTMLComponent_FileUploadZona de subida de archivos por arrastrar y soltar con envío de formulario multipart.
TsgcHTMLComponent_RichEditorTsgcHTMLComponent_RichEditorEditor de texto enriquecido WYSIWYG basado en Quill con campo de formulario oculto.
TsgcHTMLComponent_RatingTsgcHTMLComponent_RatingVisualización o entrada de valoración con estrellas (símbolos).
TsgcHTMLComponent_MultiSelectTsgcHTMLComponent_MultiSelectDesplegable Bootstrap de selección múltiple con búsqueda, chips, opciones agrupadas y vinculación a dataset.
TsgcHTMLComponent_ColorPickerTsgcHTMLComponent_ColorPickerEntrada de color HTML5 nativa con campo de texto hexadecimal opcional y muestras predefinidas.
TsgcHTMLComponent_SliderTsgcHTMLComponent_SliderControl deslizante de rango Bootstrap con una insignia de valor en vivo, etiquetas mín/máx y estilo de color.
TsgcHTMLComponent_TimePickerTsgcHTMLComponent_TimePickerEntrada de hora HTML5 nativa con límites mín/máx y granularidad de segundos.
TsgcHTMLComponent_SignaturePadTsgcHTMLComponent_SignaturePadPanel de firma en canvas basado en eventos de puntero, con acciones Borrar, Deshacer y Guardar.
TsgcHTMLComponent_TransferTsgcHTMLComponent_TransferWidget de doble lista para mover elementos entre un panel disponible y uno asignado, con filtrado y vinculación a dataset.
TsgcHTMLComponent_DateTimePickerTsgcHTMLComponent_DateTimePickerSelector de fecha y hora HTML5 nativo que combina calendario y reloj en un solo campo.
TsgcHTMLComponent_DateRangePickerTsgcHTMLComponent_DateRangePickerCampos emparejados de fecha inicial y final para elegir un rango de fechas, con límites mín/máx.
TsgcHTMLComponent_RangeSliderTsgcHTMLComponent_RangeSliderControl deslizante de doble manija que selecciona un par de valores mínimo/máximo, con insignias de valor en vivo.
TsgcHTMLComponent_CameraScannerTsgcHTMLComponent_CameraScannerPanel de cámara en vivo que escanea códigos de barras y códigos QR con el BarcodeDetector nativo del navegador, sin biblioteca de terceros.
TsgcHTMLComponent_NumPadTsgcHTMLComponent_NumPadTeclado numérico y de moneda táctil para la entrada en punto de venta, con botones de importe rápido y un formato independiente del idioma.
Tarjetas, multimedia y mosaicos de KPI para componer una página.
TsgcHTMLComponent_PanelTsgcHTMLComponent_PanelPanel de tarjeta Bootstrap con cabecera / cuerpo / pie, plegable y desplazable.
TsgcHTMLComponent_StatCardTsgcHTMLComponent_StatCardTarjeta de KPI / estadística para paneles con icono, flecha de tendencia y degradado opcional.
TsgcHTMLComponent_AccordionTsgcHTMLComponent_AccordionAcordeón de colapso vertical con paneles expandibles apilados.
TsgcHTMLComponent_CarouselTsgcHTMLComponent_CarouselPase de diapositivas / carrusel de imágenes con indicadores, controles y reproducción automática.
TsgcHTMLComponent_ImageTsgcHTMLComponent_ImageImagen con forma, responsive / carga diferida, enlace a lightbox y pie de foto.
TsgcHTMLComponent_AvatarTsgcHTMLComponent_AvatarAvatar de usuario (imagen o iniciales) con tamaño, forma y punto de estado de presencia.
TsgcHTMLComponent_VideoTsgcHTMLComponent_VideoReproductor de vídeo / audio HTML5 más un ayudante para incrustar YouTube.
TsgcHTMLComponent_BadgeTsgcHTMLComponent_BadgeInsignia Bootstrap individual con color, forma de píldora, un icono en línea y un modo de punto de notificación posicionado.
TsgcHTMLComponent_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.
TsgcHTMLComponent_ChipTsgcHTMLComponent_ChipChip / etiqueta compacta con un icono opcional, color y un botón de cierre eliminable.
Diálogos, superficies de estado y estados de carga.
TsgcHTMLComponent_ModalTsgcHTMLComponent_ModalDiálogo modal con título / cuerpo / pie, tamaños, centrado y fondo estático.
TsgcHTMLComponent_OffcanvasTsgcHTMLComponent_OffcanvasPanel deslizante off-canvas desde la izquierda, la derecha, arriba o abajo.
TsgcHTMLComponent_PopoverTsgcHTMLComponent_PopoverBurbuja de popover sobre un elemento disparador (clic / hover / foco).
TsgcHTMLComponent_ToastTsgcHTMLComponent_ToastNotificación toast con cabecera, cuerpo, marca de tiempo y ocultación automática.
TsgcHTMLComponent_SnackbarTsgcHTMLComponent_SnackbarSnackbar transitorio de estilo Material con una acción opcional.
TsgcHTMLComponent_NotificationTsgcHTMLComponent_NotificationCentro de notificaciones desplegable con icono de campana e insignia de no leídas.
TsgcHTMLComponent_SpinnerTsgcHTMLComponent_SpinnerSpinner de carga (borde / crecimiento), con tamaño y color.
TsgcHTMLComponent_PlaceholderTsgcHTMLComponent_PlaceholderTarjeta de carga esqueleto / placeholder con un brillo animado.
TsgcHTMLComponent_ContextMenuTsgcHTMLComponent_ContextMenuMenú desplegable de clic derecho acotado a un selector CSS, con iconos, separadores, cabeceras y acciones enrutadas al servidor.
TsgcHTMLComponent_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.
TsgcHTMLComponent_LogViewerTsgcHTMLComponent_LogViewerVisor de log / terminal en streaming con filtro de nivel, búsqueda y desplazamiento automático.
TsgcHTMLComponent_ProgressBarTsgcHTMLComponent_ProgressBarBarra de progreso Bootstrap, rayada y animada, de segmento único o apilada en varios segmentos.
TsgcHTMLComponent_CommandPaletteTsgcHTMLComponent_CommandPaletteLanzador de acciones rápidas Ctrl+K / Cmd+K con filtrado por subcadena y luego difuso, categorías y acciones enrutadas al servidor.
TsgcHTMLComponent_EmptyStateTsgcHTMLComponent_EmptyStateEl panel que muestra una cuadrícula, una lista o un resultado de búsqueda cuando no tiene filas, con icono, título, descripción y hasta dos botones.
UI conversacional, desde simples burbujas hasta un asistente de IA con streaming.
TsgcHTMLComponent_ChatBoxTsgcHTMLComponent_ChatBoxCaja de burbujas de chat estilo tarjeta con una barra de entrada e indicador de escritura.
TsgcHTMLComponent_ChatTsgcHTMLComponent_ChatChat estilo WhatsApp con mensajes de texto / imagen / archivo / audio / vídeo, confirmaciones de lectura y respuestas.
TsgcHTMLComponent_AIChatTsgcHTMLComponent_AIChatChat de asistente de IA con selector de proveedor / modelo, streaming de tokens y citas de fuentes RAG.
TsgcHTMLComponent_PresenceTsgcHTMLComponent_PresenceLista de quién está en línea como pila de avatares o lista, con actualizaciones de estado en vivo.
Flujos de inicio de sesión listos para usar, desde contraseñas hasta passkeys.
TsgcHTMLComponent_LoginTsgcHTMLComponent_LoginFormulario / página de inicio de sesión listo para usar (tarjeta, centrado o a página completa) con recordarme y alertas.
TsgcHTMLComponent_SocialLoginTsgcHTMLComponent_SocialLoginPanel de botones de inicio de sesión social con OAuth (Google, Facebook, Apple, GitHub, Microsoft y más).
TsgcHTMLComponent_OAuthCallbackTsgcHTMLComponent_OAuthCallbackPágina de retorno / aterrizaje de OAuth en estado de éxito, error o carga con redirección automática.
TsgcHTMLComponent_WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginWidget de inicio de sesión y registro con passkey / WebAuthn sin contraseña.
TsgcHTMLComponent_RolesPermissionsTsgcHTMLComponent_RolesPermissionsMatriz de roles / permisos con una casilla por celda y actualizaciones de concesión en vivo por WebSocket.
TsgcHTMLComponent_UserManagementTsgcHTMLComponent_UserManagementTabla de administración de usuarios con roles, estado, búsqueda y un desplegable de acciones por fila.
TsgcHTMLComponent_ImpersonateBannerTsgcHTMLComponent_ImpersonateBannerBanner de suplantación de administrador que se muestra mientras se actúa como otro usuario, con salida en un clic.
Las piezas no visuales que sirven las páginas y las mantienen en directo.
TsgcHTMLEngine_ServerTsgcHTMLEngine_ServerMotor HTML vinculado a un TsgcWebSocketHTTPServer que sirve las páginas renderizadas y los assets incrustados.
TsgcHTMX_Engine_ServerTsgcHTMX_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.
TsgcHTMLPageBuilderTsgcHTMLPageBuilderEnsambla los componentes registrados en una página responsive completa, con un editor visual en tiempo de diseño.
TsgcHTMLThemeControllerTsgcHTMLThemeControllerSelector 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.
TsgcHTMLThemeBuilderTsgcHTMLThemeBuilderGenerador 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.
TsgcHTMX_FragmentTsgcHTMX_FragmentFragmento htmx out-of-band para enviar una actualización de página parcial desde el servidor al navegador.
TsgcHTMX_RouterTsgcHTMX_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.
Los componentes de esta página no son maquetas. Cada uno está funcionando ahora mismo dentro de estas aplicaciones Delphi.
Series de Chart.js, un medidor SVG, un sparkline y un treemap, todo emitido desde Pascal.
Abrir la demo en vivo →
Un tablero de planificación de varios días con dependencias, dibujado en el servidor.
Abrir la demo en vivo →
Mosaicos de categorías, una cesta en vivo, promociones y una pantalla de cliente.
Abrir la demo en vivo →