Plugins

As I have already mentioned in the first chapters you can install some plugins/pre-made components (ingress, table, and modals), more will certainly come.

As I have already mention previous in the guide that you can install some components that I have already made. Currently, there are only three (ingress, table, and modals), but more will certainly come and I will list them here, at this section of the guide.

Install Startox views/components

npm i stratoxcomponents

Every plugin component below you are able to build yourself, and I do recommend that if you're interested, at least take a look at how they are built by navigating to the "./node_modules/stratoxcomponents/src/" directory and inspecting every component there.

Ingress

Add a simple ingress component.

import { StratoxIngress } from './node_modules/stratoxcomponents/src/StratoxIngress.js';

Stratox.setComponent("ingress", StratoxIngress);

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

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

stratox.execute();

Result:

Table

Add a sortable table component.

import { StratoxTable } from './node_modules/stratoxcomponents/src/StratoxTable.js';

Stratox.setComponent("table", StratoxTable);

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

stratox.view("table", {
  feed: [
    {
      firstname: "John",
      lastname: "Doe",
      email: "[email protected]",
      status: "1",
    },
    {
      firstname: "Jane",
      lastname: "Doe",
      email: "[email protected]",
      status: "0",
    },
    {
      firstname: "Dave",
      lastname: "Doe",
      email: "[email protected]",
      status: "1",
    },
  ],
  thead: [{ firstname: "Name" }, { email: "Email" }, { status: "Status" }],
  tbody: [
    "{{firstname}} {{lastname}}",
    '<a href="mailto:{{email}}">{{email}}</a>',
    "{{status}}",
  ],
});

stratox.execute();

Result:

Modals

Bellow I will show 5 different modal components.

import { StratoxModal } from './node_modules/stratoxcomponents/src/StratoxModal.js';
import { StratoxIngress } from './node_modules/stratoxcomponents/src/StratoxIngress.js';

Stratox.setComponent("modal", StratoxModal);
Stratox.setComponent("ingress", StratoxIngress);

// Show message modal on click
const myBtnMessage = document.getElementById("message-btn");
myBtnMessage.addEventListener("click", function (e) {
    e.preventDefault();

    Stratox.create("modal", {
        headline: "Lorem ipsum dolor",
        content: "Lorem ipsum dolor sit amet"
    });
});


// Show Confirm modal on click
const myBtnConfirm = document.getElementById("confirm-btn");
myBtnConfirm.addEventListener("click", function (e) {
    e.preventDefault();
  
    Stratox.create("modal", {
        type: "confirm",
        headline: "Lorem ipsum dolor",
        content: "Lorem ipsum dolor sit amet"
    }).container().set("confirm", function () {
        // Callback, modal has been confirmed
        alert("Confirmed..");
    });
});

// Show OK modal on click
const myBtnOk = document.getElementById("ok-btn");
myBtnOk.addEventListener("click", function (e) {
    e.preventDefault();

    Stratox.create("modal", {
        type: "ok",
        headline: "Lorem ipsum dolor",
        content: "Lorem ipsum dolor sit amet"
    }).container().set("confirm", function () {
        // Callback, modal has been confirmed
        alert("Confirmed..");
    });
});

// Show opener modal on click
const myBtnOpener = document.getElementById("opener-btn");
myBtnOpener.addEventListener("click", function (e) {
    e.preventDefault();

    Stratox.create("modal", {
        type: "opener",
        headline: "Lorem ipsum dolor",
        content: "Lorem ipsum dolor sit amet"
    });
});

// Show Custom modal on click.
// It is SUPER EASY to add custom content to Modal by adding
// your own compoents to the modal to customize.
const myBtnOpenerCustom = document.getElementById("custom-btn");
myBtnOpenerCustom.addEventListener("click", function (e) {
    e.preventDefault();

    let stratox = new Stratox();
    const modal = stratox.view("modal", {
        type: "opener",
    });

    const ingressA = stratox.view("ingress#ingressA", {
        headline: "Lorem ipsum dolor",
        content: "Lorem ipsum dolor sit amet",
    });

    const ingressB = stratox.view("ingress#ingressB", {
        headline: "Lorem ipsum dolor",
        content: "Lorem ipsum dolor sit amet",
    });

    stratox.execute();
});

Result:

More component will come in the future.