Galeria de Componentes sgcHTML — Explore todos os 89 componentes de UI | eSeGeCe

sgcHTML Galeria de Componentes

Explore todos os 89 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. 27 dos 89 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.

Abra a galeria interativa ao vivo

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.

Baixar a versão de avaliação gratuita Abrir a matriz de recursos

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.

Nove famílias

89 componentes de UI, nove famílias

Vá direto a uma família, ou role todo o catálogo abaixo.

14 componentes

Dados & Tabelas

11 componentes

Gráficos & Visualização

10 componentes

Formulários & Entradas

21 componentes

Conteúdo & Layout

10 componentes

Overlays & Feedback

12 componentes

Chat & IA

4 componentes

Autenticação

7 componentes

Infraestrutura

7 classes

Dados & Tabelas

Dados & Tabelas

Grids, calendários e quadros que renderizam seus datasets diretamente.

Grid

Data-aware
  • Delphi / C++TsgcHTMLComponent_Grid
  • .NETTsgcHTMLComponent_Grid

Tabela rica em recursos: ordenação, filtro, exportação CSV/PDF, edição inline, agrupamento, scroll virtual e consulta por IA.

Página do componente · Docs

DataTable

Data-aware
  • Delphi / C++TsgcHTMLComponent_DataTable
  • .NETTsgcHTMLComponent_DataTable

Tabela de dados de nível superior que envolve Grid + Pagination com uma barra de ferramentas, busca e contagem de linhas.

Página do componente · Docs

Calendar

Data-aware
  • Delphi / C++TsgcHTMLComponent_Calendar
  • .NETTsgcHTMLComponent_Calendar

Calendário em grade mensal com pontos de eventos e navegação anterior/próximo.

Página do componente · Docs

Scheduler

Data-aware
  • Delphi / C++TsgcHTMLComponent_Scheduler
  • .NETTsgcHTMLComponent_Scheduler

Agendador de calendário (visualizações por mês / semana) renderizando eventos por data.

Página do componente · Docs

Timeline

Data-aware
  • Delphi / C++TsgcHTMLComponent_Timeline
  • .NETTsgcHTMLComponent_Timeline

Linha do tempo vertical de eventos datados, carregável a partir de um dataset.

Página do componente · Docs

KanbanBoard

Data-aware
  • Delphi / C++TsgcHTMLComponent_KanbanBoard
  • .NETTsgcHTMLComponent_KanbanBoard

Quadro Kanban de colunas e cards arrastáveis.

Página do componente · Docs

Gantt

Data-aware
  • Delphi / C++TsgcHTMLComponent_Gantt
  • .NETTsgcHTMLComponent_Gantt

Gráfico de cronograma de projeto Gantt com barras de progresso de tarefas.

Página do componente · Docs

TreeGrid

Data-aware
  • Delphi / C++TsgcHTMLComponent_TreeGrid
  • .NETTsgcHTMLComponent_TreeGrid

Tabela Bootstrap com linhas hierárquicas recolhíveis, construída a partir de pares de nós Id/ParentId.

Página do componente · Docs

PivotTable

Data-aware
  • Delphi / C++TsgcHTMLComponent_PivotTable
  • .NETTsgcHTMLComponent_PivotTable

Tabela dinâmica (pivot) Bootstrap que agrupa linhas e colunas e agrega medidas com totais de linha, coluna e geral.

Página do componente · Docs

ActivityFeed

  • Delphi / C++TsgcHTMLComponent_ActivityFeed
  • .NETTsgcHTMLComponent_ActivityFeed

Feed de atividades ao vivo, mais recentes primeiro, com carimbos de tempo relativos e envio via WebSocket out-of-band.

Página do componente · Docs

AuditTrail

Data-aware
  • Delphi / C++TsgcHTMLComponent_AuditTrail
  • .NETTsgcHTMLComponent_AuditTrail

Feed cronológico de log de auditoria de ações de usuários e do sistema, com autor, ação, alvo e data/hora.

See in feature matrix · Docs
Gráficos & Visualização

Gráficos & Visualização

Visuais orientados a dados, construídos a partir dos seus próprios números.

Chart

Data-aware
  • Delphi / C++TsgcHTMLComponent_Chart
  • .NETTsgcHTMLComponent_Chart

Gráfico Chart.js: linha, barra, pizza, rosca, radar, polar, bolha e dispersão.

Página do componente · Docs

Gauge

  • Delphi / C++TsgcHTMLComponent_Gauge
  • .NETTsgcHTMLComponent_Gauge

