English
Guides
@atomico
@atomico/router
powerful router for webcomponents
GitHub - atomicojs/router
GitHub
Atomico JSX
HTML
1
import { render } from "atomico";
2
import { RouterSwitch, RouterCase } from "@atomico/router";
3
4
render(
5
<RouterSwitch>
6
<RouterCase path="/" for="home"></RouterCase>
7
<RouterCase path="/user/{id}" load={async ({id})=>{
8
const data = await getUser(id);
9
return <User {...data}/>
10
}}></RouterCase>
11
<h1 slot="config">home</h1>
12
</RouterSwitch>,
13
document.body
14
)jsx
Copied!
1
<router-switch>
2
<router-case path="/" for="home"></router-case>
3
<router-case path="/config" for="config"></router-case>
4
<section slot="home">...</section>
5
<section slot="config">...</section>
6
</router-switch>
Copied!
RouterSwitch
Controller component of the routes, with it you can:
- 1.Observe the status of route transitions.
- 2.Observe the route in load
- 3.Define the ::part selector to create custom path transitions.
Properties
Props
Description
Type
Event
loading
is defined in case RouterCase defines the load function, the value of loading will be the route that is being loaded asynchronously
String - read only
loading
case
slot to associate at the time of the match with path
String - read only
match
Custom properties
Prop
Type
--router-transition-wait
transition before the entry of the state in
--router-opacity-wait
opacity before the entry of the state in
--router-transform-wait
transform before the entry of the state in
--router-transition-in
--router-opacity-in
--router-transform-in
--router-transition-out
--router-opacity-out
--router-transform-out
Transition example
1
:root{
2
--router-transition-wait: 0.5s ease all;
3
--router-transition-out: 0.5s ease all;
4
--router-transition-in: 0.5s ease all;
5
--router-transform-wait: scale(0.5) translateX(50%);
6
--router-transform-in: translateY(0%);
7
--router-transform-out: scale(0.5) translateX(-50%);
8
--router-opacity-wait: 1;
9
--router-opacity-out: 1;
10
}
Copied!
RouterCase
Component that declares the behavior of the route, with it you can:
- 1.Define a slot to show instantly when matching the browser path.
- 2.Define a load callback to execute when matching the browser route.
Properties
Props
Description
Type
load
asynchronous content loader
Function
for
slot to associate at the time of the match with path
String
path
expression for path
String
memo
memorize the state resolved by load according to the concurrent path
Boolean
Examples
Last modified 3mo ago
Copy link
Edit on GitHub