SWCore / Componentes

Componentes

Todos os componentes de interface do SWCore, organizados por categoria e ligados diretamente à documentação.

Base do SWCore

01 - Temas Como o theme.css funciona, as 8 cores semânticas padrão do SWCore e o personalizador ao vivo. 03 - Elementos Coleção de componentes fundamentais (Botões, Badges, Alertas, Progresso, Superfícies) integrados à paleta de cores e tokens do SWCore.

Interface

04 - Modal Caixa de diálogo sobre a página, com foco preso, animações e fechamento por ESC, clique fora ou botão. 05 - Dropdown Menu suspenso que abre ao clicar num gatilho, fecha ao clicar fora ou apertar ESC. Suporta sintaxe curta sw-drop. 06 - Accordion Lista de itens que expandem/recolhem ao clicar no cabeçalho com seta animada. Suporta sintaxe curta sw-acc. 07 - Tabs Navegação por abas com indicador deslizante fluido e animação moderna de transição. Suporta sw-tab. 08 - Tooltip Dica flutuante inteligente via JS com posicionamento automático nas bordas, cores semânticas e suporte a seguir o cursor. Suporta sintaxe curta sw-tool. 09 - Panel Painel deslizante de qualquer lado com overlay — ideal para filtros, carrinhos, detalhes e drawers. 10 - Seg (Segmented Control) Seletor de opções em formato de cápsula única, com um indicador que desliza entre elas.

Navegação

11 - Navbar Barra de navegação superior responsiva com variantes glass/gradiente, scroll shrink, dropdowns, mega-menu e drawer mobile. 12 - Sidebar Sistema lateral de aplicação com rail, grupos, busca, badges, perfil, persistência e drawer mobile acessível. 13 - Scroll (âncora suave) Rolagem suave até uma seção da página ao clicar num link âncora. 14 - Scrollspy Marca automaticamente o link do menu correspondente à seção visível na tela. 15 - Voltar ao topo Botão flutuante que aparece depois de rolar e leva de volta ao topo da página. 16 - Pagination Paginação numérica com indicador deslizante e reticências para muitas páginas.

Feedback

17 - Alert / Toast Notificações temporárias no canto da tela, mais uma caixa de confirmação modal. 18 - Progress Barra de progresso linear e anel circular animado, ambos guiados por CSS. 19 - Rating Avaliação por estrelas, somente-leitura ou interativa, com suporte a meia-estrela. 20 - Chip Etiqueta compacta e removível, com animação de saída. 21 - LGPD / Cookies Barra de consentimento de cookies, com aceite/recusa e expiração configurável.

Formulários

22 - Valid Validação de formulário acessível, em cima das constraints nativas do HTML. 23 - Mask Máscaras de digitação para CPF, CNPJ, telefone, CEP, data, hora, cartão e dinheiro. 24 - Material Input Campo com label flutuante, máscara própria e validação com mensagens customizadas. 25 - Select Select customizado com busca e seleção múltipla com tags removíveis. 26 - Upload Zona de arrastar-e-soltar arquivos, com preview e validação de tamanho/quantidade. 27 - Textarea autosize Caixa de texto que cresce sozinha conforme o conteúdo, com altura mínima e máxima. 28 - Textlimit Contador de caracteres restantes, com aviso visual perto do limite e ao estourar.

Mídia

29 - Slider Carrossel de imagens/slides com loop infinito, autoplay e efeito Ken Burns opcional. 30 - Carousel Carrossel de conteúdo (texto, cards, depoimentos) com 9 efeitos de transição diferentes. 31 - Lightbox Galeria em overlay de tela cheia, com legenda, navegação, zoom e autoplay. 32 - Cropper Recorte de imagem 100% no navegador, via canvas — sem dependência externa. 33 - Lazy Load Carrega imagens só quando estão perto de entrar na tela.

Dados

34 - Table Tabela interativa completa — busca, ordenação, paginação, seleção, colunas e export. 35 - Content Busca dados JSON e renderiza numa lista usando um template HTML com {{variáveis}}. 36 - Ajax Injeta fragmentos HTML same-origin na página, com CSRF automático, efeito de entrada e reinit dos módulos SWCore no conteúdo novo. 37 - Infinite Scroll Carrega mais itens automaticamente conforme o usuário se aproxima do fim da página. 38 - Cotação Widget de câmbio ao vivo (dólar, euro, bitcoin...) via API pública gratuita.

Conteúdo rico

39 - Editor Editor de texto rico com toolbar completa, view de código e contador de palavras. 40 - SWCode Realce de sintaxe zero-dependência para JS, HTML, CSS, PHP, JSON e Bash, com 5 temas e cópia com 1 clique.

Sistema

02 - Cores Paleta cromática completa do SWCore com API curta, transparências e módulo opcional. 41 - Day (tema) Alterna entre tema claro e escuro com persistência em localStorage, sincronização entre abas, detecção de preferência do sistema e atalho de teclado — zero configuração. 42 - Drag Torna qualquer elemento ou widget livremente arrastável por mouse ou touch, com suporte a alça de cabeçalho, eixos fixos e limites de contêiner. 43 - Anime Sistema completo de animações prontas: Scroll Reveal (1 vez ou toda vez que o scroll passar), animações temporizadas, loops contínuos e micro-interações de hover. 44 - SWIcons Catálogo oficial com mais de 1000 ícones em fonte vetorial (SWicons), organizados por categoria, pesquisáveis e com cópia instantânea.