https://github.com/ymzuiku/vanilla-navi
Like mobile application navigator in Vanilla.js
https://github.com/ymzuiku/vanilla-navi
Last synced: about 2 months ago
JSON representation
Like mobile application navigator in Vanilla.js
- Host: GitHub
- URL: https://github.com/ymzuiku/vanilla-navi
- Owner: ymzuiku
- License: mit
- Created: 2020-03-09T15:27:10.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-12T02:54:05.000Z (over 3 years ago)
- Last Synced: 2025-02-20T14:45:53.583Z (2 months ago)
- Language: TypeScript
- Size: 43 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vanilla-navi
vanilla-navi can use base Document API create a SPA application.
Gzip size: 1KB
## Install
unpkg, use last version:
```html
```
npm:
```sh
$ npm install --save vanilla-navi
```
## Example
```ts
import navi from "./vanilla-navi";
// create Navi instantiation:
function Home() {
const ele = document.createElement("div");
const label = document.createElement("div");
label.textContent = "Home page";
const button = document.createElement("button");
button.textContent = "go user";
button.onclick = () => {
// Go tu User page:
navi.push("/user", { kind: "It is params.kind" });
};
ele.append(label, button);
return ele;
}
function User({ kind }: { kind: string }) {
const ele = document.createElement("div");
const label = document.createElement("label");
label.textContent = kind + " User page";
const button = document.createElement("button");
button.textContent = "back";
button.onclick = () => {
// Go back:
navi.pop();
};
ele.append(label, button);
for (let index = 0; index < 50; index++) {
const label = document.createElement("div");
label.textContent = kind + " User page + " + index;
ele.append(label);
}
return ele;
}
// register a path and a Page Function, Page Function return a HTMLElement:
navi.use("/home", Home);
navi.use("/user", User);
// Setting navi start page, if input error URL, go back start page:
navi.init("/home");
// navi.root is all page's root element:
document.body.append(navi.root);
```
But this page no have page translate animation, let'me create it.
## Use Animate Page
Create two Function, create HTMLElement box:
```ts
// Use Page(ele), can set full page:
function Page(child: HTMLElement) {
const ele = document.createElement("div");
ele.style.width = "100%";
ele.style.height = "100%";
ele.style.backgroundColor = "#fff";
ele.style.position = "fixed";
ele.style.top = "0px";
ele.style.left = "0px";
ele.append(child);
return ele;
}
// AnimaPage is use Base Page create full page, and set the Base Page css animation.
function AnimaPage(child: HTMLElement) {
const ele = Page(child);
ele.style.opacity = "0";
ele.style.transform = "translateY(12%)";
ele.style.transition = "all 0.18s ease-in";
// When page push:
setTimeout(() => {
ele.style.opacity = "1";
ele.style.transform = "translateY(0%)";
ele.style.transition = "all 0.17s ease-out";
}, 50);
// When page pop:
(ele as any)._naviBeforePop = {
// If use navi.Pop, waiting 300ms remove this element:
duration: 300,
// If use navi.Pop, do this event:
event: () => {
ele.style.opacity = "0";
ele.style.transform = "translateY(12%)";
ele.style.transition = "all 0.18s ease-in";
}
};
return ele;
}
```
Ok, Very easy, Let me change the example:
```ts
function Home() {
...
// root page did't use animation:
return Page(ele);
}
function User({ kind }: { kind: string }) {
...
// other page need use animation:
return AnimaPage(ele);
}
```