Show views

Stratox.js offers remarkable flexibility. You can use the same component view multiple times in various locations and with varying content.

How it works

1. Import

Let's start with importing a template view/component. I will begin with the easiest one: the ingress component.

import StratoxIngress from './path/to/view/StratoxIngress';

2. Initialize instance

Create a class instance and pass a DOM element where you wish to show your template.

const stratox = new Stratox("#app");

3. Add view

Now, add the view to the class instance and pass in the expected content object data to the view.

stratox.view(StratoxIngress, {
  headline: "Lorem ipsum dolor",
  content: "Lorem ipsum dolor sit amet",
});

5. Execute

Execute and display the views/components in the expected DOM element.

stratox.execute();

5. The HTML

The HTML really just need a starting point but that depends completely on your need, building a app or enhancing a regular page.

<html>
  <head>
    <title>Example</title>
    <meta charset="UTF-8" />
  </head>
  <body>
      <div id="app"></div>
  </body>
</html>

6. The result

Combining multiple views

You can combine multiple views, both the same and different, in the same instance. Let's build upon the above example and add the ingress twice, combining them with a new table view:

import StratoxIngress from './path/to/view/StratoxIngress';
import StratoxTable from './path/to/view/StratoxTable';

let stratox = new Stratox("#app");

// Add Ingress view: Welcome message
stratox.view(StratoxIngress, {
  headline: "Lorem ipsum dolor",
  content: "Lorem ipsum dolor sit amet"
});

// Add table view A
stratox.view({ tbViewA: StratoxTable }, {
  feed: [
    {
      firstname: "John",
      lastname: "Doe",
      email: "[email protected]",
      status: "1",
    },
    {
      firstname: "Fredrik",
      lastname: "Doe",
      email: "[email protected]",
      status: "0",
    },
    {
      firstname: "Dave",
      lastname: "Doe",
      email: "[email protected]",
      status: "1",
    },
  ]
});

// Add table view B
stratox.view({ tbViewB: StratoxTable }, {
  feed: [
    {
      firstname: "Jane",
      lastname: "Doe",
      email: "[email protected]",
      status: "1",
    },
    {
      firstname: "Sophia",
      lastname: "Doe",
      email: "[email protected]",
      status: "0",
    },
    {
      firstname: "Ava",
      lastname: "Doe",
      email: "[email protected]",
      status: "1",
    },
  ]
});

stratox.execute();

Quick create and set component

Can also quick create and set component in one. The setComponent, argument 2 will also take a anonymous function like demonstrated below.


const stratox = new Stratox("#app");

stratox.view(({ props }) => `
    <header class="mb-50 align-center">
        <h1>${props.headline}</h1>
        <p>${props.content}</p>
    </header>
`, {
  headline: "Lorem ipsum dolor",
  content: "Lorem ipsum dolor sit amet"
});

stratox.execute();

Now let's move on and take a look on how you can build custom templates.

PreviousBasic example NextCreate views

Last updated 1 year ago

hashtagHow it works

hashtag1. Import

hashtag2. Initialize instance

hashtag3. Add view

hashtag5. Execute

hashtag5. The HTML

hashtag6. The result

hashtagCombining multiple views

hashtagQuick create and set component