Medidor SVG semicircular com limiares de cor baixo / médio / alto.

Página do componente · Docs

Diagram

  • Delphi / C++TsgcHTMLComponent_Diagram
  • .NETTsgcHTMLComponent_Diagram

Diagrama de fluxo de nós e setas renderizado como SVG inline.

Página do componente · Docs

Map

  • Delphi / C++TsgcHTMLComponent_Map
  • .NETTsgcHTMLComponent_Map

Mapa interativo Leaflet.js (tiles OpenStreetMap / CartoDB) com marcadores.

Página do componente · Docs

Heatmap

Data-aware
  • Delphi / C++TsgcHTMLComponent_Heatmap
  • .NETTsgcHTMLComponent_Heatmap

Grade 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.

Página do componente · Docs

Sparkline

Data-aware
  • Delphi / C++TsgcHTMLComponent_Sparkline
  • .NETTsgcHTMLComponent_Sparkline

Sparkline SVG inline compacto de linha, barra ou área a partir de uma série de valores ou de um dataset vinculado.

Página do componente · Docs

CandlestickChart

Data-aware
  • Delphi / C++TsgcHTMLComponent_CandlestickChart
  • .NETTsgcHTMLComponent_CandlestickChart

Gráfico de candlestick OHLC em SVG com pavios, cores de alta/baixa e uma faixa de volume opcional.

Página do componente · Docs

QRCode

  • Delphi / C++TsgcHTMLComponent_QRCode
  • .NETTsgcHTMLComponent_QRCode

Có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.

Página do componente · Docs

Barcode

  • Delphi / C++TsgcHTMLComponent_Barcode
  • .NETTsgcHTMLComponent_Barcode

Código de barras Code 128 SVG em Pascal puro a partir de qualquer texto ASCII, com legenda legível opcional.

Página do componente · Docs

TreeMap

Data-aware
  • Delphi / C++TsgcHTMLComponent_TreeMap
  • .NETTsgcHTMLComponent_TreeMap

Treemap "squarified" renderizado como um SVG inline autocontido gerado no servidor, sem necessidade de biblioteca de gráficos.

Página do componente · Docs
Formulários & Entradas

Formulários & Entradas

Tudo o que você precisa para capturar dados, com validação e vinculação a dataset.

Form

Data-aware
  • Delphi / C++TsgcHTMLComponent_Form
  • .NETTsgcHTMLComponent_Form

Construtor de formulários orientado a dados com validação, layouts e geração de formulários por IA.

Página do componente · Docs

Edit

Data-aware
  • Delphi / C++TsgcHTMLComponent_Edit
  • .NETTsgcHTMLComponent_Edit

Entrada de texto de linha única com label, texto de ajuda e vinculação a dataset.

Página do componente · Docs

Memo

Data-aware
  • Delphi / C++TsgcHTMLComponent_Memo
  • .NETTsgcHTMLComponent_Memo

Entrada de área de texto multilinha com label e texto de ajuda.

Página do componente · Docs

CheckBox

Data-aware
  • Delphi / C++TsgcHTMLComponent_CheckBox
  • .NETTsgcHTMLComponent_CheckBox

Entrada de checkbox com label e estado marcado.

Página do componente · Docs

RadioGroup

  • Delphi / C++TsgcHTMLComponent_RadioGroup
  • .NETTsgcHTMLComponent_RadioGroup

Grupo de opções de rádio mutuamente exclusivas.

Página do componente · Docs

Select

Data-aware
  • Delphi / C++TsgcHTMLComponent_Select
  • .NETTsgcHTMLComponent_Select

Dropdown de seleção com grupos de opções, seleção múltipla e vinculação a dataset.

Página do componente · Docs

InputGroup

  • Delphi / C++TsgcHTMLComponent_InputGroup
  • .NETTsgcHTMLComponent_InputGroup

Entrada com texto de addon antes / depois.

Página do componente · Docs

AutoComplete

Data-aware
  • Delphi / C++TsgcHTMLComponent_AutoComplete
  • .NETTsgcHTMLComponent_AutoComplete

Entrada de texto apoiada por uma datalist HTML5 de sugestões.

Página do componente · Docs

DatePicker

  • Delphi / C++TsgcHTMLComponent_DatePicker
  • .NETTsgcHTMLComponent_DatePicker

Campo de entrada nativo de data / hora / datetime.

Página do componente · Docs

FileUpload

  • Delphi / C++TsgcHTMLComponent_FileUpload
  • .NETTsgcHTMLComponent_FileUpload

Zona de upload de arquivos por arrastar e soltar com envio de formulário multipart.

