Introduction

All examples throughout this guide are written by ES6, you can aslo use it in ES5 enviroment.

Mask

source: https://github.com/regular-ui/bootstrap/tree/master/src/Mask.js

Mask Component providing a masking layer for developer.

Simple Mask

const component = new Regular({ template: ` <button class='btn btn-primary' on-click={ show = true}>Open Mask</button> <mask show={show} on-click={show = false}></mask> ` })

Contained Mask

you can use container to specified custom container, default is document.body.

const component = new Regular({ template: ` <div ref='container' class='modal-container' style='height:200px;'> <button class='btn btn-primary' on-click={ show = true}>Open Contained Mask</button> </div> <mask container={this.$refs.container} show={show} bg-color='#003' auto-close ></mask> ` })

transclude content in Mask

you combine mask with other content, the following example use svg as its content.

const component = new Regular({ template: ` <button class='btn btn-primary' on-click={ show = true}>Open Mask with Loding Animation</button> <mask show={show} auto-close > <div r-style={svgPosition}> <svg viewBox="0 0 32 32" width="128" height="128" fill={fill||'white'}> <path transform="translate(0 0)" d="M0 12 V20 H4 V12z"> <animateTransform attributeName="transform" type="translate" values="0 0; 28 0; 0 0; 0 0" dur="1.5s" begin="0" repeatCount="indefinite" keytimes="0;0.3;0.6;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" /> </path> <path opacity="0.5" transform="translate(0 0)" d="M0 12 V20 H4 V12z"> <animateTransform attributeName="transform" type="translate" values="0 0; 28 0; 0 0; 0 0" dur="1.5s" begin="0.1s" repeatCount="indefinite" keytimes="0;0.3;0.6;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" /> </path> </svg> </div> </mask> `, data: { svgPosition: { position: 'absolute', width: '128px', height: '128px', left: '50%', top: '50%', marginLeft: '-64px', marginTop: '-64px' }, fill: 'green' } })

Beacuse content is injected to div.modal-dropdown whose opacity is 0.5. so element is semilucent

Programmatic initializing

Instead of use Mask as composite Component like:

<mask show={true} bgColor=red auto-close></mask>

You can also use it in Programmatic way

var mask = new Mask({
  $body: '<div class="loading"></div>', // as transcluded
  data: {
    show: true,
    bgColor: 'red',
    autoClose: true
  }
})

Mask also provide a preCompiled mask instance, you can use Mask.show([autoClose]) to toggle it.

var mask = Mask.show({
  bgColor: '#fff',
  autoClose: true
})

// only toggle show
var mask = Mask.show(true)

Usage

Data

Methods

mask.toggle()

Toggle mask's visiblity

Mask.show([config]) (static method)

A shortcut to call a Mask;

config

• Boolean config: will passed as autoClose
• Object config: see previous Data section for help

return: Mask

Overlay

source: https://github.com/regular-ui/bootstrap/tree/master/src/Mask.js

Overlay is used for position element to close specified target

simple overlay

const component = new Regular({ template: ` <div class='overlay-container'> <button ref='input' on-click={showOverlay = !showOverlay } class='btn btn-default'> {showOverlay? 'Hide' : 'Show' } Overlay </button> <overlay target={this.$refs.input} show={showOverlay} > <div class="alert alert-success" style='margin-bottom:0' role="alert"> Anything in Overlay <a class='btn-sm btn-primary' on-click={showOverlay = false} href='#'>hide</a> </div> </overlay> </div> ` })

overlay placement

1. you can pass palcement to position overlay to particular direction: top, bottom, left, right is supported

2. pass gap to control the gap from overlay to target.

const component = new Regular({ template: ` <div class='overlay-container'> <button ref='ipt' on-click={showOverlay = !showOverlay } class='btn btn-default'> {showOverlay? 'Hide' : 'Show' } All Overlay </button> <overlay target={this.$refs.ipt} show={showOverlay} placement=left> <div class="alert alert-success" role="alert"> Left </div> </overlay> <overlay target={this.$refs.ipt} gap=20 show={showOverlay} placement=right> <div class="alert alert-danger" role="alert"> Right with gap 20 </div> </overlay> <overlay target={this.$refs.ipt} gap=50 show={showOverlay} placement=top > <div class="alert alert-info" role="alert"> Top with gap 50 </div> </overlay> <overlay target={this.$refs.ipt} gap=5 show={showOverlay} placement=bottom > <strong class='text-danger'>Bottom with gap 5</strong> </overlay> </div> ` })

autoClose overlay

if pass autoClose, whenever you click area out of the overlay, it will be closed.

const component = new Regular({ template: ` <div class='overlay-container'> <button ref='input' on-click={show = !show } class='btn btn-default'> Show Overlay </button> <overlay auto-close target={this.$refs.input} show={show} > <div class="alert alert-info"> Click Anywhere out of the Box </div> </overlay> </div> ` })

Pophover

const component = new Regular({ template: ` <div class='example-container'> <pophover title='pophover title'> pophover content </pophover> </div> ` })

Tooltip

Tab

const component = new Regular({ template: ` <tab> <tab.pane title='tab1'> first content here </tab.pane> <tab.pane title='tab2' selected> You can pass any html in here <input type='checkbox' r-model={show} ref=input> </tab.pane> </tab> <overlay target = {this.$refs.input} show={show} placement=bottom > <div class="alert alert-success" role="alert"> 任意内容1 <a class='btn-sm btn-primary' on-click={show = false} href='#'>隐藏</a> </div> </overlay> ` })

DropdownButton

source: https://github.com/regular-ui/bootstrap/tree/master/src/DropDownButton.js

const component = new Regular({ template: ` <div class='overlay-container'> <button ref='input' on-click={showOverlay = !showOverlay } class='btn btn-default'> {showOverlay? 'Hide' : 'Show' } Overlay </button> <overlay target={this.$refs.input} show={showOverlay} > <div class="alert alert-success" style='margin-bottom:0' role="alert"> Anything in Overlay <a class='btn-sm btn-primary' on-click={showOverlay = false} href='#'>hide</a> </div> </overlay> </div> ` })