poppers
v0.1.2
Published
Some little things which usually pop up on your pages.
Downloads
136
Maintainers
boringReadme
Poppers
Some little things which usually pop up on your pages.
Table of contents
Installation
npm i poppersBasic 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.
Dropdownconstructor(menu: MenuItem[], target: HTMLElement | string, options = dropdownOptions)menuMenuItem{ // Triggered when the item clicked. handler: () => void, // Text of the item. text: string }
targetElement which can be clicked to pop.
Should be a CSS selector when the value is
string.optionsdropdownOptions{ backdropTransparent: true }
pop()bob()
Notificationconstructor(message: string, options = notificationOptions)optionsnotificationOptions{ backdropDisabled: true, autoBob: true }
pop()bob()
Toastconstructor(message: string, options = toastOptions)optionstoastOptions{ backdropDisabled: true, autoBob: true }
pop()bob()
alert(message: string)confirm(message: string): PromiseResolves when "OK" clicked and rejects when "Cancel" clicked.
prompt(message: string, defaultValue: string = ''): PromiseResolves with the input value when "OK" clicked and rejects when "Cancel" clicked.
Some common stuff
Arguments
options: OptionsBase 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, }
message: stringPure text content. Could be overrode by
options.content.
Methods
pop()Open the popper.
bob()Close the popper (upside down "pop" 🙃).