Página do componente · Docs

RichEditor

  • Delphi / C++TsgcHTMLComponent_RichEditor
  • .NETTsgcHTMLComponent_RichEditor

Editor de rich-text WYSIWYG baseado em Quill com campo de formulário oculto.

Página do componente · Docs

Rating

  • Delphi / C++TsgcHTMLComponent_Rating
  • .NETTsgcHTMLComponent_Rating

Exibição ou entrada de avaliação por estrelas (símbolo).

Página do componente · Docs

MultiSelect

Data-aware
  • Delphi / C++TsgcHTMLComponent_MultiSelect
  • .NETTsgcHTMLComponent_MultiSelect

Um dropdown de seleção múltipla Bootstrap pesquisável com chips, opções agrupadas e vinculação a dataset.

Página do componente · Docs

ColorPicker

  • Delphi / C++TsgcHTMLComponent_ColorPicker
  • .NETTsgcHTMLComponent_ColorPicker

Uma entrada de cor HTML5 nativa com campo de texto hexadecimal opcional e amostras predefinidas.

Página do componente · Docs

Slider

  • Delphi / C++TsgcHTMLComponent_Slider
  • .NETTsgcHTMLComponent_Slider

Um slider de intervalo Bootstrap com badge de valor ao vivo, rótulos de mín/máx e estilo de cor.

Página do componente · Docs

TimePicker

  • Delphi / C++TsgcHTMLComponent_TimePicker
  • .NETTsgcHTMLComponent_TimePicker

Uma entrada de hora HTML5 nativa com limites de mín/máx e granularidade de segundos.

Página do componente · Docs

SignaturePad

  • Delphi / C++TsgcHTMLComponent_SignaturePad
  • .NETTsgcHTMLComponent_SignaturePad

Um bloco de assinatura em canvas baseado em pointer-events com ações de Limpar, Desfazer e Salvar.

Página do componente · Docs

Transfer

Data-aware
  • Delphi / C++TsgcHTMLComponent_Transfer
  • .NETTsgcHTMLComponent_Transfer

Widget de lista dupla para mover itens entre um painel de disponíveis e um de atribuídos, com filtragem e vinculação a dataset.

Página do componente · Docs

DateTimePicker

  • Delphi / C++TsgcHTMLComponent_DateTimePicker
  • .NETTsgcHTMLComponent_DateTimePicker

Seletor nativo de data e hora do HTML5, combinando calendário e relógio em um único campo.

See in feature matrix · Docs

DateRangePicker

  • Delphi / C++TsgcHTMLComponent_DateRangePicker
  • .NETTsgcHTMLComponent_DateRangePicker

Campos pareados de data inicial e final para escolher um intervalo de datas, com limites mín/máx.

See in feature matrix · Docs

RangeSlider

  • Delphi / C++TsgcHTMLComponent_RangeSlider
  • .NETTsgcHTMLComponent_RangeSlider

Slider de dois controles que seleciona um par de valores mínimo/máximo, com badges de valor ao vivo.

See in feature matrix · Docs
Conteúdo & Layout

Conteúdo & Layout

Cards, mídia e blocos de KPI para compor uma página.

Panel

  • Delphi / C++TsgcHTMLComponent_Panel
  • .NETTsgcHTMLComponent_Panel

Painel de card Bootstrap com cabeçalho / corpo / rodapé, recolhível e rolável.

Página do componente · Docs

StatCard

  • Delphi / C++TsgcHTMLComponent_StatCard
  • .NETTsgcHTMLComponent_StatCard

Card de KPI / estatística de dashboard com ícone, seta de tendência e gradiente opcional.

Página do componente · Docs

Accordion

  • Delphi / C++TsgcHTMLComponent_Accordion
  • .NETTsgcHTMLComponent_Accordion

Acordeão de colapso vertical com painéis expansíveis empilhados.

Página do componente · Docs
  • Delphi / C++TsgcHTMLComponent_Carousel
  • .NETTsgcHTMLComponent_Carousel

Slideshow de imagens / carrossel com indicadores, controles e reprodução automática.

Página do componente · Docs

Image

  • Delphi / C++TsgcHTMLComponent_Image
  • .NETTsgcHTMLComponent_Image

Imagem com forma, responsiva / lazy-load, link de lightbox e legenda.

Página do componente · Docs

Avatar

  • Delphi / C++TsgcHTMLComponent_Avatar
  • .NETTsgcHTMLComponent_Avatar

Avatar de usuário (imagem ou iniciais) com tamanho, forma e ponto de status de presença.

