Bem-vindo ao SWPLUG

O SWPLUG é um conjunto inovador de plugins modulares, cuidadosamente projetados para ampliar as funcionalidades do seu site de maneira simples, eficiente e altamente personalizável. Desenvolvido com as tecnologias modernas de JavaScript e TypeScript, o SWPLUG se integra facilmente a diversas linguagens e frameworks, oferecendo uma vasta gama de componentes versáteis que atendem às necessidades específicas de cada projeto.

Com uma arquitetura flexível e escalável, o SWPLUG permite que você adicione recursos avançados sem complicações, otimizando a performance e aprimorando a experiência do usuário final. Seja você um iniciante buscando soluções práticas ou um profissional experiente que valoriza agilidade e customização, o SWPLUG oferece as ferramentas ideais para transformar suas ideias em realidade digital.

Principais Características

Modularidade: Plugins independentes e intercambiáveis que podem ser adicionados, removidos ou atualizados conforme a evolução do seu projeto.
Fácil Integração: Compatível com múltiplas plataformas, frameworks e linguagens, garantindo uma implementação rápida e sem dores de cabeça.
Alta Performance: Otimizado para oferecer rapidez e eficiência, assegurando que seu site mantenha um desempenho superior mesmo com múltiplos plugins ativos.
Documentação Completa: Guias detalhados, exemplos práticos e suporte contínuo para facilitar o uso, personalização e expansão dos plugins.

Por que escolher o SWPLUG?

Se você procura uma solução completa e confiável para desenvolver páginas web modernas, responsivas e otimizadas, o SWPLUG é a escolha certa. Nossa plataforma oferece recursos avançados que atendem tanto iniciantes quanto profissionais experientes, proporcionando agilidade, qualidade e flexibilidade em cada etapa do desenvolvimento.

Com o SWPLUG, você pode criar sites com design moderno, otimizados para SEO e com uma experiência de usuário excepcional, garantindo maior engajamento e satisfação dos visitantes.

Além disso, contamos com uma comunidade ativa, suporte dedicado e atualizações constantes, assegurando que você nunca estará sozinho em seus projetos e sempre terá acesso às melhores práticas e inovações do mercado.

Controles

SwAlert

SwAlert é um sistema de alertas e diálogos para notificações personalizadas e confirmações no navegador, permitindo exibir mensagens de sucesso, erro, alerta, informação e diálogos de confirmação com botões customizáveis.

Uso Declarativo (HTML)

        
                
                <button SwAlert 
                    data-type="sucesso" 
                    data-message="Operação realizada com sucesso!" 
                    data-duration="3000" 
                > Mostrar Alerta </button>

                <button SwAlert 
                    data-type="ativado" 
                    data-message="Ativado com sucesso!" 
                    data-duration="3000" 
                > Mostrar Alerta Ativado </button>

                <button SwAlert 
                    data-type="desativado" 
                    data-message="Desativado com sucesso!" 
                    data-duration="3000" 
                > Mostrar Alerta Desativado </button>

                <button SwConfirm
                    data-message="Deseja confirmar?"
                    data-confirm-text="Sim"
                    data-cancel-text="Não"
                > Confirmar </button>

Uso Programático (JavaScript)

        
                    
                <script src="SwAlert-nomodule.js"></script>
                <script>
                swalertJs.sucesso("Mensagem de sucesso");
                swalertJs.erro("Erro ao processar", 4000);
                swalertJs.ativado("Ativado com sucesso!");
                swalertJs.desativado("Desativado com sucesso!");
                swalertJs.showConfirm(
                    "Confirma a ação?",
                    function () { console.log("Confirmado"); },
                    function () { console.log("Cancelado"); },
                    "Sim",
                    "Não"
                );
                </script>

Métodos Principais

showAlert(message, type, duration): Exibe um alerta personalizado.
showConfirm(message, onConfirm, onCancel, confirmText, cancelText): Exibe um diálogo de confirmação.
Auxiliares para tipos de alertas: base, sucesso, erro, alerta, infor, ativado, desativado.

Estilos são injetados dinamicamente para garantir funcionamento independente do CSS externo.

SwFile

O componente SwFile é uma biblioteca JavaScript para criar inputs de arquivo modernos e estilizados, com suporte para seleção única ou múltipla de imagens.

Funcionalidades

Suporte para seleção única ou múltipla de arquivos (imagens).
Exibe o nome do arquivo selecionado ou a quantidade de arquivos selecionados.
Botão estilizado com gradiente, sombra e ícone SVG.
Acessível via teclado e com feedback visual claro.
Fácil de integrar em qualquer container HTML.

Uso

        
            
                import SwFile from "./componentes/SwFile.js";
                window.addEventListener("load", () => {
                SwFile.initAll();
                });

HTML

        
            
                <div class="swfile-container" data-multiple data-name="images"></div>

SwFormValidator

O componente SwFormValidator oferece validação simples e personalizável para formulários HTML, com suporte a campos obrigatórios, emails, tamanhos mínimos e máximos.

