Poppers NPM | npm.io

Poppers

Some little things which usually pop up on your pages.

Installation

npm i poppers

Basic usage

Module

import {Toast} from 'poppers';

new Toast('I am a toast').pop();

`script` tag

<head>
    <link rel="stylesheet" href="path/to/poppers/dist/poppers.min.css">
</head>
<body>
    <script src="path/to/poppers/dist/poppers.min.js"></script>
    <script>
        new poppers.Toast('I am a toast').pop();
    </script>
</body>

API

Some common stuff without description are explained in the next section.

Dropdown
- constructor(menu: MenuItem[], target: HTMLElement | string, options = dropdownOptions)
  - menu
    - MenuItem
```
{
    // Triggered when the item clicked.
    handler: () => void,

    // Text of the item.
    text: string
}
```
  - target
    Element which can be clicked to pop.
    Should be a CSS selector when the value is string.
  - options
    - dropdownOptions
```
{
    backdropTransparent: true
}
```
- pop()
- bob()
Notification
- constructor(message: string, options = notificationOptions)
  - options
    - notificationOptions
```
{
    backdropDisabled: true,
    autoBob: true
}
```
- pop()
- bob()
Toast
- constructor(message: string, options = toastOptions)
  - options
    - toastOptions
```
{
    backdropDisabled: true,
    autoBob: true
}
```
- pop()
- bob()
alert(message: string)
confirm(message: string): Promise
Resolves when "OK" clicked and rejects when "Cancel" clicked.
prompt(message: string, defaultValue: string = ''): Promise
Resolves with the input value when "OK" clicked and rejects when "Cancel" clicked.

Some common stuff

Arguments

options: Options

Base options, merged with options that passed as an argument actually.

Options

{
    // Close the popper automatically.
    autoBob: boolean = false,

    // How long (ms) before the popper closed automatically.
    autoBobDelay: number = 3000,

    // Disable the backdrop of the popper.
    backdropDisabled: boolean = false,

    // The backdrop is transparent.
    backdropTransparent: boolean = false,

    // The popper can be closed by clicking the backdrop.
    clicksBackdropToBob: boolean = true,

    // Main content of the popper.
    // Ignored if it is a falsy value.
    // Converted to `string` if it is not a `Node`.
    content: string | Node,
}