@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.

    Install

    npm i @robomx/web-dialog

    DownloadsWeekly Downloads

    3

    Version

    2021.0.1

    License

    MIT

    Unpacked Size

    18.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • robomx