crystal-myth

This package contains HTML dynamic components that can easily be integrated into your projects. The components is intended to be used in any framework.

to use this package run this command npm i crystal-myth

dynamic-island

USage

miniIsland

here we discuss different ways of handling the miniIsland.

//sample usage #1 for DIMiniIsland
islandContent: DIMiniIsland | undefined = {
    type: "icon",
    icon: "click",
    //optional
    action: () => {
        //TODO: add some functionlity here
    },
    //displays the miniIsland infinitly
    visibilityDuration: -1,
};
//sample usage #2 for DIMiniIsland
islandContent: DIMiniIsland | undefined = {
    type: "text",
    content: "miniIsland :)",
    //displays the miniIsland for 3000ms
    visibilityDuration: 3000,
};
//sample usage #3 for DIMiniIsland
islandContent: DIMiniIsland | undefined = {
    type: "html",
    content: "<img src='./foo.jpg'/>",
};

NOTE: that when the type is "html" or "text" we must declare content and when the type is "icon" we must declare icon with one of the available icons

NOTE: When DIMiniIsland.visibilityDuration is left blank, it is automatically set to 5000ms

These are all the available icons, more to be added. | cart | thumbsUp | thumbsDown | click | break | | :--: | :------: | :--------: | :---: | :---: | | | | | |

| pause | play | heart | options | download | | :------------------------------------------------------: | :-----------------------------------------------------: | :------------------------------------------------------: | :--------------------------------------------------------: | :---------------------------------------------------------: | | | | | | |

| reject | loading | ring | like | | :-------------------------------------------------------: | :--------------------------------------------------------: | :-----------------------------------------------------: | :-----------------------------------------------------: | | | | | |

if you want to open and close the miniIsland manually, you can set the DIMiniIsland.visibilityDuration to a negative value, this will display it forever, and when you want to close, set DIMiniIsland to undefined.

navbar action button

You see This button when you hover on the dynamic island at the right.

actionbut: DIButtonAction = {
  name: "button name",
  action: () => {
    //TODO: add some functionlity here
  },
};

navbar navigations

These are usually the items that redirect you to any place

routes: DIRoute[] = [
    {
      name: "Home",
      action: () => {
        //TODO: add some functionlity here
      },
    },
    {
      name: "Blogs",
      action: () => {
        //TODO: add some functionlity here
      },
    },
    {
      name: "About Me",
      action: () => {
        //TODO: add some functionlity here
      },
    },
];

<dynamic-island .navItems=${this.routes} .actionNavButton="${this.actionbut}" .miniIsland="${this.islandText}"></dynamic-island>

Hire Me?

send me an email here