Uso Básico

        
                
                <form class="swformvalidator" id="FormAdd" method="post" enctype="multipart/form-data">
                    <!-- campos do formulário -->
                </form>

Exemplo de Inicialização Manual

        
            
                import SwFormValidator from './SwFormValidator.js';

                const form = document.getElementById('FormAdd');
                const validator = new SwFormValidator(form);

                form.addEventListener('submit', function(event) {
                    if (!validator.validate()) {
                        event.preventDefault();
                    }
                });

Funcionalidades

Validação de campos obrigatórios, emails, tamanho mínimo e máximo.
Mensagens de erro personalizadas e exibidas próximas aos campos.
Limpeza automática das mensagens ao modificar os campos.
Injeção automática de estilos CSS para mensagens de erro.
Inicialização automática para formulários com a classe swformvalidator.

SwLgpd

Componente para exibir um aviso simples e elegante de LGPD (Lei Geral de Proteção de Dados) em sites.

Descrição

O SwLgpd exibe um banner fixo no rodapé da página com uma mensagem sobre o uso de cookies e dois botões para o usuário aceitar ou rejeitar. Ao aceitar ou rejeitar, o aviso desaparece e a escolha é salva em cookie com tempo de expiração configurável.

Uso

Adicione um container com a classe CSS .swlgpd no seu HTML, por exemplo:

        
            <div class="swlgpd" ok="365"></div>

O atributo ok define o tempo de expiração do cookie em dias. Se não informado, o padrão é 365 dias.

O componente será inicializado automaticamente ao carregar a página.

Personalização

A mensagem padrão pode ser alterada editando o conteúdo do elemento .swlgpd-message dentro do container.
O estilo pode ser customizado via CSS, sobrescrevendo as classes .swlgpd, .swlgpd-message, .swlgpd-buttons, .swlgpd-button-accept e .swlgpd-button-reject.
O ícone antes da mensagem é um sino animado do Boxicons, que requer a biblioteca Boxicons carregada no site.

Exemplos

Exemplo básico de uso no HTML:

        
            
                <div class="swlgpd" ok="180"></div>

Exemplo de personalização da mensagem (HTML dentro do container):

        
            
                <div class="swlgpd" ok="180">
                    <div class="swlgpd-message">
                        Este site usa cookies para melhorar sua experiência. <strong>Aceite ou rejeite.</strong>
                    </div>
                </div>

Inicialização Manual

Para inicializar manualmente o componente em containers específicos, use o método JavaScript:

        
            SwLgpd.initAll('.swlgpd');

Métodos

SwLgpd.initAll(containerSelector = '.swlgpd'): Inicializa todos os containers com a classe especificada.

Armazenamento

A aceitação ou rejeição do usuário é salva em cookie com a chave swlgpd_accepted e tempo de expiração definido pelo atributo ok no container. Isso evita que o aviso seja exibido novamente durante o período configurado.

Requisitos

Boxicons deve estar carregado no site para exibir o ícone animado do sino antes da mensagem.

Autor

Desenvolvido para facilitar a conformidade com a LGPD em sites.

SwMasc

O componente SwMasc aplica máscaras em inputs HTML para formatos como telefone, CPF, CNPJ, moeda, data, CEP, cartão de crédito, hora, número, letras e senha.

Uso

        
            import SwMasc from "./plugins/SwMasc.js";

            window.addEventListener("load", () => {
            SwMasc.initAll();
            });

Exemplo de Inputs

        
            
                <input type="text" class="tel" placeholder="(00) 00000-0000" />
                <input type="text" class="cpf" placeholder="000.000.000-00" />
                <input type="text" class="numero" placeholder="Apenas números" />
                <input type="text" class="letra" placeholder="Apenas letras" />
                <input type="password" class="senha" placeholder="Digite sua senha" />

SwNoLink

O componente SwNoLink adiciona comportamento a links com o atributo noLink, prevenindo o comportamento padrão, removendo a âncora da URL e realizando scroll suave até o elemento alvo.

Uso Básico

        
            
                <a href="#idDoElemento" noLink>Link com scroll suave sem alterar a URL</a>

Inicialização

        
            
                import SwNoLink from './SwNoLink.js';
                SwNoLink.initAll();

SwPreload

O plugin SwPreLoad exibe um elemento de preload enquanto a página está carregando, com transição suave para ocultar e mostrar o conteúdo principal.

Uso HTML

        
            
                <div SwPreLoad id="preload">Carregando...</div>
                <main style="display:none;">
                    <!-- Conteúdo principal da página -->
                </main>

Inicialização

O plugin pode ser inicializado automaticamente para todos os elementos com o atributo SwPreLoad via SwPreLoad.initAll().

Observações Técnicas

Elemento de preload posicionado fixo cobrindo toda a tela.
Transição de ocultação usa opacidade e transformação de slide para cima.
Garante tempo mínimo de exibição para melhor experiência visual.
CSS não incluso.

