path-router Introduction

This page is an introduction to a custom html element that includes dynamic and interactive content. Custom html elements require javascript to function and cannot be rendered at all if javascript is disbled or otherwise prevented from running.

To demonstrate the custom element, this page also uses a custom element designed for showcasing examples of code. To see the custom element in action, as well as formatted example code and previews of how the custom element can be used, please enable javascript.

Overview

Introduction

This page is an introduction to the path-router custom element. It provides a description of the library and acts as a reference for documentation and examples.

Custom Element

The <path-router> element allows developers to show and hide sections of html contained in "routes" which can either be defined using <route-page> or route-dialog child elements.

The element is designed to provide simple navigation for HTML content.

Routing is done by matching the the <path-router> element's path attribute to one of its child route's path attributes.

Matching path values can be as simple as exact string matches. Routing can be done without any type of dynamic content.

The <path-router> element does, however, account for dynamic content allowing complex matching that uses common string patterns for variables.

Installation

This library is available as a single file that can be referenced using a <script> element. It can also be installed using any of the javascript package managers below:

npm bun pnpm deno yarn


                        npm install @magnit-ce/path-router

npm

bun

pnpm

deno

yarn

Documentation

Custom Element Documentation

Use the custom element documentation to learn more about how to integrate the path-router element into an html project.

Follow the README link to view the library's repository page and get a look at the source directly.

See the library's README View Library Documentation

Quick Reference

Quick Start Snippet

Copy the code from this example and paste it into your project to have a simple starting point for working with this library.


                    
                        Route First
                        Route Second

HTML

Quick Reference Tables

Use the tables, below, to reference the key identifiers used by this custom element, including event types, attribute keys, slot names, and css properties.

Events

This custom element does not dispatch any events.

Attributes

This custom element does not reference any attributes.

Slots

This custom element does not expose any slots.

Parts

This custom element does not expose any parts.

CSS Classes

This library does not apply or expect any classes.

CSS Properties

This custom element does not expose any object properties.

Configs

This library does not expose any configuration objects.

Enumerators

This library does not expose any enumerators.

Constants

This library does not expose any constants.

Assignments

This library does not use any values directly from source code to assign values, properties, or attributes.

Examples

These examples are provided as simple references for practical use cases.

For specific details and feature maps, see the documentation.

Example Placholder

This is provided as an example of using the snippet. It will be overriden when you provide examples in your package file.

HTML content is allowed, but it needs to be escaped for JSON.

Escaped HTML will be injected

Questions & Answers

Placeholder Question

Simplified:

This is provided as an example of using the snippet. It will be overriden when you provide examples in your package file.

HTML content is allowed, but it needs to be escaped for JSON.

Details

Escaped HTML will be injected