skinny-widgets app element for antd4 theme
app element
``
npm i sk-app sk-app-antd4 --save
then add the following to your html
`html`
base-path="/node_modules/sk-core/src"
theme-path="/node_modules/sk-theme-antd4"
routes='{"page-a": {"PageAConfA": "/examples/spa/page-a-confa.js"}, "page-b": "page-b-confa"}'
>
sk-app is route-to render component that can help you feel like with popular framework SPA app. It allows to map one or more
areas rendering to router path changes. It uses navigo library as runtime dependency to you have to have it loaded
before sk-widgets.
Note: SkApp page load is implemented with dynamic imports browser feature in old browsers it will be switched to script
tag append load. If route value not specified as string (custom element tag name) component load is
performed on route change.
#### attributes
dimport - "false" switches page load from dynamic import to tag appending, also used ass fallback if dynamic imports
supported was not detected in browser. Use it when loading classes from bundles.
ro-root - root attribute for Navigo, default: null
ro-use-hash - use-hash attribute for Navigo, default: true
ro-hash - hash attribute for Navigo, default: '#!'
#### events
skroutestart - triggers on route is started
skrouteend - triggers on route is done
`html
base-path="/node_modules/sk-core/src"
theme-path="/node_modules/sk-theme-antd"
lang="en"
id="configA"
routes='{"page-a": "page-a-confa", "page-b": "page-b-confa"}'
>
base-path="/node_modules/sk-core/src"
theme-path="/node_modules/sk-theme-antd"
lang="en"
id="configB"
routes='{"page-a": "page-a-confb", "page-b": "page-a-confb"}'
>
Pages can be loaded automatically with the following mapping:html
base-path="/node_modules/sk-core/src"
theme-path="/node_modules/sk-theme-antd"
lang="en"
id="configA"
routes='{"page-a": {"PageAConfA": "/examples/spa/page-a-confa.js"}, "page-b": "page-b-confa"}'
>
`You can attach your code to app route change with events:
html
``
#### template
id: SkAppTpl