🔗 Quick Access
🧪 Components Demo
📅 ARS Calendar
Interactive calendar component for date selection and event management. Fully customizable with CSS styling.
ARS Calendar Demo →🎨 ARS Color Select
Customizable color picker component with predefined color palette. Features overlay interface and custom events.
ARS Color Select Demo →💬 ARS Dialog
Modal dialog component for user interactions. Supports custom content and styling with backdrop management.
ARS Dialog Demo →📄 ARS Page Router
Component-based router for web apps. Use with ars-page-controller for navigation. Supports remote-call mixin for decoupled navigation.
ARS Page Router Demo →🔄 ARS Data Roller
Animated data display component that cycles through arrays of information with smooth 3D rotation animations. Perfect for status updates, statistics, and dynamic content.
ARS Data Roller Demo →🔧 Mixins Demo
🎯 Pressed Effect
Add touch and mouse press animations to any element. Creates beautiful radial gradient effects for interactive feedback.
Pressed Effect Demo →🌍 Localized
Internationalization support for web components. Automatically translates content based on language settings using arslib integration.
Localized Demo →📡 Remote Call
Inter-component communication system. Allows components to call methods on other components through custom events without direct references.
Remote Call Demo →👆 Swipeable
Touch gesture support for web components. Detects swipe directions (up, down, left, right) and calls corresponding callback methods.
Swipeable Demo →🖱️ Draggable
Drag gesture support for web components. Detects drag start, move, and end events with customizable thresholds. Works seamlessly with other mixins using PointerCoordinator.
Draggable Demo →👁️ Show If Property
Conditional visibility based on property values. Shows or hides elements when specified properties change, perfect for dynamic interfaces.
Show If Property Demo →🔄 Roll Mixin
360° rotation animation on hover with configurable duration. Adds playful interactions to buttons, cards, or any element with automatic hover detection and programmatic control.
Roll Mixin Demo →🚀 Getting Started
📦 Installation
Install the package via npm:
📝 Usage Example
Import and use components in your project:
// In your HTML:
<button is="ars-button" id="myBtn" effect-color="#00d4ff">
Click me!
</button>
🔧 Development Server
To run this demo suite locally:
npm start
This will start an HTTP server on port 8080 and open your browser automatically.
✨ Features
🎯 Pure JavaScript
No framework dependencies. Works with any modern web project, from vanilla JS to React, Vue, or Angular.
🎨 CSS-Friendly
Components are styling-agnostic. Use your own CSS classes and frameworks without conflicts.
⚡ ES Modules
Modern module system with proper imports/exports. Tree-shakeable and optimized for bundlers.
📱 Touch Support
Full mobile and desktop interaction support with touch events and responsive design considerations.