Exemplos de Alpine.js

Demonstração de componentes interativos com Alpine.js

Alpine.js é um framework JavaScript leve e moderno para criar componentes interativos no lado do cliente. Esta página demonstra vários exemplos práticos de como usar o Alpine.js em conjunto com o sistema SysVector.

Contador Simples

Exemplo básico de um contador com botões para incrementar, decrementar e resetar.

Abas (Tabs)

Componente de abas para alternar entre diferentes conteúdos.

Primeira Aba

Este é o conteúdo da primeira aba. Você pode colocar qualquer tipo de conteúdo aqui.

Segunda Aba

Este é o conteúdo da segunda aba. As abas são úteis para organizar informações relacionadas.

Terceira Aba

Este é o conteúdo da terceira aba. Alpine.js torna a criação de componentes interativos muito simples.

Acordeão

Componente de acordeão que pode ser expandido e recolhido.

Alpine.js é um framework JavaScript robusto e mínimo para adicionar comportamento interativo ao seu HTML. Pense nele como Tailwind para JavaScript.

Alpine.js pode ser facilmente integrado ao SysVector. Basta incluir o script no layout e usar os atributos x-data, x-show, x-if, etc., nos seus templates Twig.

Alpine.js é leve (apenas 15KB), fácil de aprender, não requer build step e funciona perfeitamente com qualquer framework backend.

Modal

Janela modal que pode ser aberta e fechada.

Título do Modal
Este é um exemplo de modal criado com Alpine.js. Modais são úteis para exibir informações importantes ou formulários sem sair da página atual.

Lista de Tarefas

Aplicação simples de lista de tarefas com adição, remoção e marcação de conclusão.

Concluídas: | Total:

Formulário com Validação

Exemplo de formulário com validação em tempo real usando Alpine.js.

Alternador de Tema

Exemplo de como alternar entre temas claro e escuro.

Tema atual:

Dropdown

Menu dropdown que pode ser aberto e fechado.

Opção 1 Opção 2 Opção 3

Busca e Filtro

Exemplo de busca em tempo real com filtro de lista.

Nenhum resultado encontrado

Galeria de Imagens

Galeria de imagens com zoom e navegação.

Barra de Progresso

Barra de progresso animada que pode ser controlada.

Tooltip

Exemplo de tooltips que aparecem ao passar o mouse.

Passe o mouse aqui

Área de Transferência

Copiar e colar texto usando a área de transferência.

Conteúdo da área de transferência
Copiado!

Seletor de Cores

Seletor de cores com preview em tempo real.

Valor HEX

Valor RGB

Seletor de Data

Seletor de data interativo com calendário.

Sistema de Avaliação

Sistema de avaliação com estrelas interativas.

Avalie isto

Avaliação atual:

Carrossel

Carrossel de imagens com navegação automática e manual.

Sistema de Notificações

Sistema de notificações com diferentes tipos e ações.

Integração com Sistema de Tradução

Alpine.js funciona perfeitamente com o sistema de tradução do SysVector. Você pode usar textos traduzidos em seus componentes JavaScript de várias maneiras:

Método 1: Passar variáveis do Twig

Você pode passar variáveis traduzidas do Twig para o Alpine.js usando o atributo x-data.
Método 2: Usar atributos data-*

Armazene textos traduzidos em atributos data-* e acesse-os via Alpine.js.
Método 3: API de Tradução

Crie endpoints API para obter traduções dinamicamente quando necessário.

fetch('/api/translations')
    .then(res => res.json())
    .then(data => {
        // Usar traduções no Alpine.js
    });

Boas Práticas

Aqui estão algumas boas práticas ao usar Alpine.js com SysVector:

  • Mantenha a lógica simples e focada na UI
  • Use componentes reutilizáveis para funcionalidades comuns
  • Separe preocupações: Alpine.js para interatividade, PHP para lógica de negócio
  • Use transições CSS para animações suaves
  • Teste seus componentes em diferentes navegadores