Jonelson-tmp-page NPM

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.

Example avatars

##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-page

Using 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;

akutil-shared-styles babel-runtime classnames skatejs

0.0.1

8 years ago