Neanderthals Programming Machines

    tailwind-elements

    0.2.0 • Public • Published

    Tailwind Elements

    npm version build status downloads js-standard-style

    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

    Keywords

    none

    Install

    npm i tailwind-elements

    DownloadsWeekly Downloads

    9

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    15.6 kB

    Total Files

    16

    Last publish

    Collaborators

    • dbtek