wbox
Installation
Install with npm:
npm install wbox --save
Example
Step one is to setup the wbox in your html.
The only requirement for the <div>
is the class="wbox"
& the dimentions w-*
.
Here is an example (the additional attributes we'll get to):
Your HTML code here
Step two is pointing wbox to the div
and telling wbox what to do with it.
// All wbox calls will begin like: // Full example to show the defined wbox.// Wbox functions are stringed together.modal.show
WBox
usage
If loading through browser
<script>
tag: access vianew wbox.WBox()
ornew wbox.IBox()
// JS;// TS;
new WBox()
Initialize the wbow, example
Overrides
new WBoxel: stringnew WBoxel: Elementnew WBoxel: string, config: Propertiesnew WBoxel: Element, config: Properties
.show(WBox.Properties)
style
Object StyleProperties[key: string]: string | any
overlay
Object OverlayPropertiesshow: boolean
default = truebackgroundColor?: string
Iniates the display process of the defined element id.
Example
WBox.show
.close()
Closes the wbox.
Example
WBox.close
.resize(WBox.ResizeProperties)
options
Objectheight
stringwidth
string
Note:
.show()
's sizing will occur before.resize({options})
Example
WBox.resize
IBox
usage
new IBox()
Initialize the ibox, example
Overrides
new IBoximages: stringnew IBoximages: string | Array<string>new IBoximages?: string | Array<string>, config?: IBoxProperties
.image(imageIndex)
imageIndex
Number
Example
IBox.image2
Themes
By default the following themes are included:
wbox-theme-default
wbox-theme-flat
wbox-theme-material
wbox-theme-simple
wbox-theme-x
Pre-configured elements
These are wbox child elements preconfigured to the specified theme.
Example
Child element
Title
Sets a fixed position title and repositions the wbox-content
accordingly.
Example
Place title here
Content
Dynamically positioned (will consume title section if no title is defined).
Example
Place any content here..
Building
While developing
This will allow continuous development and auto building to test.
Use the test/test.html
to manually test your changes.
npm run gulp:live
For production
Build is configured to minify on output for production usage.
npm run gulp:build