SwScrollSpy

O plugin SwScrollSpy monitora a rolagem da página e destaca automaticamente os itens do menu ou seções correspondentes, facilitando a navegação e melhorando a experiência do usuário.

Funcionalidades

Detecção automática da seção visível na viewport.
Atualização dinâmica dos itens do menu com classe ativa.
Suporte a múltiplos containers e menus.
Configuração simples via atributos HTML ou JavaScript.

Uso Básico

Adicione o atributo SwScrollSpy ao container do menu e defina os links para as seções da página.


        <nav SwScrollSpy>
            <a href="#secao1">Seção 1</a>
            <a href="#secao2">Seção 2</a>
        </nav>

Inicialização

O plugin é inicializado automaticamente ao carregar a página via SwScrollSpy.initAll().

SwType

O componente SwType é um componente de animação de digitação (typewriter effect) que exibe textos digitados automaticamente com efeito de máquina de escrever, similar ao typed.js.

Uso

Basta adicionar uma tag HTML com o atributo SwType e configurar os textos e opções via atributos data-strings, data-type-speed, data-back-speed e data-loop.

        
            
                <div SwType data-strings='["Olá, mundo!", "Bem-vindo ao SWPLUG."]' data-type-speed="60" data-back-speed="40" data-loop="true"></div>

Funcionalidades

Animação automática de digitação e deleção de textos.
Configuração de velocidade de digitação e deleção.
Suporte a múltiplas strings para digitar em sequência.
Opção para repetir a animação em loop.

Inicialização

O componente é inicializado automaticamente pelo arquivo swplugin.js para todos os elementos com o atributo SwType.

Estilos

Os estilos são definidos pelo CSS do projeto e podem ser customizados conforme necessário.

SwTool

O componente SwTool é um sistema leve e personalizável de tooltips para exibir informações contextuais ao passar o mouse sobre elementos da página.

Funcionalidades

Exibe tooltips para elementos com os atributos SwTool ou data-tooltip.
Suporte a múltiplas posições: top (padrão), bottom, left, right e mouse (segue o cursor).
Estilos injetados dinamicamente para garantir isolamento e fácil customização.
Animações suaves de aparecimento e desaparecimento com transição de opacidade e escala.
Posicionamento inteligente para evitar que o tooltip saia da viewport.
Métodos estáticos para inicializar e destruir todas as tooltips da página.

Uso Básico (HTML)

Adicione o atributo SwTool ou data-tooltip ao elemento que deseja exibir a tooltip, e opcionalmente data-pos para definir a posição:


        <button SwTool="Clique aqui para enviar" data-pos="bottom">Enviar</button>
        <span data-tooltip="Informação adicional" data-pos="right">?</span>

Inicialização Automática

O SwTool é inicializado automaticamente para todos os elementos com os atributos SwTool ou data-tooltip ao chamar:


        SwTool.initAll();

Métodos Principais

SwTool.initAll(): Inicializa todas as tooltips na página.
SwTool.destroyAll(): Remove todas as tooltips e listeners associados.

Exemplo Completo


        <button SwTool="Salvar alterações" data-pos="top">Salvar</button>
        <button SwTool="Excluir item" data-pos="left">Excluir</button>
        <span data-tooltip="Mais informações" data-pos="mouse">?</span>

        <script type="module">
            import SwTool from './SwTool.js';
            SwTool.initAll();
        </script>

Estilos

Os estilos são injetados automaticamente pelo componente, mas podem ser customizados via CSS sobrescrevendo as classes .swtool e .swtool-[posição].

Sys

SwDatableIn

SwDatableIn é um componente JavaScript que adiciona funcionalidades de busca, paginação e ordenação a tabelas HTML estáticas, sem necessidade de backend.

Uso HTML

Nome	Idade	Cidade
Ana	28	São Paulo
Bruno	35	Rio de Janeiro
Carla	22	Belo Horizonte
Daniel	40	Curitiba
Elisa	31	Porto Alegre
Felipe	27	Salvador

        
             
                <table SwDatableIn data-items="5" class="tabela">
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Idade</th>
                            <th>Cidade</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td>Ana</td><td>28</td><td>São Paulo</td></tr>
                        <tr><td>Bruno</td><td>35</td><td>Rio de Janeiro</td></tr>
                        <tr><td>Carla</td><td>22</td><td>Belo Horizonte</td></tr>
                        <tr><td>Daniel</td><td>40</td><td>Curitiba</td></tr>
                        <tr><td>Elisa</td><td>31</td><td>Porto Alegre</td></tr>
                        <tr><td>Felipe</td><td>27</td><td>Salvador</td></tr>
                    </tbody>
                </table>

Inicialização JavaScript

        
            import SwDatableIn from './plugins/SwDatableIn.js';

            window.addEventListener('load', () => {
            SwDatableIn.initAll();
            });

Funcionalidades

