Alpine.js Examples

Demonstration of interactive components with Alpine.js

Alpine.js is a lightweight and modern JavaScript framework for creating interactive client-side components. This page demonstrates various practical examples of how to use Alpine.js with the SysVector system.

Simple Counter

Basic example of a counter with buttons to increment, decrement and reset.

Tabs

Tabs component to switch between different contents.

First Tab

This is the content of the first tab. You can place any type of content here.

Second Tab

This is the content of the second tab. Tabs are useful for organizing related information.

Third Tab

This is the content of the third tab. Alpine.js makes creating interactive components very simple.

Accordion

Accordion component that can be expanded and collapsed.

Alpine.js is a robust and minimal JavaScript framework for adding interactive behavior to your HTML. Think of it as Tailwind for JavaScript.

Alpine.js can be easily integrated with SysVector. Just include the script in the layout and use the x-data, x-show, x-if, etc. attributes in your Twig templates.

Alpine.js is lightweight (only 15KB), easy to learn, requires no build step and works perfectly with any backend framework.

Modal

Modal window that can be opened and closed.

Modal Title
This is an example of a modal created with Alpine.js. Modals are useful for displaying important information or forms without leaving the current page.

Todo List

Simple todo application with addition, removal and completion marking.

Completed: | Total:

Form with Validation

Example of a form with real-time validation using Alpine.js.

Theme Switcher

Example of how to switch between light and dark themes.

Tema atual:

Dropdown

Dropdown menu that can be opened and closed.

Option 1 Option 2 Option 3

Search and Filter

Real-time search example with list filtering.

No results found

Image Gallery

Image gallery with zoom and navigation.

Progress Bar

Animated progress bar that can be controlled.

Tooltip

Example of tooltips that appear on hover.

Hover over here

Clipboard Area

Copy and paste text using clipboard area.

Clipboard Content
Copied!

Color Picker

Color picker with real-time preview.

HEX Value

RGB Value

Date Picker

Interactive date picker with calendar.

Rating System

Rating system with interactive stars.

Rate this

Current rating:

Carousel

Image carousel with automatic and manual navigation.

Notification System

Notification system with different types and actions.

Integration with Translation System

Alpine.js works perfectly with SysVector's translation system. You can use translated texts in your JavaScript components in several ways:

Method 1: Pass variables from Twig

You can pass translated variables from Twig to Alpine.js using the x-data attribute.
Method 2: Use data-* attributes

Store translated texts in data-* attributes and access them via Alpine.js.
Method 3: Translation API

Create API endpoints to get translations dynamically when needed.

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

Best Practices

Here are some best practices when using Alpine.js with SysVector:

  • Keep logic simple and focused on UI
  • Use reusable components for common functionalities
  • Separate concerns: Alpine.js for interactivity, PHP for business logic
  • Use CSS transitions for smooth animations
  • Test your components in different browsers