deku-bloxparty-box

deku-bloxparty-box

A simple Deku component to render a box with a title and children.

Install

npm install deku-bloxparty-box

Usage

import Box from 'deku-bloxparty-box'
import element from 'virtual-element'

export function render() {
  return element(Box, {class: 'SignIn-box', title: 'Sign In'}, [
    dom('input', {type: 'text', name: 'username'})
    dom('input', {type: 'password', name: 'password'})
    dom('button', {type: 'submit'})
  ])
}

Renders

<div class='SignIn-box bp-Box'>
  <div class='bp-Box-head'>
    <span class='bp-Box-title'>Sign In</span>
  </div>
  <div class='bp-Box-content'>
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">
  </div>
</div>

If you do not include a title property the div .bp-Box-head will not be rendered.

CSS

Default styles are available in src/index.css which may be consumed by a transpiler such as PostCSS.

License

MIT