FlowUI

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

API Reference

1. Dialog
   1. Options
   2. Animation
   3. Events
2. Loader
3. Modal

1. Dialog

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)

i. Dialog Options

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

ii. Dialog Animation

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

iii. Dialog Events

Property	Description	Type
onopen	Function to call when dialog is opened	Function
onclose	Function to call when dialog is closed	Function

2. Loader

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

3. Modal

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