@robomx/web-dialog

2021.0.1 • Public • Published

Web Floating Dialog

HitCount Node.js Package

A dialog plugin to alert your website users about any important information.

Motivation

Inspired from paper dialog seen on YouTube during COVID-19 outbreak.

How to integrate?

Using NPM

  • Install package.

    npm i @robomx/web-dialog or yarn add @robomx/web-dialog

  • Add import.

    import '@robomx/web-dialog/dist/webdialog.min';

Using JS script

  • Add following line to bottom of your body tag.

    <script type="text/javascript" src="https://unpkg.com/@robomx/web-dialog@latest/dist/webdialog.min.js"></script>

Last add the tag:

robomx-webdialog tag before script file. Example:

    <robomx-webdialog
        title="Dialog title"
        description="Dialog description"
        imgSrc="sample.png"
        imgWidth="300px"
        imgHeight="200px"
        position="bottom-left"
        link="example.com"
        actionText="Learn More"
        actionTarget="_blank"
        dismissText="Later"
    ></robomx-webdialog>

Output

Variables

Attribute Default Accepts Note
title Dialog title string content Specify title of the dialog
description Dialog description string content Give brief information about the dialog.
actionText Learn More string content `Action button text
imgSrc null Image path Specify image source url or relative path.
imgWidth 300px px, em, % Specify width of the image.
imgHeight 200px px, em, % Specify height of the image.
position bottom-left top-left, top-right, bottom-left, bottom-right, center Specify position of the dialog box.
darkMode false boolean Dark mode setup.
bgColor #fff Hex Code, RGB Backgroung color of dialog box.
txtColor #373737 Hex Code, RGB Text color of dialog content.
btnColor #6c6b6b Hex Code, RGB Button color of 'Later'.
link http://example.com URL URL for action button.
actionTarget _blank _blank, _self, _parent, _top Target tab of action button.
dismissText Later string word Dismiss button text.

Package Sidebar

Install

npm i @robomx/web-dialog

Weekly Downloads

1

Version

2021.0.1

License

MIT

Unpacked Size

18.7 kB

Total Files

8

Last publish

Collaborators

  • robomx