Cada componente da biblioteca, agrupado em nove famílias. Cada um renderiza para markup Bootstrap 5 e funciona da mesma forma em Delphi, C++ Builder e .NET. Clique em um componente para acessar sua própria página com uso e exemplos. Todos os componentes aplicam codificação automática de saída de HTML, atributos, JavaScript e URL, além de sanitização de URL, de modo que o conteúdo dinâmico é escapado por padrão para proteger contra XSS e injeção.
13 componentes
7 componentes
4 componentes
12 componentes
7 componentes
8 componentes
3 componentes
4 componentes
8 classes
Grids, calendários e quadros que renderizam seus datasets diretamente.
| Componente | Classe | Descrição | Ajuda |
|---|---|---|---|
| Grid | TsgcHTMLComponent_Grid | Tabela rica em recursos: ordenação, filtro, exportação CSV/PDF, edição inline, agrupamento, scroll virtual e consulta por IA. | Docs |
| DataTable | TsgcHTMLComponent_DataTable | Tabela de dados de nível superior que envolve Grid + Pagination com uma barra de ferramentas, busca e contagem de linhas. | Docs |
| Calendar | TsgcHTMLComponent_Calendar | Calendário em grade mensal com pontos de eventos e navegação anterior/próximo. | Docs |
| Scheduler | TsgcHTMLComponent_Scheduler | Agendador de calendário (visualizações por mês / semana) renderizando eventos por data. | Docs |
| Timeline | TsgcHTMLComponent_Timeline | Linha do tempo vertical de eventos datados, carregável a partir de um dataset. | Docs |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | Quadro Kanban de colunas e cards arrastáveis. | Docs |
| Gantt | TsgcHTMLComponent_Gantt | Gráfico de cronograma de projeto Gantt com barras de progresso de tarefas. | Docs |
Visuais orientados a dados construídos a partir dos seus próprios números.
| Componente | Classe | Descrição | Ajuda |
|---|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Gráfico Chart.js: linha, barra, pizza, rosca, radar, polar, bolha e dispersão. | Docs |
| Gauge | TsgcHTMLComponent_Gauge | Medidor SVG semicircular com limiares de cor baixo / médio / alto. | Docs |
| Diagram | TsgcHTMLComponent_Diagram | Diagrama de fluxo de nós e setas renderizado como SVG inline. | Docs |
| Map | TsgcHTMLComponent_Map | Mapa interativo Leaflet.js (tiles OpenStreetMap / CartoDB) com marcadores. | Docs |
Tudo o que você precisa para capturar dados, com validação e vinculação a dataset.
| Componente | Classe | Descrição | Ajuda |
|---|---|---|---|
| Form | TsgcHTMLComponent_Form | Construtor de formulários orientado a dados com validação, layouts e geração de formulários por IA. | Docs |
| Edit | TsgcHTMLComponent_Edit | Entrada de texto de linha única com label, texto de ajuda e vinculação a dataset. | Docs |
| Memo | TsgcHTMLComponent_Memo | Entrada de área de texto multilinha com label e texto de ajuda. | Docs |
| CheckBox | TsgcHTMLComponent_CheckBox | Entrada de checkbox com label e estado marcado. | Docs |
| RadioGroup | TsgcHTMLComponent_RadioGroup | Grupo de opções de rádio mutuamente exclusivas. | Docs |
| Select | TsgcHTMLComponent_Select | Dropdown de seleção com grupos de opções, seleção múltipla e vinculação a dataset. | Docs |
| InputGroup | TsgcHTMLComponent_InputGroup | Entrada com texto de addon antes / depois. | Docs |
| AutoComplete | TsgcHTMLComponent_AutoComplete | Entrada de texto apoiada por uma datalist HTML5 de sugestões. | Docs |
| DatePicker | TsgcHTMLComponent_DatePicker | Campo de entrada nativo de data / hora / datetime. | Docs |
| FileUpload | TsgcHTMLComponent_FileUpload | Zona de upload de arquivos por arrastar e soltar com envio de formulário multipart. | Docs |
| RichEditor | TsgcHTMLComponent_RichEditor | Editor de rich-text WYSIWYG baseado em Quill com campo de formulário oculto. | Docs |
| Rating | TsgcHTMLComponent_Rating | Exibição ou entrada de avaliação por estrelas (símbolo). | Docs |
Cards, mídia e blocos de KPI para dispor uma página.
| Componente | Classe | Descrição | Ajuda |
|---|---|---|---|
| Panel | TsgcHTMLComponent_Panel | Painel de card Bootstrap com cabeçalho / corpo / rodapé, recolhível e rolável. | Docs |
| StatCard | TsgcHTMLComponent_StatCard | Card de KPI / estatística de dashboard com ícone, seta de tendência e gradiente opcional. | Docs |
| Accordion | TsgcHTMLComponent_Accordion | Acordeão de colapso vertical com painéis expansíveis empilhados. | Docs |
| Carousel | TsgcHTMLComponent_Carousel | Slideshow de imagens / carrossel com indicadores, controles e reprodução automática. | Docs |
| Image | TsgcHTMLComponent_Image | Imagem com forma, responsiva / lazy-load, link de lightbox e legenda. | Docs |
| Avatar | TsgcHTMLComponent_Avatar | Avatar de usuário (imagem ou iniciais) com tamanho, forma e ponto de status de presença. | Docs |
| Video | TsgcHTMLComponent_Video | Player de vídeo / áudio HTML5 mais um helper de incorporação do YouTube. | Docs |
Diálogos, superfícies de status e estados de carregamento.
| Componente | Classe | Descrição | Ajuda |
|---|---|---|---|
| Modal | TsgcHTMLComponent_Modal | Diálogo modal com título / corpo / rodapé, tamanhos, centralizado e backdrop estático. | Docs |
| Offcanvas | TsgcHTMLComponent_Offcanvas | Painel deslizante off-canvas pela esquerda, direita, topo ou base. | Docs |
| Popover | TsgcHTMLComponent_Popover | Balão popover sobre um elemento de gatilho (clique / hover / foco). | Docs |
| Toast | TsgcHTMLComponent_Toast | Notificação toast com cabeçalho, corpo, carimbo de tempo e ocultação automática. | Docs |
| Snackbar | TsgcHTMLComponent_Snackbar | Snackbar transitório estilo Material com uma ação opcional. | Docs |
| Notification | TsgcHTMLComponent_Notification | Centro de notificações em dropdown com ícone de sino e um badge de não lidas. | Docs |
| Spinner | TsgcHTMLComponent_Spinner | Spinner de carregamento (borda / crescimento), dimensionado e colorido. | Docs |
| Placeholder | TsgcHTMLComponent_Placeholder | Card de carregamento esqueleto / placeholder com um brilho animado. | Docs |
UI conversacional, de bolhas simples a um assistente de IA com streaming.
| Componente | Classe | Descrição | Ajuda |
|---|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | Caixa de bolhas de chat estilo card com uma barra de entrada e indicador de digitação. | Docs |
| Chat | TsgcHTMLComponent_Chat | Chat estilo WhatsApp com mensagens de texto / imagem / arquivo / áudio / vídeo, confirmações de leitura e respostas. | Docs |
| AIChat | TsgcHTMLComponent_AIChat | Chat de assistente de IA com seletor de provedor / modelo, streaming de tokens e citações de fontes RAG. | Docs |
Fluxos de login prontos, de senhas a passkeys.
| Componente | Classe | Descrição | Ajuda |
|---|---|---|---|
| Login | TsgcHTMLComponent_Login | Formulário / página de login pronto (card, centralizado ou página inteira) com lembrar-me e alertas. | Docs |
| SocialLogin | TsgcHTMLComponent_SocialLogin | Painel de botões de login social OAuth (Google, Facebook, Apple, GitHub, Microsoft e mais). | Docs |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | Página de callback / destino OAuth em estado de sucesso, erro ou carregamento com redirecionamento automático. | Docs |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | Widget de login e registro passkey / WebAuthn sem senha. | Docs |
As peças não visuais que servem as páginas e as mantêm ao vivo.
| Componente | Classe | Descrição | Ajuda |
|---|---|---|---|
| EngineServer | TsgcHTMLEngine_Server | Motor HTML vinculado a um TsgcWebSocketHTTPServer que serve páginas renderizadas e assets embutidos. | Docs |
| HTMXEngine | TsgcHTMX_Engine_Server | Motor htmx conectado ao mesmo servidor. Ele engancha os handlers HTTP e WebSocket, despacha requisições e mensagens de entrada e envia ou faz broadcast de fragmentos HTML para os navegadores conectados em tempo real (DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment). | Docs |
| PageBuilder | TsgcHTMLPageBuilder | Monta componentes registrados em uma página responsiva completa, com um editor visual em tempo de design. | Docs |
| TemplateBootstrap | TsgcHTMLTemplate_Bootstrap | Envolve o conteúdo do corpo em um documento HTML Bootstrap 5 completo com tema, idioma e direção. | Docs |
| ThemeController | TsgcHTMLThemeController | 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. | Docs |
| ThemeBuilder | TsgcHTMLThemeBuilder | Gerador de CSS cujo Mode (tmLight, tmDark, tmSystem) escreve variáveis CSS do Bootstrap a partir de valores de propriedades, com um script opcional de sincronização com a preferência do SO para tmSystem. | Docs |
| HTMXFragment | TsgcHTMX_Fragment | Fragmento htmx out-of-band para enviar uma atualização parcial de página do servidor ao navegador. | Docs |
| HTMXRouter | TsgcHTMX_Router | Tabela de roteamento de Routes que corresponde ao caminho de uma requisição de entrada e a despacha (via HandleRequest) ao handler OnRoute dessa rota. | Docs |