Biu

Install

# compatible with browserify and webpack
$ npm install biu.js --save

# then include the base styles
# <link href="/path/to/biu.css" ...
# or import 'biu.js/dist/biu.css'

Basic Usage

import biu from 'biu.js'
biu('text you want to show')
biu('text with a type', {type: 'success'})
biu('do not auto hide me', {autoHide: false})

DefaultSuccessInfoWarningDangerLarge

Advanced

// default options
biu('', {
  type: 'default',
  // auto-hide in specific timeout
  autoHide: true,
  timeout: 3000,
  // hide immediately when clicked
  hideOnClick: false,
  // use font-awesome if you like!
  // closeButton: '<i class="fa fa-close"></i>',
  closeButton: '×',
  // where to append element
  el: document.body,
  // how to align text
  align: 'center',
  // whether to pop up the element in horizontal center
  pop: false,
  // trigger after element is hidden
  onHidden() {}
})

Biu in elements other than body

Trigger hide

const tip = biu('hello', {autoHide: false})

// when it's time to hide it, just call:
tip.hide()

Pop mode

biu('Neat one!', {pop: true})

Pop me!

Hide on click

biu('Wow, amazeballs!', {hideOnClick: true})

Click me!

Call function after the element is hidden but before it gets destroyed

biu('how is it?', {
  onHidden() {
    alert('bye!')
  }  
})

Trigger!

Prompt user

const template = `Enter your name: <input id="prompt" type="text"/>
  <button id="ok" class="button">OK!</button>`

const tip = biu(template, {
  autoHide: false,
  onHidden() {
    const name = document.querySelector('#prompt').value
    biu(`hello ${name}`, {pop: true})
  }  
})

document.getElementById('ok').addEventListener('click', () => {
  tip.hide()
}, false)

Prompt!