Gráficos, medidores e tree maps
Séries do Chart.js, um medidor SVG, um sparkline e um tree map, todos emitidos a partir do Pascal.
Abrir a demo ao vivo →
Explore todos os 93 componentes de UI do sgcHTML em um só lugar, agrupados em nove famílias. Cada componente renderiza para markup Bootstrap 5 e funciona da mesma forma em Delphi, C++ Builder e .NET, com o mesmo nome de classe Tsgc* em cada um. 28 dos 93 componentes são data-aware e se vinculam diretamente a um TDataSet / DataSource (ou uma fonte .NET equivalente); esses trazem um selo Data-aware. Clique em qualquer card para sua página de componente, ou abra a documentação.
Cada componente abaixo é fornecido como um exemplo executável. O projeto 08.Components no conjunto de demos 60.HTML renderiza todo este catálogo como uma galeria ao vivo e navegável que você pode operar no navegador. Ele está incluído na versão de avaliação gratuita, então você pode executar a galeria inteira localmente com seus próprios dados.
A versão de avaliação traz os projetos de demo 60.HTML (incluindo 08.Components). Uma versão hospedada e sempre online da galeria interativa é uma implantação separada.
Vá direto a uma família, ou role todo o catálogo abaixo.
14 componentes
11 componentes
10 componentes
23 componentes
10 componentes
14 componentes
4 componentes
7 componentes
7 classes
Grids, calendários e quadros que renderizam seus datasets diretamente.
TsgcHTMLComponent_GridTsgcHTMLComponent_GridTabela rica em recursos: ordenação, filtro, exportação CSV/PDF, edição inline, agrupamento, scroll virtual e consulta por IA.
TsgcHTMLComponent_DataTableTsgcHTMLComponent_DataTableTabela de dados de nível superior que envolve Grid + Pagination com uma barra de ferramentas, busca e contagem de linhas.
TsgcHTMLComponent_CalendarTsgcHTMLComponent_CalendarCalendário em grade mensal com pontos de eventos e navegação anterior/próximo.
TsgcHTMLComponent_SchedulerTsgcHTMLComponent_SchedulerAgendador de calendário (visualizações por mês / semana) renderizando eventos por data.
TsgcHTMLComponent_TimelineTsgcHTMLComponent_TimelineLinha do tempo vertical de eventos datados, carregável a partir de um dataset.
TsgcHTMLComponent_KanbanBoardTsgcHTMLComponent_KanbanBoardQuadro Kanban de colunas e cards arrastáveis.
TsgcHTMLComponent_GanttTsgcHTMLComponent_GanttGráfico de cronograma de projeto Gantt com barras de progresso de tarefas.
TsgcHTMLComponent_TreeGridTsgcHTMLComponent_TreeGridTabela Bootstrap com linhas hierárquicas recolhíveis, construída a partir de pares de nós Id/ParentId.
TsgcHTMLComponent_PivotTableTsgcHTMLComponent_PivotTableTabela dinâmica (pivot) Bootstrap que agrupa linhas e colunas e agrega medidas com totais de linha, coluna e geral.
TsgcHTMLComponent_ActivityFeedTsgcHTMLComponent_ActivityFeedFeed de atividades ao vivo, mais recentes primeiro, com carimbos de tempo relativos e envio via WebSocket out-of-band.
TsgcHTMLComponent_AuditTrailTsgcHTMLComponent_AuditTrailFeed cronológico de log de auditoria de ações de usuários e do sistema, com autor, ação, alvo e data/hora.
Visuais orientados a dados, construídos a partir dos seus próprios números.
TsgcHTMLComponent_ChartTsgcHTMLComponent_ChartGráfico Chart.js: linha, barra, pizza, rosca, radar, polar, bolha e dispersão.
TsgcHTMLComponent_GaugeTsgcHTMLComponent_GaugeMedidor SVG semicircular com limiares de cor baixo / médio / alto.
TsgcHTMLComponent_DiagramTsgcHTMLComponent_DiagramDiagrama de fluxo de nós e setas renderizado como SVG inline.
TsgcHTMLComponent_MapTsgcHTMLComponent_MapMapa interativo Leaflet.js (tiles OpenStreetMap / CartoDB) com marcadores.
TsgcHTMLComponent_HeatmapTsgcHTMLComponent_HeatmapGrade de mapa de calor SVG com escala de cores a partir de valores de célula ou de um dataset vinculado, com legenda e rótulos de linha/coluna.
TsgcHTMLComponent_SparklineTsgcHTMLComponent_SparklineSparkline SVG inline compacto de linha, barra ou área a partir de uma série de valores ou de um dataset vinculado.
TsgcHTMLComponent_CandlestickChartTsgcHTMLComponent_CandlestickChartGráfico de candlestick OHLC em SVG com pavios, cores de alta/baixa e uma faixa de volume opcional.
TsgcHTMLComponent_QRCodeTsgcHTMLComponent_QRCodeCódigo QR SVG ISO/IEC 18004 em Pascal puro a partir de qualquer texto ou URL, com nível de correção de erro selecionável.
TsgcHTMLComponent_BarcodeTsgcHTMLComponent_BarcodeCódigo de barras Code 128 SVG em Pascal puro a partir de qualquer texto ASCII, com legenda legível opcional.
TsgcHTMLComponent_TreeMapTsgcHTMLComponent_TreeMapTreemap "squarified" renderizado como um SVG inline autocontido gerado no servidor, sem necessidade de biblioteca de gráficos.
Tudo o que você precisa para capturar dados, com validação e vinculação a dataset.
TsgcHTMLComponent_FormTsgcHTMLComponent_FormConstrutor de formulários orientado a dados com validação, layouts e geração de formulários por IA.
TsgcHTMLComponent_EditTsgcHTMLComponent_EditEntrada de texto de linha única com label, texto de ajuda e vinculação a dataset.
TsgcHTMLComponent_MemoTsgcHTMLComponent_MemoEntrada de área de texto multilinha com label e texto de ajuda.
TsgcHTMLComponent_CheckBoxTsgcHTMLComponent_CheckBoxEntrada de checkbox com label e estado marcado.
TsgcHTMLComponent_RadioGroupTsgcHTMLComponent_RadioGroupGrupo de opções de rádio mutuamente exclusivas.
TsgcHTMLComponent_SelectTsgcHTMLComponent_SelectDropdown de seleção com grupos de opções, seleção múltipla e vinculação a dataset.
TsgcHTMLComponent_InputGroupTsgcHTMLComponent_InputGroupEntrada com texto de addon antes / depois.
TsgcHTMLComponent_AutoCompleteTsgcHTMLComponent_AutoCompleteEntrada de texto apoiada por uma datalist HTML5 de sugestões.
TsgcHTMLComponent_DatePickerTsgcHTMLComponent_DatePickerCampo de entrada nativo de data / hora / datetime.
TsgcHTMLComponent_FileUploadTsgcHTMLComponent_FileUploadZona de upload de arquivos por arrastar e soltar com envio de formulário multipart.
TsgcHTMLComponent_RichEditorTsgcHTMLComponent_RichEditorEditor de rich-text WYSIWYG baseado em Quill com campo de formulário oculto.
TsgcHTMLComponent_RatingTsgcHTMLComponent_RatingExibição ou entrada de avaliação por estrelas (símbolo).
TsgcHTMLComponent_MultiSelectTsgcHTMLComponent_MultiSelectUm dropdown de seleção múltipla Bootstrap pesquisável com chips, opções agrupadas e vinculação a dataset.
TsgcHTMLComponent_ColorPickerTsgcHTMLComponent_ColorPickerUma entrada de cor HTML5 nativa com campo de texto hexadecimal opcional e amostras predefinidas.
TsgcHTMLComponent_SliderTsgcHTMLComponent_SliderUm slider de intervalo Bootstrap com badge de valor ao vivo, rótulos de mín/máx e estilo de cor.
TsgcHTMLComponent_TimePickerTsgcHTMLComponent_TimePickerUma entrada de hora HTML5 nativa com limites de mín/máx e granularidade de segundos.
TsgcHTMLComponent_SignaturePadTsgcHTMLComponent_SignaturePadUm bloco de assinatura em canvas baseado em pointer-events com ações de Limpar, Desfazer e Salvar.
TsgcHTMLComponent_TransferTsgcHTMLComponent_TransferWidget de lista dupla para mover itens entre um painel de disponíveis e um de atribuídos, com filtragem e vinculação a dataset.
TsgcHTMLComponent_DateTimePickerTsgcHTMLComponent_DateTimePickerSeletor nativo de data e hora do HTML5, combinando calendário e relógio em um único campo.
TsgcHTMLComponent_DateRangePickerTsgcHTMLComponent_DateRangePickerCampos pareados de data inicial e final para escolher um intervalo de datas, com limites mín/máx.
TsgcHTMLComponent_RangeSliderTsgcHTMLComponent_RangeSliderSlider de dois controles que seleciona um par de valores mínimo/máximo, com badges de valor ao vivo.
TsgcHTMLComponent_CameraScannerTsgcHTMLComponent_CameraScannerPainel de câmera ao vivo que escaneia códigos de barras e QR codes com o BarcodeDetector nativo do navegador, sem biblioteca de terceiros.
TsgcHTMLComponent_NumPadTsgcHTMLComponent_NumPadTeclado numérico e de moeda para toque, feito para entrada em ponto de venda, com botões de valor rápido e formatação independente de localidade.
Cards, mídia e blocos de KPI para compor uma página.
TsgcHTMLComponent_PanelTsgcHTMLComponent_PanelPainel de card Bootstrap com cabeçalho / corpo / rodapé, recolhível e rolável.
TsgcHTMLComponent_StatCardTsgcHTMLComponent_StatCardCard de KPI / estatística de dashboard com ícone, seta de tendência e gradiente opcional.
TsgcHTMLComponent_AccordionTsgcHTMLComponent_AccordionAcordeão de colapso vertical com painéis expansíveis empilhados.
TsgcHTMLComponent_CarouselTsgcHTMLComponent_CarouselSlideshow de imagens / carrossel com indicadores, controles e reprodução automática.
TsgcHTMLComponent_ImageTsgcHTMLComponent_ImageImagem com forma, responsiva / lazy-load, link de lightbox e legenda.
TsgcHTMLComponent_AvatarTsgcHTMLComponent_AvatarAvatar de usuário (imagem ou iniciais) com tamanho, forma e ponto de status de presença.
TsgcHTMLComponent_VideoTsgcHTMLComponent_VideoPlayer de vídeo / áudio HTML5 mais um helper de incorporação do YouTube.
TsgcHTMLComponent_BadgeTsgcHTMLComponent_BadgeBadge Bootstrap único com cor, formato pílula, um ícone inline e um modo de ponto de notificação posicionado.
TsgcHTMLComponent_PDFViewerTsgcHTMLComponent_PDFViewerVisualizador de PDF embutido na página, baseado em pdf.js, com navegação de páginas, zoom, busca, download e impressão.
TsgcHTMLComponent_ChipTsgcHTMLComponent_ChipChip / tag compacto com ícone opcional, cor e um botão de fechar removível.
Diálogos, superfícies de status e estados de carregamento.
TsgcHTMLComponent_ModalTsgcHTMLComponent_ModalDiálogo modal com título / corpo / rodapé, tamanhos, centralizado e backdrop estático.
TsgcHTMLComponent_OffcanvasTsgcHTMLComponent_OffcanvasPainel deslizante off-canvas pela esquerda, direita, topo ou base.
TsgcHTMLComponent_PopoverTsgcHTMLComponent_PopoverBalão popover sobre um elemento de gatilho (clique / hover / foco).
TsgcHTMLComponent_ToastTsgcHTMLComponent_ToastNotificação toast com cabeçalho, corpo, carimbo de tempo e ocultação automática.
TsgcHTMLComponent_SnackbarTsgcHTMLComponent_SnackbarSnackbar transitório estilo Material com uma ação opcional.
TsgcHTMLComponent_NotificationTsgcHTMLComponent_NotificationCentro de notificações em dropdown com ícone de sino e um badge de não lidas.
TsgcHTMLComponent_SpinnerTsgcHTMLComponent_SpinnerSpinner de carregamento (borda / crescimento), dimensionado e colorido.
TsgcHTMLComponent_PlaceholderTsgcHTMLComponent_PlaceholderCard de carregamento esqueleto / placeholder com um brilho animado.
TsgcHTMLComponent_ContextMenuTsgcHTMLComponent_ContextMenuMenu dropdown de clique direito com escopo definido por um seletor CSS, com ícones, divisores, cabeçalhos e ações roteadas pelo servidor.
TsgcHTMLComponent_JobProgressTsgcHTMLComponent_JobProgressLista ao vivo de barras de progresso de jobs em segundo plano com badges de status, botões de cancelar e atualizações de fragmento out-of-band.
TsgcHTMLComponent_LogViewerTsgcHTMLComponent_LogViewerVisualizador de log / terminal em streaming com filtro de nível, busca e rolagem automática.
TsgcHTMLComponent_ProgressBarTsgcHTMLComponent_ProgressBarBarra de progresso Bootstrap, listrada e animada, de segmento único ou multissegmento empilhado.
TsgcHTMLComponent_CommandPaletteTsgcHTMLComponent_CommandPaletteLançador de ações rápidas Ctrl+K / Cmd+K com filtragem por substring seguida de fuzzy, categorias e ações roteadas pelo servidor.
TsgcHTMLComponent_EmptyStateTsgcHTMLComponent_EmptyStateO painel que um grid, uma lista ou um resultado de busca exibe quando não há linhas, com ícone, título, descrição e até dois botões.
UI conversacional, de bolhas simples a um assistente de IA com streaming.
TsgcHTMLComponent_ChatBoxTsgcHTMLComponent_ChatBoxCaixa de bolhas de chat estilo card com uma barra de entrada e indicador de digitação.
TsgcHTMLComponent_ChatTsgcHTMLComponent_ChatChat estilo WhatsApp com mensagens de texto / imagem / arquivo / áudio / vídeo, confirmações de leitura e respostas.
TsgcHTMLComponent_AIChatTsgcHTMLComponent_AIChatChat de assistente de IA com seletor de provedor / modelo, streaming de tokens e citações de fontes RAG.
TsgcHTMLComponent_PresenceTsgcHTMLComponent_PresenceLista de quem está online como pilha de avatares ou lista, com atualizações de status ao vivo.
Fluxos de login prontos, de senhas a passkeys.
TsgcHTMLComponent_LoginTsgcHTMLComponent_LoginFormulário / página de login pronto (card, centralizado ou página inteira) com lembrar-me e alertas.
TsgcHTMLComponent_SocialLoginTsgcHTMLComponent_SocialLoginPainel de botões de login social OAuth (Google, Facebook, Apple, GitHub, Microsoft e mais).
TsgcHTMLComponent_OAuthCallbackTsgcHTMLComponent_OAuthCallbackPágina de callback / destino OAuth em estado de sucesso, erro ou carregamento com redirecionamento automático.
TsgcHTMLComponent_WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginWidget de login e registro passkey / WebAuthn sem senha.
TsgcHTMLComponent_RolesPermissionsTsgcHTMLComponent_RolesPermissionsMatriz de papéis / permissões com uma checkbox por célula e atualizações de concessão ao vivo via WebSocket.
TsgcHTMLComponent_UserManagementTsgcHTMLComponent_UserManagementTabela de administração de usuários com papéis, status, busca e um dropdown de ações por linha.
TsgcHTMLComponent_ImpersonateBannerTsgcHTMLComponent_ImpersonateBannerBanner de personificação de administrador exibido ao agir como outro usuário, com saída em um clique.
As peças não visuais que servem as páginas e as mantêm ao vivo.
TsgcHTMLEngine_ServerTsgcHTMLEngine_ServerMotor HTML vinculado a um TsgcWebSocketHTTPServer que serve páginas renderizadas e assets embutidos.
TsgcHTMX_Engine_ServerTsgcHTMX_Engine_ServerMotor htmx conectado ao mesmo servidor; engancha os handlers HTTP e WebSocket, despacha requisições e mensagens de entrada, e envia ou transmite fragmentos HTML aos navegadores conectados em tempo real.
TsgcHTMLPageBuilderTsgcHTMLPageBuilderMonta componentes registrados em uma página responsiva completa, com um editor visual em tempo de design.
TsgcHTMLThemeControllerTsgcHTMLThemeControllerAlternador de tema em tempo de execução cuja propriedade Theme (ptDefault, ptDark, ptDarkPro) aplica o tema selecionado e a folha de estilos compartilhada à página.
TsgcHTMLThemeBuilderTsgcHTMLThemeBuilderGerador de CSS cujo Mode (tmLight, tmDark, tmSystem) escreve variáveis CSS do Bootstrap a partir dos valores de propriedades, com um script opcional de sincronização com a preferência do SO para tmSystem.
TsgcHTMX_FragmentTsgcHTMX_FragmentFragmento htmx out-of-band para enviar uma atualização parcial de página do servidor ao navegador.
TsgcHTMX_RouterTsgcHTMX_RouterTabela de roteamento de Routes que corresponde a um caminho de requisição de entrada e o despacha (via HandleRequest) para o handler OnRoute dessa rota.
Os componentes desta página não são mockups. Cada um deles está rodando agora mesmo dentro destas aplicações Delphi.
Séries do Chart.js, um medidor SVG, um sparkline e um tree map, todos emitidos a partir do Pascal.
Abrir a demo ao vivo →
Um quadro de programação de vários dias com dependências, desenhado no servidor.
Abrir a demo ao vivo →
Blocos de categorias, um carrinho ao vivo, promoções e um display para o cliente.
Abrir a demo ao vivo →