FlowUI is a set of common modular UI components for web and mobile-web applications. Built using ES6, SaSS, HTML5 and CSS3, FlowUI is lightweight and doesn't require any third-party frameworks or libraries.
Install FlowUI using your preferred package manager: npm install flowui --save or bower install flowui --save
var dialog = new FlowUI.Dialog({
title: "My Dialog Title",
promise: contentFromPromise,
buttons: [
{ title: 'Yes', onclick: doSomething },
{ title: 'No', onclick: function() {
dialog.close();
}}
],
options: {}
});| Property | Description | Type |
|---|---|---|
| title | Title of dialog | String |
| html | HTML content to inject into dialog | String |
| url | URL to pull content from via AJAX request | String |
| promise | Populate content of dialog from Promise | Promise |
| buttons | Buttons to add to footer of dialog | Array |
| options | Additional options to customize dialog | Dialog Options (Object) |
| Property | Description | Type |
|---|---|---|
| className | Class name(s) to add to dialog element | String |
| stackable | When a new dialog is spawned, existing dialogs are closed by default. Setting stackable to true will keep previous dialog in an inactive state and will be reactivated once the current dialog is closed. | Boolean |
| animation | Customization for dialog animate in/out effects | Animation Object |
| events | Allows you to attached on dialog events such as onopen and onclose | Events Object |
| Property | Description | Type |
|---|---|---|
| in | Animation to apply when first displaying dialog. Possible values include: zoomIn, fadeIn, pulseIn | String |
| out | Animation to apply when dialog is closed. Possible values include: zoomOut, fadeOut, pulseOut | String |
| Property | Description | Type |
|---|---|---|
| onopen | Function to call when dialog is opened | Function |
| onclose | Function to call when dialog is closed | Function |
| Property | Description | Type |
|---|---|---|
| text | Text to display below loader | String |
| parent | Parent DOM element to inject loader (default is document.body) | Element or Query Selector |
| promise | If provided loader will close when promise is resolved | Promise |
| Property | Description | Type |
|---|---|---|
| parent | Parent DOM element to inject modal (default is document.body) | String |
| parent | Parent DOM element to inject loader (default is document.body) | Element or Query Selector |
| promise | If provided loader will close when promise is resolved | Promise |