Bukunmikuti/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This is a basic illustration of View Router.
You can play with the code and try out more
ways to use View Router.
several views with viewrouter.config.js

For applications with several views, it is better
to instantiate ViewRouter () in a separate
'viewrouter.config.js' file and export. 


// viewrouter.config.js
import ViewRouter from "https://cdn.skypack.dev/@bukunmikuti/view-router"
let v = new ViewRouter ({...});
export default v
//index.js
import v from './viewrouter.config.js' 
v.routeTo(/*id*/)
The mounted() and render() can call other methods for
your application logic. 


Manipulate elements in the view with mounted()
and put your view on-screen logic in the render() method.
Transitions

You can define custom transitions for your views. Simply use
the usual @keyframes animation in your css and reference in view
<template> tag.
/* index.css */
.customTransition {
animation: myCustom 0.5s ease-in-out forwards; 
}

@keyframes {
from {opacity: 0}
to {opacity: 1} 
}
<!-- index.html -->
<template id='about' class='v-router customTransition'>
</template>

  
## index.html
<!DOCTYPE html>
<html>
<!-- Required head tag -->
<body>

<!-- Login -->
<template id="login" class="v-router fadeInLeft">
<h1>Log into your account!</h1>
<input placeholder="username" />
<input placeholder="password" />
<button>Sign in</button>
</template>

<!-- Sign up -->
<template id="signup" class="v-router fadeInRight">
<h1>Create your account!</h1>
<input placeholder="email" />
<input placeholder="password" />
<button>Sign up</button>
</template>


<script type="module" src="index.js"></script>
</body>
</html>

## index.js
import ViewRouter from "https://cdn.skypack.dev/@bukunmikuti/view-router"

let v = new ViewRouter({
views: [
	{
	 id: 'signup',
	 path: '/register',
	 mounted() {
          console.log('signup now accessible')
         },
         render() {
          console.log('Rendered sign up! 🎉');
	 }
	},

	{
	 id: 'login',
	 path: '/login',
	 mounted() {
	  console.log('Log in now accessible')
	 },
	 render() {
	  console.log('Rendered Log in 🎉')
	 }
	}
	],

	navigation: 'hash',
	transition: true,
})


//show log in
v.routeTo('login')
	<!DOCTYPE html>
	<html>
	<!-- Required head tag -->
	<body>

	<!-- Login -->
	<template id="login" class="v-router fadeInLeft">
	<h1>Log into your account!</h1>
	<input placeholder="username" />
	<input placeholder="password" />
	<button>Sign in</button>
	</template>

	<!-- Sign up -->
	<template id="signup" class="v-router fadeInRight">
	<h1>Create your account!</h1>
	<input placeholder="email" />
	<input placeholder="password" />
	<button>Sign up</button>
	</template>




	<script type="module" src="index.js"></script>
	</body>
	</html>
	import ViewRouter from "https://cdn.skypack.dev/@bukunmikuti/view-router"

	let v = new ViewRouter({
	views: [
	{
	id: 'signup',
	path: '/register',
	mounted() {
	console.log('signup now accessible')
	},
	render() {
	console.log('Rendered sign up! 🎉');
	}
	},

	{
	id: 'login',
	path: '/login',
	mounted() {
	console.log('Log in now accessible')
	},
	render() {
	console.log('Rendered Log in 🎉')
	}
	}
	],

	navigation: 'hash',
	transition: true,
	})


	//show log in
	v.routeTo('login')