base-elements

A selection of configurable native DOM UI elements. Inspired by rebass and tachyons.

Usage

var Avatar = require('base-elements/avatar')
var css = require('sheetify')
var html = require('bel')

css('tachyons')

var tree = html`<main>${Avatar()}</main>`
document.body.appendChild(tree)

API

avatar(src, opts?)

Create a circular avatar image. src is a URL. opts can contain:

• size: (default: 3) set the size of the element. Enums: {1, 2, 3, 4, 5}
• radius: (default: 100) set the radius of the element. Enums: {0, 1, 2, 3, 4, 100}
• class: (default: '') set additional classes on the element

progress(value, opts?)

Create a progress bar. value is a number between 0 and 1. opts can contain:

• reverse: (default: 'false') reverses the progress bar direction
• class: (default: '') set additional classes on the element

tooltip(text, opts, child)

Create a tooltip on a child element from a string. opts can contain:

• position: (default: 'up') set the position of the tooltip. Enums: { 'up', 'down', 'left', 'right' }
• class: (default: '') set additional classes on the element

modal(opts)

Create a new modal element. opts is similar to the those passed into nanocomponent. Some properties are slightly different:

• render: (required). Creates the inner content for the modal element; floated in the center of the page.
• onexit: called when the element scrolls out of view, or the esc key is pressed. Useful to trigger unmounts with

See Also

• bel
• tachyons
• rebass
• awesome-choo
• awesome-yo-yo

Installation

$ npm install base-elements

License

MIT