SWCore / Componentes
Componentes
Todos os componentes de interface do SWCore, organizados por categoria e ligados diretamente à documentação.
Interface
50 - Accordion
Lista de títulos que abrem e fecham com animação suave — um aberto por vez ou vários, com cinco visuais diferentes.
51 - Text Carousel
Frases que trocam no mesmo lugar — depoimentos, avisos, citações — com 9 efeitos de troca, setas, bolinhas e troca automática.
<div sw-carousel sw-carousel-auto='4000'>.
52 - Arrastar (Draggable)
Deixa qualquer elemento ser arrastado com o mouse ou o dedo — solto, preso dentro da caixa de fora, só na horizontal ou só na vertical, ou pegando por uma alça.
Feedback
53 - Chip
Etiqueta pequena e arredondada para tags, filtros escolhidos e seleções — com um × opcional que tira ela da tela.
54 - Panel (drawer)
Painel que desliza da borda da tela — carrinho, filtros, menu no celular, detalhes de um item — pela direita, esquerda, topo ou de baixo.
55 - Modal
Janela que abre por cima da página, com fundo escurecido: confirmar, avisar, mostrar um formulário rápido.
<div sw-modal id='aviso'> + <button sw-modal-open='#aviso'>.
56 - Tooltip
Balãozinho com uma explicação curta que aparece ao passar o mouse (ou focar com o teclado) em um botão, ícone ou palavra. <button sw-tooltip='Copiar link'>.
57 - Toast (SW.Alert)
O aviso que aparece no canto da tela e some sozinho — "Pedido enviado!", "Sem conexão", "Sessão expira em 5 minutos". Também faz a caixa "Tem certeza?".
58 - Progress
Mostra quanto de algo já foi feito: barra (envio de arquivo, perfil completo) ou anel com a porcentagem no meio, que pode contar de 0 até o valor quando aparece na tela.
59 - Rating (estrelas)
Estrelas de avaliação: mostrar a nota de um produto (aceita meia estrela) ou deixar a pessoa clicar para dar a nota dela — inclusive dentro de formulário.
60 - LGPD / Cookies
O aviso de cookies que a LGPD (Lei 13.709/2018) pede de verdade: Estatísticas, Marketing e Preferências só rodam depois que a pessoa aceita — e ela pode aceitar por categoria, recusar e mudar de ideia depois.
Formulários
61 - Campo de formulário
Todo campo de formulário do SWCore: caixa de texto, lista de opções, caixa de marcar, bolinha, interruptor, régua, envio de arquivo e a montagem do formulário — tudo com a mesma lógica.
62 - Validação inline (matinp)
Confere cada campo assim que a pessoa sai dele e já mostra "certo" ou "errado" com a mensagem — sem esperar o envio do formulário.
63 - Select (JS)
Lista de opções bonita e com busca: você digita "per" e aparece "Pernambuco". Com várias escolhas, cada uma vira uma etiqueta com ×.
64 - Máscara de campo
Formata enquanto a pessoa digita: ela escreve só os números e o campo vira (81) 99999-0000, 123.456.789-09, 50030-000, R$ 1.234,56.
65 - Validação de formulário
Confere o formulário inteiro antes de enviar: se algo estiver errado, não envia, pinta o campo de vermelho, escreve o motivo embaixo e leva a pessoa até ele.
66 - Textarea auto-resize
A caixa de texto grande que cresce junto com o que a pessoa escreve — sem barra de rolagem até o limite que você escolher.
67 - Contador de caracteres
Um contador embaixo do campo que mostra quanto já foi escrito — fica amarelo perto do limite e vermelho se passar.
<textarea sw-textlimit sw-textlimit-max='160'>.
68 - Upload de arquivo
Área de arrastar o arquivo ou clicar, com miniatura das fotos, limite de quantidade e de tamanho. <div sw-upload sw-upload-accept='image/*'>.
69 - Editor de texto rico
Caixa de texto com barra de negrito, título, lista, link, cor e imagem — tipo um mini Word dentro do formulário. <textarea sw-editor name='conteudo'>.
Mídia
70 - Recorte de imagem
A pessoa escolhe uma foto, arrasta o quadro para enquadrar e corta no formato certo (quadrado, 16:9, retrato). Sai uma imagem WebP pronta.
<div sw-cropper sw-cropper-ratio='1'>.
71 - Lightbox
Clicou na miniatura, a foto abre grande por cima da página, com fundo escuro, legenda, setas para a próxima e contador. <a sw-lightbox href='foto.jpg'>.
72 - Slider de imagens
Passa slides um depois do outro — banners, fotos, produtos. Com setas, bolinhas, troca automática e efeito de zoom lento (Ken Burns).
73 - Feed do Instagram
Mostra as publicações de um perfil do Instagram no seu site, em grade de fotos com legenda e curtidas ao passar o mouse — a partir do seu servidor, de um arquivo JSON ou de links de posts escolhidos.
Dados
74 - Tabela avançada
Pega uma <table> comum e dá a ela busca, ordenar clicando no título da coluna, paginação, exportar para planilha, imprimir e modo celular — só com atributos.
75 - Infinite Scroll
Quando a pessoa chega perto do fim da lista, ele busca a próxima página no seu servidor e acrescenta embaixo — sem botão "carregar mais".
76 - AJAX declarativo
Traz um pedaço de HTML do seu servidor e coloca na página quando a pessoa clica (ou passa o mouse, ou a página abre) — sem recarregar e sem escrever fetch().
77 - Cotação de moedas
Mostra a cotação do dólar, euro, bitcoin e outras moedas em reais, buscada na hora numa API pública gratuita — em cartões ou em tabela, atualizando sozinha se você quiser.
Sistema
78 - Máquina de escrever
Texto que se digita sozinho, letra por letra, com cursor piscando — e apaga para escrever a próxima frase. O clássico "Fazemos sites rápidos. / bonitos. / que vendem."
79 - Realce de código
Deixa blocos de código coloridos e legíveis — palavras-chave, textos, comentários e tags em cores diferentes — com o nome da linguagem, botão "Copiar" e numeração de linhas opcional. Muda de cor sozinho no tema claro e escuro.
80 - Tema dia/noite
Claro e escuro com um clique: o botão troca o tema, a escolha fica salva e imagem, cor, fundo, fonte e até o texto podem mudar junto.
81 - Conteúdo via JSON
Busca uma lista em JSON e monta os cartões na tela sozinho — você escreve um modelo com {{campo}} e ele repete para cada item.
82 - Lazy load de imagem
A foto só é baixada quando está chegando perto da tela — com um carregando girando no lugar enquanto ela não chega.
83 - Preloader
Tela de "carregando": cobre a página (ou só um pedaço dela) com um círculo girando, uma barra ou a sua logo, e some sozinha quando tudo termina de carregar.
