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