jonelson-tmp-page
v0.0.1
Published
ak-page webcomponent (temporary)
Downloads
1
Readme
AkPage
The AkPage component wraps the whole page and should be the first child of the body. It contains slots for different layout styles and for the navigation component.
##Try it out
Interact with a live demo of the ak-page component.
Although the ak-page component can be used by itself, it works best in conjunction with the ak-navigation component.
Installation
npm install ak-pageUsing the component
HTML
The ak-page package exports the AkPage Skate component.
Import the component in your JS resource:
bundle.js
import 'ak-page';Now you can use the defined tag in your HTML markup:
index.html
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<!-- ... -->
<ak-page>
<ak-navigation slot="navigation" />
<div id="content">
Page content goes here.
</div>
</ak-page>
</body>
</html>You can also use it from within another JavaScript resource:
import AkPage from 'ak-page';
const component = new AkPage();
document.body.appendChild(component);React
This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.
import AkPage from 'ak-page';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(AkPage, {});
ReactDOM.render(<ReactComponent />, container);Page
Kind: global class
Properties
page.shouldAnimate: boolean
new Page()
Create instances of the component programmatically, or using markup.
HTML Example
<ak-page/>JS Example
import Page from 'ak-page';
const page = new Page();
document.body.appendChild(page);page.shouldAnimate : boolean
Whether the component should display animations.
shouldAnimate is turned on after page load.
Kind: instance property of Page
JS Example
page.shouldAnimate = true;