${message}
Framework7 Web Component adapter
npm install wc-f7Javascript
import { LitElement, html } from 'lit-element'
export class IndexPage extends LitElement {
// page events are declared in static property $on
static get $on() {
return {
pageMounted: function(e, page) {
console.log('page mounted')
},
pageInit: function(e, page) {
console.log('page init', this.level)
}
}
}
get level() {
// $route, $router, $app, $f7, $theme properties are avaliable in instance
return +this.$route.params.level || 0
}
// disables shadow dom
createRenderRoot() {
return this
}
// lifecycle hooks must be declared with $ prefix
$created() {
console.log('$created', this.level)
}
$beforeMount() {
console.log('$beforeMount', this.level)
}
render() {
const level = this.level
const message = level ? 'Hello Again' : 'Hello World!'
return html
}
}
customElements.define('index-page', IndexPage)
`
Create the app and setup the route
`Javascript
import Framework7 from 'wc-f7' // 'wc-f7/bundle' for all components bundled
import { IndexPage } from './index/index-page'
const app = new Framework7({
root: '#app',
routes: [
{
path: '/my-page/level/:level',
component: IndexPage // or 'index-page'
},
],
})
``