Busca para filtrar linhas da tabela.
Paginação com botões de navegação.
Ordenação clicando nos cabeçalhos das colunas.
CSS não incluso.

Não requer backend e manipula diretamente as linhas existentes na tabela.

SwDatableAjax

O plugin SwDatableAjax permite carregar e atualizar dados JSON em tabelas HTML via JavaScript, oferecendo funcionalidades avançadas como busca, paginação, ordenação e atualização dinâmica.

Funcionalidades Principais

Carregamento de dados JSON via AJAX a partir de uma URL configurável.
Busca integrada para filtrar os dados exibidos na tabela.
Paginação com botões para navegar entre páginas de dados.
Ordenação clicando nos cabeçalhos das colunas, com indicadores visuais.
Atualização dinâmica dos dados com método refreshData().
Registro estático das instâncias para controle externo.
CSS não incluso.

Nova funcionalidade: Atualização Externa

Agora o plugin possui um método estático SwDatableAjax.refresh(selector) que permite atualizar os dados da tabela externamente, facilitando a integração com outros scripts.

Uso

        
            // Atualiza a tabela pelo seletor CSS
            SwDatableAjax.refresh('#idDaTabela');

            // Ou atualiza passando o elemento da tabela diretamente
            const tabela = document.querySelector('#idDaTabela');
            SwDatableAjax.refresh(tabela);

Exemplo de Inicialização

        
            import SwDatableAjax from './SwDatableAjax.js';

            // Inicializa todas as tabelas com o atributo SwDatableAjax
            SwDatableAjax.initAll();

            // Ou inicializa uma tabela específica
            const tabela = document.querySelector('#idDaTabela');
            const instancia = new SwDatableAjax(tabela, {
                dataUrl: '/api/dados',
                rowsPerPage: 10,
                columns: [
                    { key: 'nome', html: false },
                    { key: 'idade', html: false },
                    { key: 'acoes', html: true }
                ]
            });

Sobre a opção html nas colunas

A propriedade html indica se o conteúdo da célula deve ser interpretado como HTML (true) ou como texto simples (false).

Quando html: true, o conteúdo é inserido usando innerHTML, permitindo incluir elementos HTML, botões, ícones, etc.

Quando html: false, o conteúdo é inserido como texto puro usando textContent, evitando a interpretação de tags HTML.

Benefícios

Permite controle externo da atualização dos dados da tabela.
Facilita a integração com outros scripts e sistemas.
Mantém a interface do componente limpa e organizada.
Melhora a experiência do usuário com dados sempre atualizados.

SwLinkAjax

O componente SwLinkAjax permite carregar conteúdo via AJAX ou exibir conteúdo de divs ocultas com efeitos visuais de entrada. Ele suporta múltiplos efeitos configuráveis individualmente por link.

Uso

Inclua o script do componente na sua página:

        
            
                <script type="module" src="SWPLUG/componentes/SwLinkAjax.js"></script>

Configuração dos links

Defina links com o atributo SwLinkAjax e os atributos necessários para configurar o comportamento:

        
            
                <a SwLinkAjax 
                    data-id="id-do-elemento-alvo" 
                    data-link="url-ou-id-da-div-oculta" 
                    data-f="efeito" 
                    data-active="true|false" 
                    data-on="true|false">
                    Texto do link
                </a>

Atributos

data-id: ID do elemento onde o conteúdo será inserido.
data-link: URL para carregar via AJAX ou ID da div oculta para exibir.
data-f: Efeito de entrada ao carregar o conteúdo. Pode ser:
- fade
- slide
- left fade
- right fade
- top fade
- bottom fade
- zoom
- zoom top
- zoom bottom
data-active: Se true, indica que o conteúdo será carregado a partir de uma div oculta com o ID especificado em data-link.
data-on: Se true, o conteúdo deste link será carregado automaticamente na inicialização do componente.

Inicialização

Inicialize o componente passando o seletor do container e opções globais:

        
            import SwLinkAjax from './SWPLUG/componentes/SwLinkAjax.js';
            SwLinkAjax.initAll('body', { effect: 'fade', active: false });

Exemplo

        
            
                <nav>
                    <a SwLinkAjax data-id="content" data-link="conteudo1.html" data-f="fade" data-on="true" href="#">Conteúdo 1</a>
                    <a SwLinkAjax data-id="content" data-link="conteudo2.html" data-f="slide" href="#">Conteúdo 2</a>
                    <a SwLinkAjax data-id="content" data-link="hiddenDiv" data-active="true" data-f="left fade" href="#">Conteúdo Oculto</a>
                </nav>

                <div id="content"></div>

                <div id="hiddenDiv" style="display:none;">
                    <p>Conteúdo oculto que será exibido com efeito.</p>
                </div>

Funcionalidades

Carrega conteúdo via AJAX ou exibe conteúdo de divs ocultas.
Suporta múltiplos efeitos de entrada configuráveis por link.
Permite carregar automaticamente um conteúdo inicial.
Mantém a div oculta original intacta e oculta.

