https://github.com/dsolimando/moko
A lightweight WebComponents based mobile JS lib
https://github.com/dsolimando/moko
custom-elements javascript library mobile webcomponents
Last synced: 2 months ago
JSON representation
A lightweight WebComponents based mobile JS lib
- Host: GitHub
- URL: https://github.com/dsolimando/moko
- Owner: dsolimando
- License: apache-2.0
- Created: 2017-08-22T11:44:22.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T06:01:11.000Z (over 3 years ago)
- Last Synced: 2025-03-15T07:39:11.536Z (over 1 year ago)
- Topics: custom-elements, javascript, library, mobile, webcomponents
- Language: JavaScript
- Size: 9.58 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Moko
Moko is a lightweight WebComponents based navigation library
highly inspired by [React Navigation](https://reactnavigation.org).
It supports three kinds of navigators:
- switch navigator
- stack navigator
- tab navigator
## Switch navigator
Switch navigator only show one content at a time, each route displaying a different content. Content is not cached
Code example:
```html
diego
```
A navigator contains one or multiple ``. A route has two mandatory attributes `path` and `component`.
- `path` associates the route to an url fragment. Each time an url match that path, the component associated with that route will be displayed. The path can contain placeholders
- `component` name of the Web Component to be displayed for a matching route.
Navigation is triggered either with standard `Click` or with safer moko provided custom element
``. `moko-link` supports navigator nesting and only relative (to the closest parent navigator) path must be provided.
If the url fragment is empty, the component associated with the first route will be rendered.
It's possible to define a default route to render with the `default-path` attribute.
By default a navigator will take all the space available in his node ancestor.
### Server side rendering
First `moko-route` element can contain markup that will be displayed before corresponding web component is rendered properly.
It allows to server side render content and make the page SSO friendly.
### Demo
See [switchNavigator.html](./demo/switchNavigator.html) for a complete example.
## Stack navigator
Stack navigator will display new content on top of previous one while navigating.
Code example:
```html
```
### Demo
See [stackNavigator.html](./demo/stack-navigator.html) for a complete example.
### Server side rendering
First `moko-route` element can contain markup that will be displayed before corresponding web component is rendered properly.
It allows to server side render content and make the page SSO friendly.
## Tab navigator
Tab navigator will display a tabbar at the bottom of the screen. Each click on a tab entry will
display different content.
Code example:
```html
Home1
```
### Demo
See [tabNavigator.html](./demo/tab-navigator.html) for a complete example.
### Server side rendering
`moko-tab-navigator` element can contain markup as last child that will be displayed before corresponding web component is rendered properly.
It allows to server side render content and make the page SSO friendly.
### Using navigators in your webpage
Each navigator is available as Web Components through ES6 modules (see the [dist](https://github.com/dsolimando/moko/tree/master/dist) folder).
## Live Demos
* [Switch Navigator](http://plnkr.co/edit/3EWAOLDUtFfWOaupwtdZ?p=preview)
* [Stack Navigator](http://plnkr.co/edit/7CJPynCaB8wyWmMa3EKw?p=preview)
* [Tab Navigator](http://plnkr.co/edit/vC5DSIE2aKzkRlayJTmF?p=preview)