Tailwind Elements

DOM elements built with Tailwind CSS using bel. Work in progress.

Install

$ npm i tailwind-elements
// or
$ yarn add tailwind-elements

Elements

Use elements by importing them accordingly like require('tailwind-elements/$element').

header(title, subtitle)

Simple title with optional subtitle.

input(attributes)

Form input element.

Params

• attributes.type: {String} Input type.
• attributes.name: {String} Input name.
• attributes.placeholder: {String} Input placeholder.
• attributes.value: Input value.
• attributes.onChange: {Function} Input value change listener.
• attributes.required: {Boolean} Whether input is required or not.
• attributes.className: {String} Additional css classes.

textarea(attributes)

Form textarea element.

Params

• attributes.name: {String} Input name.
• attributes.placeholder: {String} Input placeholder.
• attributes.value: Input value.
• attributes.onChange: {Function} Input value change listener.
• attributes.className: {String} Additional css classes.

select(attributes)

Select element.

Params

• attributes.name: {String} Input name.
• attributes.value: Input value.
• attributes.onChange: {Function} Input value change listener.
• attributes.className: {String} Additional css classes.

inputContainer(label, input)

Form elements wrapping element.

Params

• label: {String} Input label.
• input: {HTMLElement} input element.

Example

var inputContainer = require('tailwind-elements/input-container')
var input = require('tailwind-elements/input')

inputContainer('First Name', input({
  name: 'first-name',
  required: true
}))

navbar(props)

Navigation bar. Please see navigation example

Params

• props.brand: {String | HTMLElement} Branding text / element.
• props.items: {Array} Array of navigation items.
  • item.label: {String} Nav label.
  • item.href: {String} Nav link.
• props.loginItem: {String | HTMLElement} Login info text / element.

steps(items)

Progress steps element.

Params

• items: {Array} Step items.
  • item.label: {String | HTMLElement} Step label.
  • item.href: {String} Step link.
  • item.onClick: {Function} Click handler for the step.
  • item.active: {Boolean} Whether the step is active or not.

Dropdown

Dropdown component. Based on nanocomponent.

Params

• props.label: {String | HTMLElement} Dropdown label.
• props.className: {String} Additional css classes.
• props.items: [Array] Array of dropdown items.

dropdownMenuItem(props)

Dropdown menu item element.
Params

• props.label: {String | HTMLElement} Menu item label.
• props.onClick: {Function} Click handler for the menu item.
• item.href: {String} Menu item link.

Example

var Dropdown = require('tailwind-elements/Dropdown')
var dropdownMenuItem = require('tailwind-elements/dropdown-menu-item')

new Dropdown({
  label: User,
  items: [
    dropdownMenuItem({ label: 'My Account', href: '/account/profile' }),
    dropdownMenuItem({ label: 'Logout', href: '/account/logout' })
  ]
})

License

MIT

Author

Ismail Demirbilek - @dbtek