Requisitos

Navegador com suporte a ES Modules e Fetch API.

SwMixTup

Componente para filtrar itens em múltiplos grupos de filtros, com suporte a checkboxes, selects, elementos clicáveis e opção "all" para limpar filtros, além de animação opcional.

Permite filtrar elementos em uma lista ou grid com base em múltiplos grupos de filtros. Suporta filtros por checkbox, select e elementos clicáveis como links, listas ou divs com o atributo data-filter. A opção especial "all" permite limpar os filtros e mostrar todos os itens.

Exemplo de uso:

Todos Vermelho Azul Verde

Todos
Círculo
Quadrado
Triângulo

Vermelho Círculo

Azul Quadrado

Verde Triângulo

Vermelho Quadrado

Azul Círculo


        <div data-filter-group="color">
            <a href="#" data-filter="all" class="active">Todos</a>
            <a href="#" data-filter=".red">Vermelho</a>
            <a href="#" data-filter=".blue">Azul</a>
            <a href="#" data-filter=".green">Verde</a>
            </div>
            <div data-filter-group="shape">
                <ul>
                    <li data-filter="all" class="active">Todos</li>
                    <li data-filter=".circle">Círculo</li>
                    <li data-filter=".square">Quadrado</li>
                    <li data-filter=".triangle">Triângulo</li>
                </ul>
                </div>
                <div SwMixTup data-filter-groups="color,shape" data-item-selector=".mixitup-item" data-animation="true">
                    <div class="mixitup-item red circle">Vermelho Círculo</div>
                    <div class="mixitup-item blue square">Azul Quadrado</div>
                    <div class="mixitup-item green triangle">Verde Triângulo</div>
                    <div class="mixitup-item red square">Vermelho Quadrado</div>
                    <div class="mixitup-item blue circle">Azul Círculo</div>
                </div>

Funcionalidades

Suporte a múltiplos grupos de filtros.
Filtros por checkbox, select e elementos clicáveis (links, li, divs).
Suporte à opção "all" para limpar filtros e mostrar todos os itens.
Animação opcional na exibição e ocultação dos itens filtrados.
Atualização dinâmica dos filtros ao clicar ou alterar os controles.
Garante que a opção "all" seja ativada por padrão quando nenhum filtro estiver ativo.

Observações

Elementos clicáveis com data-filter recebem a classe active ao serem selecionados.
A seleção da opção "all" desativa outras opções no mesmo grupo.
O componente atualiza os itens exibidos conforme os filtros ativos.
O CSS para estilos dos filtros e itens deve ser definido no projeto conforme necessidade.

SwModal

O plugin SwModal é um componente JavaScript para criação de modais (popups) com suporte a efeitos de transição, tamanhos variados e controle via teclado.

Uso HTML

        
                
            <div SwModal id="meuModal" data-effect="fade" data-size="M">
                <div class="swmodal-content">
                    <div class="topo-modal">Título do Modal</div>
                    <!-- Conteúdo do modal -->
                    <div class="l">
                        <div class="co6-g">
                            <button type="button" class="btn btn100" onclick="SwModal.close('meuModal')">
                                Cancelar
                            </button>
                        </div>
                        <div class="co6-g">
                            <button type="submit" id="AddBtn" class="btn btn100">Salvar</button>
                        </div>
                    </div>
                </div>
            </div>

Opções de Tamanho

Os tamanhos disponíveis para o modal são:

PP: até 380px de largura
P: até 576px de largura
M: até 992px de largura (padrão)
G: até 1200px de largura
GG: até 1400px de largura
XG: até 1780px de largura
Full: ocupa 100% da largura e altura da tela

Efeitos de Transição

Os efeitos de transição configuráveis são:

fade: transição suave de opacidade (padrão)
slide: transição com deslocamento vertical
zoom: transição com escala

Controle via JavaScript

Use os métodos globais SwModal.open(id) e SwModal.close(id) para abrir e fechar modais programaticamente.

Abrir modal via botão

Adicione o atributo data-modal-id="#idDoModal" em botões ou links para abrir modais ao clicar.

        
            
                <button data-modal-id="#meuModal">Abrir Modal</button>

Funcionalidades

Modal centralizado com overlay escuro.
Botão de fechar automático inserido dinamicamente.
Fechamento ao clicar fora do conteúdo ou pressionar ESC.
Efeitos de transição configuráveis (fade, slide, zoom).
Tamanhos configuráveis (PP, P, M, G, GG, XG, Full).

O plugin é inicializado automaticamente ao carregar a página para todos os elementos com o atributo SwModal.

SwPage

O plugin SwPage permite paginação simples de elementos filhos dentro de um container, exibindo um número configurável de itens por página.

Uso HTML

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

        
            
                <div SwPage data-items="5">
                    <div>Item 1</div>
                    <div>Item 2</div>
                    <div>Item 3</div>
                    <div>Item 4</div>
                    <div>Item 5</div>
                    <div>Item 6</div>
                    <div>Item 7</div>
                </div>