Página do componente · Docs

Video

  • Delphi / C++TsgcHTMLComponent_Video
  • .NETTsgcHTMLComponent_Video

Player de vídeo / áudio HTML5 mais um helper de incorporação do YouTube.

Página do componente · Docs

Badge

  • Delphi / C++TsgcHTMLComponent_Badge
  • .NETTsgcHTMLComponent_Badge

Badge Bootstrap único com cor, formato pílula, um ícone inline e um modo de ponto de notificação posicionado.

Página do componente · Docs

PDFViewer

  • Delphi / C++TsgcHTMLComponent_PDFViewer
  • .NETTsgcHTMLComponent_PDFViewer

Visualizador de PDF embutido na página, baseado em pdf.js, com navegação de páginas, zoom, busca, download e impressão.

Página do componente · Docs

Chip

  • Delphi / C++TsgcHTMLComponent_Chip
  • .NETTsgcHTMLComponent_Chip

Chip / tag compacto com ícone opcional, cor e um botão de fechar removível.

See in feature matrix · Docs
Overlays & Feedback

Overlays & Feedback

Diálogos, superfícies de status e estados de carregamento.

  • Delphi / C++TsgcHTMLComponent_Modal
  • .NETTsgcHTMLComponent_Modal

Diálogo modal com título / corpo / rodapé, tamanhos, centralizado e backdrop estático.

Página do componente · Docs

Offcanvas

  • Delphi / C++TsgcHTMLComponent_Offcanvas
  • .NETTsgcHTMLComponent_Offcanvas

Painel deslizante off-canvas pela esquerda, direita, topo ou base.

Página do componente · Docs

Popover

  • Delphi / C++TsgcHTMLComponent_Popover
  • .NETTsgcHTMLComponent_Popover

Balão popover sobre um elemento de gatilho (clique / hover / foco).

Página do componente · Docs

Toast

  • Delphi / C++TsgcHTMLComponent_Toast
  • .NETTsgcHTMLComponent_Toast

Notificação toast com cabeçalho, corpo, carimbo de tempo e ocultação automática.

Página do componente · Docs

Snackbar

  • Delphi / C++TsgcHTMLComponent_Snackbar
  • .NETTsgcHTMLComponent_Snackbar

Snackbar transitório estilo Material com uma ação opcional.

Página do componente · Docs

Notification

  • Delphi / C++TsgcHTMLComponent_Notification
  • .NETTsgcHTMLComponent_Notification

Centro de notificações em dropdown com ícone de sino e um badge de não lidas.

Página do componente · Docs

Spinner

  • Delphi / C++TsgcHTMLComponent_Spinner
  • .NETTsgcHTMLComponent_Spinner

Spinner de carregamento (borda / crescimento), dimensionado e colorido.

Página do componente · Docs

Placeholder

  • Delphi / C++TsgcHTMLComponent_Placeholder
  • .NETTsgcHTMLComponent_Placeholder

Card de carregamento esqueleto / placeholder com um brilho animado.

Página do componente · Docs

ContextMenu

  • Delphi / C++TsgcHTMLComponent_ContextMenu
  • .NETTsgcHTMLComponent_ContextMenu

Menu dropdown de clique direito com escopo definido por um seletor CSS, com ícones, divisores, cabeçalhos e ações roteadas pelo servidor.

Página do componente · Docs

JobProgress

  • Delphi / C++TsgcHTMLComponent_JobProgress
  • .NETTsgcHTMLComponent_JobProgress

Lista 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.

Página do componente · Docs

LogViewer

  • Delphi / C++TsgcHTMLComponent_LogViewer
  • .NETTsgcHTMLComponent_LogViewer

Visualizador de log / terminal em streaming com filtro de nível, busca e rolagem automática.

Página do componente · Docs

ProgressBar

  • Delphi / C++TsgcHTMLComponent_ProgressBar
  • .NETTsgcHTMLComponent_ProgressBar

Barra de progresso Bootstrap, listrada e animada, de segmento único ou multissegmento empilhado.

Página do componente · Docs
Chat & IA

Chat & IA

UI conversacional, de bolhas simples a um assistente de IA com streaming.

ChatBox

  • Delphi / C++TsgcHTMLComponent_ChatBox
  • .NETTsgcHTMLComponent_ChatBox

Caixa de bolhas de chat estilo card com uma barra de entrada e indicador de digitação.

Página do componente · Docs

Chat

  • Delphi / C++TsgcHTMLComponent_Chat
  • .NETTsgcHTMLComponent_Chat

