📄 ARS Page Router

Component-Based Routing for Web Applications

← Back to Demo Page

About ARS Page Router

This component provides routing functionality for web applications using the remote-call mixin for inter-component communication. It consists of two parts: ars-page for content routing and ars-page-controller for navigation controls.

🔍 Current Status

Current Page: Loading...

Available Pages: Loading...

Total Pages: Loading...

🏠 Home Page

Welcome to the ARS Page Router demo! This is the home page content.

The ARS Page Router provides a simple and efficient way to handle page navigation in web applications using web components and the remote-call mixin for inter-component communication.

Features:

  • Component-based routing
  • Multiple navigation types (buttons, tabs, dropdown)
  • Remote method calling
  • Event-driven architecture
  • Easy to integrate

ℹī¸ About Page

This is the about page content. The ARS Page Router is part of the ARS Web Components library.

How it works:

  1. The ars-page component wraps your page content
  2. Each page is a direct child with a unique ID
  3. The ars-page-controller provides navigation controls
  4. Components communicate via the remote-call mixin
  5. Only one page is visible at a time (unless you show all)

This approach provides clean separation of concerns and makes your application more maintainable.

🔧 Services Page

This is the services page content. Here you can showcase your services or features.

Available Services:

🚀 Web Components

Custom HTML elements with encapsulated functionality

🔗 Remote Communication

Inter-component communication via custom events

🎨 Styling Agnostic

Works with any CSS framework or custom styles

📱 Responsive Design

Mobile-friendly navigation and layouts

📞 Contact Page

This is the contact page content. Here you can provide contact information or a contact form.

Contact Information:

  • Email: contact@arswebcomponents.com
  • GitHub: ars-web-components
  • Documentation: Available in the component demos

The ARS Page Router is designed to be simple yet powerful, providing all the routing functionality you need for modern web applications without the complexity of large frameworks.

📖 Implementation Guide

How to Use ARS Page Router:

Usage: Wrap your custom navigation HTML (e.g., <nav> with <button data-page="home">) inside <ars-page-controller>. The controller will listen for clicks on any child with a data-page attribute and trigger navigation accordingly.

Convention: Use data-page="pageId" on navigation elements to indicate the target page. The controller will automatically add the active class to the button for the current page.

1. Import the components: import './ars-page.js' and import './ars-page-controller.js'

2. Create your page router: <ars-page id="my-router" default-page="home">

3. Add page content as direct children with IDs

4. Create a controller: <ars-page-controller target-page="my-router">...</ars-page-controller>

5. The components will automatically communicate via the remote-call mixin

// HTML Structure <ars-page id="my-router" default-page="home"> <div id="home">Home page content</div> <div id="about">About page content</div> <div id="contact">Contact page content</div> </ars-page> <ars-page-controller target-page="my-router" navigation-type="tabs"> </ars-page-controller>
// JavaScript Usage const router = document.getElementById('my-router'); const controller = document.querySelector('ars-page-controller'); // Listen for page changes router.addEventListener('ars-page:page-changed', (event) => { console.log('Page changed:', event.detail); }); // Programmatic navigation controller.navigateToPage('about');

✨ Features

đŸŽ¯ Simple Setup

Just wrap your content and add navigation controls. No complex configuration needed.

🔄 Multiple Navigation Types

Choose from buttons, tabs, or dropdown navigation styles to match your design.

📡 Remote Communication

Uses the remote-call mixin for decoupled component communication.

🎨 Styling Agnostic

Works with any CSS framework. Use your own styles without conflicts.

📱 Responsive

Mobile-friendly navigation that adapts to different screen sizes.

⚡ Event-Driven

Custom events for page changes and navigation actions.