wbox v3.1.0
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):
<div id="ElementID" class="wbox wbox-theme-flat" w-height="300px" w-width="400px" w-max-width="100%">
Your HTML code here
</div>
Step two is pointing wbox to the div
and telling wbox what to do with it.
// All wbox calls will begin like:
var modal = new WBox('ElementID')
// 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
const { WBox, IBox } from 'wbox';
// TS
import { WBox, IBox } from 'wbox';
new WBox()
Initialize the wbow, example
var modal = new WBox('ElementID')
Overrides
new WBox(el: string)
new WBox(el: Element)
new WBox(el: string, config: Properties)
new WBox(el: 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({
// Any size format can be passed.
height: '20%',
width: '400px'
})
IBox
usage
new IBox()
Initialize the ibox, example
var modal = new IBox('ElementID')
Overrides
new IBox(images: string)
new IBox(images: string | Array<string>)
new IBox(images?: string | Array<string>, config?: IBoxProperties)
.image(imageIndex)
imageIndex
Number
Example
<IBox>.image(2)
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
<div class="wbox">
<div class="wbox-title">
Child element
</div>
</div>
Title
Sets a fixed position title and repositions the wbox-content
accordingly.
Example
<div class="wbox-title">
Place title here
</div>
Content
Dynamically positioned (will consume title section if no title is defined).
Example
<div class="wbox-content">
Place any content here..
</div>
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