Inicialização

O plugin é inicializado automaticamente via SwPage.initAll().

Parâmetros

itemsPerPage: número de itens a exibir por página (padrão: 5, configurável via data-items).
CSS não incluso.

Os estilos para os controles de paginação estão definidos no CSS do plugin.

SwPageinfinite

O plugin SwPageInfinite implementa paginação infinita para elementos filhos dentro de um container, carregando mais itens automaticamente ao rolar próximo ao final.

Uso HTML

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

        
            
                <div SwPageInfinite data-items="5">
                    <div>Item 1</div>
                    <div>Item 2</div>
                    <div>Item 3</div>
                    <!-- mais itens -->
                </div>

Inicialização

O plugin pode ser inicializado automaticamente via SwPageInfinite.initAll() ou manualmente com opções para callback de carregamento.

Opções Principais

itemsPerPage: número de itens exibidos inicialmente e carregados a cada vez (padrão: 5).
loadMoreCallback: função assíncrona para carregar novos itens dinamicamente.
threshold: distância em pixels do final para disparar carregamento (padrão: 300).
loadingClass: classe CSS durante carregamento (padrão: 'loading').
noMoreItemsClass: classe CSS quando não há mais itens (padrão: 'no-more-items').
CSS não incluso.

SwSlider

O componente SwSlider cria carrosséis e sliders responsivos para exibir imagens ou conteúdos variados com navegação por setas e indicadores.

Funcionalidades

Suporte a múltiplos slides e navegação manual.
Configuração de autoplay e intervalos.
Responsivo e adaptável a diferentes tamanhos de tela.
Suporte a eventos para controle externo.
CSS não incluso.

Uso Básico


        <div id="slider1" class="sw-slider">
            <div class="sw-slide"><img src="assets/images/page/progressive01.png" alt="Imagem 1"></div>
            <div class="sw-slide"><img src="assets/images/page/progressive02.png" alt="Imagem 2"></div>
        </div>

Inicialização

O plugin é inicializado automaticamente via SwSlider.initAll().

Animações

SwAnime

O plugin SwAnime aplica efeitos visuais animados a elementos HTML quando eles entram ou saem da viewport, utilizando a API Intersection Observer.

Atributos HTML

data-anime: Tipo de animação (fade, fadeIn, fadeLeft, fadeRight, fadeTop, fadeBottom, zoom, rotate).
data-tam: Velocidade da animação (P - rápido, M - médio, G - lento).
data-px: Distância em pixels para animações de translação.

Exemplo

fade

fadeRight

fadeTop

fadeBottom

zoom

rotate

        
                
                <div SwAnime data-anime="fade" data-tam="G" data-px="30">fade</div>
                <div SwAnime data-anime="fadeIn" data-tam="G" data-px="60">fadeRight</div>
                <div SwAnime data-anime="fadeRight" data-tam="G" data-px="90">fadeRight</div>
                <div SwAnime data-anime="fadeTop" data-tam="G" data-px="60">fadeTop</div>
                <div SwAnime data-anime="fadeBottom" data-tam="G" data-px="30">fadeBottom</div>
                <div SwAnime data-anime="zoom" data-tam="G" data-px="60">zoom</div>
                <div SwAnime data-anime="rotate" data-tam="G" data-px="90">rotate</div>

O plugin é inicializado automaticamente ao carregar a página, buscando todos os elementos com o atributo SwAnime.

As animações são definidas via CSS injetado dinamicamente pelo plugin, utilizando keyframes para os diferentes efeitos.

SwOcult e SwReve

Revela

Oculta

Os plugins SwOcult e SwReve trabalham juntos para ocultar e revelar elementos na página com animações suaves baseadas na rolagem do usuário.

SwOcult

O plugin SwOcult revela elementos ao rolar para baixo além de um limite e oculta ao rolar para cima, com animações de slide e fade, comportando-se igual ao SwReve.

Uso HTML

        
        
            <div SwOcult="600,left">Ocultar</div>

O valor 600 é o limite de rolagem em pixels para ativar a ocultação. A direção pode ser left, right, top ou bottom.

Inicialização

O plugin é inicializado automaticamente ao carregar a página via SwOcult.initAll().

Parâmetros

scrollThreshold: Limite de rolagem para ocultar o elemento (padrão: 600).
animation: Tipo de animação para ocultar (slide para left, right, top ou fade).

O plugin utiliza transformações CSS e opacidade para as animações.

SwReve

O plugin SwReve revela elementos com animações quando eles entram na viewport durante a rolagem, usando a API Intersection Observer.

Uso HTML

        
            
                <div SwReve="600,left">Revelado</div>

Os atributos configuram o tipo de animação (data-anime), a duração (data-tam) e o deslocamento em pixels (data-px).

Inicialização

O plugin é inicializado automaticamente ao carregar a página via SwReve.initAll().

Parâmetros

