base-elements

base-elements

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

Usage

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

css('tachyons')

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

API

avatar(opts)

Create a circular avatar image. opts can contain:

• src: (default: null) set the src tag of the element
• size: (default: 3) set the size of the element. Enums: {1, 2, 3, 4, 5}
• class: (default: '') set additional classes on the element
• style: (default: '') set additional styles on the element

progress(opts)

Create a progress bar. opts can contain:

• value: (default: 0) set the progress of the element (0 >= x <= 1)
• color: (default: 'blue') set the color on the element
• direction: (default: 'ltr') set the progress bar direction. Enums: { 'ltr', 'rtl' }
• class: (default: '') set additional classes on the element
• style: (default: '') set additional styles 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
• style: (default: '') set additional styles on the element

See Also

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

Installation

$ npm install base-elements

License

MIT