Chat estilo WhatsApp com mensagens de texto / imagem / arquivo / áudio / vídeo, confirmações de leitura e respostas.

Página do componente · Docs

AIChat

  • Delphi / C++TsgcHTMLComponent_AIChat
  • .NETTsgcHTMLComponent_AIChat

Chat de assistente de IA com seletor de provedor / modelo, streaming de tokens e citações de fontes RAG.

Página do componente · Docs

Presence

  • Delphi / C++TsgcHTMLComponent_Presence
  • .NETTsgcHTMLComponent_Presence

Lista de quem está online como pilha de avatares ou lista, com atualizações de status ao vivo.

Página do componente · Docs
Autenticação

Autenticação

Fluxos de login prontos, de senhas a passkeys.

Login

  • Delphi / C++TsgcHTMLComponent_Login
  • .NETTsgcHTMLComponent_Login

Formulário / página de login pronto (card, centralizado ou página inteira) com lembrar-me e alertas.

Página do componente · Docs

SocialLogin

  • Delphi / C++TsgcHTMLComponent_SocialLogin
  • .NETTsgcHTMLComponent_SocialLogin

Painel de botões de login social OAuth (Google, Facebook, Apple, GitHub, Microsoft e mais).

Página do componente · Docs

OAuthCallback

  • Delphi / C++TsgcHTMLComponent_OAuthCallback
  • .NETTsgcHTMLComponent_OAuthCallback

Página de callback / destino OAuth em estado de sucesso, erro ou carregamento com redirecionamento automático.

Página do componente · Docs

WebAuthnLogin

  • Delphi / C++TsgcHTMLComponent_WebAuthnLogin
  • .NETTsgcHTMLComponent_WebAuthnLogin

Widget de login e registro passkey / WebAuthn sem senha.

Página do componente · Docs

RolesPermissions

Data-aware
  • Delphi / C++TsgcHTMLComponent_RolesPermissions
  • .NETTsgcHTMLComponent_RolesPermissions

Matriz de papéis / permissões com uma checkbox por célula e atualizações de concessão ao vivo via WebSocket.

Página do componente · Docs

UserManagement

Data-aware
  • Delphi / C++TsgcHTMLComponent_UserManagement
  • .NETTsgcHTMLComponent_UserManagement

Tabela de administração de usuários com papéis, status, busca e um dropdown de ações por linha.

Página do componente · Docs

ImpersonateBanner

  • Delphi / C++TsgcHTMLComponent_ImpersonateBanner
  • .NETTsgcHTMLComponent_ImpersonateBanner

Banner de personificação de administrador exibido ao agir como outro usuário, com saída em um clique.

See in feature matrix · Docs
Infraestrutura

Engine, Servidor & Temas

As peças não visuais que servem as páginas e as mantêm ao vivo.

EngineServer

  • Delphi / C++TsgcHTMLEngine_Server
  • .NETTsgcHTMLEngine_Server

Motor HTML vinculado a um TsgcWebSocketHTTPServer que serve páginas renderizadas e assets embutidos.

Página do componente · Docs

HTMXEngine

  • Delphi / C++TsgcHTMX_Engine_Server
  • .NETTsgcHTMX_Engine_Server

Motor 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.

Página do componente · Docs

PageBuilder

  • Delphi / C++TsgcHTMLPageBuilder
  • .NETTsgcHTMLPageBuilder

Monta componentes registrados em uma página responsiva completa, com um editor visual em tempo de design.

Página do componente · Docs

ThemeController

  • Delphi / C++TsgcHTMLThemeController
  • .NETTsgcHTMLThemeController

Alternador 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.

Página do componente · Docs

ThemeBuilder

  • Delphi / C++TsgcHTMLThemeBuilder
  • .NETTsgcHTMLThemeBuilder

Gerador 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.

Página do componente · Docs

HTMXFragment

  • Delphi / C++TsgcHTMX_Fragment
  • .NETTsgcHTMX_Fragment

Fragmento htmx out-of-band para enviar uma atualização parcial de página do servidor ao navegador.

Página do componente · Docs

HTMXRouter

  • Delphi / C++TsgcHTMX_Router
  • .NETTsgcHTMX_Router

Tabela 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.

Página do componente · Docs
Melhor custo-benefício: All-AccessTodos os produtos da eSeGeCe, com Suporte Premium incluído, a partir de €1,059/ano.
Ver preços do All-Access

Construa com o sgcHTML

Baixe a versão de avaliação gratuita e comece a compor UIs web em Delphi, C++ Builder ou .NET.

Baixar Versão de Avaliação Gratuita Ver Preços