data-anime: Tipo de animação (fade, slide, zoom, etc.).
data-tam: Tamanho/duração da animação (P, M, G).
data-px: Deslocamento em pixels para animações de translação.
CSS não incluso.

O plugin utiliza CSS para animar a entrada dos elementos na viewport.

Basicos

SwAccordion

O plugin SwAccordion permite criar seções de acordeão em páginas web, onde os usuários podem expandir ou recolher conteúdos clicando nos cabeçalhos das seções.

Uso Básico

Título 1

Conteúdo da seção 1.

Título 2

Conteúdo da seção 2.

        
            
                <div id="meuAcordeao" class="swaccordion">
                    <div class="swaccordion-item">
                        <div class="swaccordion-header">Título 1</div>
                        <div class="swaccordion-content">
                        <p>Conteúdo da seção 1.</p>
                        </div>
                    </div>
                    <div class="swaccordion-item">
                        <div class="swaccordion-header">Título 2</div>
                        <div class="swaccordion-content">
                        <p>Conteúdo da seção 2.</p>
                        </div>
                    </div>
                </div>

Inicialização

O plugin é inicializado automaticamente para todos os containers com a classe .swaccordion ao carregar a página. Para inicialização manual:

        
                
                import SwAccordion from './SwAccordion.js';
                const acordeao = new SwAccordion('#meuAcordeao', false); // false para permitir apenas um aberto

Parâmetros

container: Seletor CSS ou elemento DOM do container do acordeão.
allowMultipleOpen: Booleano que indica se múltiplos itens podem estar abertos simultaneamente (padrão: false).
animationDuration: Duração da animação em milissegundos (padrão: 300).
O CSS não acompanha!

O plugin utiliza transições CSS para animar a expansão e recolhimento do conteúdo. É importante que a estrutura HTML siga o padrão esperado para o funcionamento correto.

SwBadge

O componente SwBadge é uma pequena etiqueta visual usada para indicar status, contagens ou notificações em elementos da interface.

Funcionalidades

Suporte a diferentes tipos visuais: primary, success, warning, danger, info.
Fácil aplicação em qualquer elemento HTML.
Permite atualização dinâmica do conteúdo e do tipo do badge.
Inicialização automática para todos os elementos com a classe .swbadge.
CSS não incluso.

Uso HTML

Novo Sucesso Aviso Erro

        
                
                <span class="swbadge swbadge-primary">Novo</span>
                <span class="swbadge swbadge-success">Sucesso</span>
                <span class="swbadge swbadge-warning">Aviso</span>
                <span class="swbadge swbadge-danger">Erro</span>

Uso JavaScript

        
             
                import SwBadge from './SwBadge.js';

                const badge = new SwBadge('.swbadge-primary');
                badge.setContent('Atualizado');
                badge.setType('success');

Os estilos básicos devem ser definidos no CSS do projeto, com classes para cada tipo visual.

SwDay

SwDay é um componente de botão fixo que permite alternar entre modo diurno e noturno no site, exibindo dois ícones (sol e lua) empilhados verticalmente, destacando o ícone ativo e deixando o inativo com opacidade reduzida.

Uso Declarativo (HTML)

        
            
                <div class="swday"></div>

Uso de Usar no (CSS)

        
        html.swday-day {
          --background-color: #ffffff;
          --text-color: #000000;
        }

        html.swday-night {
          --background-color: #121212;
          --text-color: #ffffff;
        }

        body {
          background-color: var(--background-color);
          color: var(--text-color);
          transition: background-color 0.3s ease, color 0.3s ease;
        }

Resumo

O componente SwDay facilita a implementação do modo claro/escuro no seu site, com um botão visualmente destacado, persistência da preferência do usuário e fácil integração via container HTML e inicialização automática.

SwDrop

O componente SwDrop fornece funcionalidade de menu dropdown com suporte a abertura, fechamento, submenus e acessibilidade básica.

Funcionalidades

Toggle de abertura e fechamento ao clicar no botão.
Fechamento automático ao clicar fora do menu.
Suporte a submenus que aparecem ao passar o mouse.
Inicialização automática para elementos com a classe .drop2.
Estilos CSS padrão injetados automaticamente, podendo ser sobrescritos.
Controle de acessibilidade via aria-hidden e pointer-events.

Uso HTML

        
            
                <div class="drop2" style="position: relative; display: inline-block;">
                    <button class="drop2-btn" type="button">Menu</button>
                    <div class="drop2-menu" role="menu">
                        <a href="#" role="menuitem">Item 1</a>
                        <div class="drop2-has-submenu" role="menuitem" tabindex="0" style="position: relative;"> Item 2 Sub
                            <div class="drop2-submenu drop2-menu" role
                                <a href="#" role="menuitem">Subitem 2.1</a>
                            </div>
                        </div>
                    </div>
                </div>

Uso JavaScript

        
            import SwDropdown from './SwDrop.js';
            const dropdown = new SwDrop('.swdrop');

Os estilos básicos devem ser definidos no CSS do projeto.

SwImgbox

O plugin SwImgbox exibe imagens em modal (lightbox) com suporte a múltiplas imagens agrupadas, navegação por setas e teclado, e exibição de título.

Uso HTML

        
            
                <a href="img/progressive01.png" SwImgbox data-group="galeria1" data-title="Imagem 1 - Paisagem bonita">
                    <img src="img/progressive01_thumb.png" alt="Imagem 1" width="100" />
                    </a>
                    <a href="img/progressive02.png" SwImgbox data-group="galeria1" data-title="Imagem 2 - Outra paisagem">
                    <img src="img/progressive02_thumb.png" alt="Imagem 2" width="100" />
                </a>

Inicialização

        
            import SwImgbox from './SwImgbox.js';
            const imgbox = new SwImgbox(element, groupElements, groupName);

O plugin é inicializado automaticamente pelo arquivo js/swplugin.js que chama SwImgbox.initAll().

SwLazyLoad

O plugin SwLazyLoad implementa carregamento preguiçoso (lazy load) de imagens usando IntersectionObserver, com efeito visual suave de fade e crescimento.

Uso HTML

        
            
                <img src="miniatura.jpg" data-src="imagem.jpg" SwLazyLoad alt="Descrição da imagem" />

Inicialização

        
            import SwLazyLoad from './SwLazyLoad.js';
            SwLazyLoad.initAll();

O plugin é inicializado automaticamente pelo arquivo js/swplugin.js que chama SwLazyLoad.initAll().

SwTable

O plugin SwTable oferece funcionalidades avançadas para tabelas HTML, incluindo ordenação, filtro e paginação, facilitando a manipulação de dados tabulares.

Funcionalidades

Ordenação clicando nos cabeçalhos das colunas.
Filtro de linhas por texto.
Paginação configurável.
Suporte a temas e customizações via CSS.

Uso Básico

Nome	Idade	Cidade
Ana	28	São Paulo
Bruno	35	Rio de Janeiro
Sandro	51	Recife
Alisson	12	Bahia

        
            
                <table SwTable>
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Idade</th>
                            <th>Cidade</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td>Ana</td><td>28</td><td>São Paulo</td></tr>
                        <tr><td>Bruno</td><td>35</td><td>Rio de Janeiro</td></tr>
                        <tr><td>Sandro</td><td>51</td><td>Recife</td></tr>
                        <tr><td>Alisson</td><td>12</td><td>Bahia</td></tr>
                    </tbody>
                </table>

Inicialização

O plugin é inicializado automaticamente via SwTable.initAll().

SwTabs

O componente SwTabs permite criar abas para organizar conteúdos em seções distintas, facilitando a navegação e a organização visual.

Funcionalidades

Suporte a múltiplas abas com navegação por clique.
Configuração de abas ativas por padrão.
Transições suaves entre abas.
Compatível com acessibilidade básica.
CSS não incluso.

Uso Básico

Conteúdo da Aba 1

Conteúdo da Aba 2


        <div SwTabs class="swtabs wp100">
            <button class="swtabs-tab" data-tab="tab1">Aba 1</button>
            <button class="swtabs-tab" data-tab="tab2">Aba 2</button>
            <div id="tab1" class="swtabs-panel">Conteúdo da Aba 1</div>
            <div id="tab2" class="swtabs-panel">Conteúdo da Aba 2</div>
        </div>

Inicialização

O plugin é inicializado automaticamente via SwTabs.initAll().

SwTop

O plugin SwTop adiciona um botão para voltar ao topo da página com animação suave, melhorando a usabilidade em páginas longas.

Funcionalidades

O botão aparece automaticamente após o usuário rolar a página além de uma distância configurável (em pixels).
Ao clicar no botão, a página realiza um scroll suave de volta ao topo, proporcionando uma experiência agradável.
É possível configurar a distância de rolagem para exibir o botão e a velocidade da animação de scroll.
O plugin utiliza eventos de scroll para monitorar a posição da página e controlar a visibilidade do botão.

Configuração

O atributo SwTop aceita dois valores separados por vírgula:

Distância para mostrar o botão (em pixels): distância que o usuário deve rolar para que o botão apareça. Exemplo: 600.
Velocidade do scroll (em milissegundos): duração da animação de scroll ao clicar no botão. Exemplo: 200.

Uso Básico


        <div SwTop="600,200">
            <i class="bx bx-chevron-up"></i>
        </div>

Inicialização

O plugin é inicializado automaticamente para todos os elementos com o atributo SwTop ao chamar:


        SwTop.initAll();

Também é possível inicializar manualmente passando um seletor CSS ou elementos DOM.

Conteúdo do modal tamanho PP.

Conteúdo do modal tamanho P.

Conteúdo do modal tamanho M.

Conteúdo do modal tamanho G.

Conteúdo do modal tamanho XG.

Conteúdo do modal tamanho Full.