ui


Collection of presentational vdux components inspired by React's rebass.

Installation

$ npm install vdux-ui

Philosophy

All of the components in vdux-ui are statelish* and largely logicless. They are pure functions of their arguments (and your contextual theme). This makes them easy to test and easy to think about.

**They do depend on css-emulator, which adds local state for simulating hover, active, and focus states. However, they are otherwise stateless.

UI Components

* Avatar - Circular (by default) component for rendering a user's avatar
* Block - Box with some default padding/margin and optional borders
* Button - Just a button
* Card - Block with shadow and some extra styling.
* Divider - Dividers for menus
* DecoLine - Semi-transparent decorative line to put on top of visually rich backgrounds (similar to divider, but looks nicer on top of photos).
* Dropdown - Relatively positioned dropdown container.
* DropdownMenu - Dropdown menu component
* Fixed - Fixed position container.
* Grid - Grid, useful for pinterest-style tile feeds, etc.
* Icon - Font-based icon component
* IconButton - Button with an image/icon in it (useful for OAuth style buttons).
* Menu - Horizontal/vertical menus with spacing of menu items
* MenuItem - Menu items for use inside of Menu
* Text - Render text according to your theme and some convenience options
* Tooltip - Stateless tooltip component
* Base - The base component out of which all other vdux-ui components are made. Use this to create your own reusable components.

Layout

* Flex - A flexbox container component. Use it for rendering rows/columns.
* Box - Goes inside your flexbox container.

Theming

vdux-ui uses the uiTheme key in context to find its theme. It will look for theme properties here first, and secondly in its default theme. So you can do:

``javascript
import myTheme from './my-theme'

render(, {uiTheme: myTheme})
`

To override any of the default theming options or add your own.

Common options

The following are options provided by the component and as such are available when using any vdux-ui component:

$3

You may pass:

* circle=true as a prop and you'll get a circular element (i.e. borderRadius=99999px)
* pill=true is an alias for circle
* rounded=true sets borderRadius to borderRadius from your theme

$3

Padding and margin are specified by indexing into the scale array of your theme. Each padding/margin property accepts an index into that array, like this:

->

* p - Pad all sides
* px - Pad the x-axis (i.e. left/right)
* py - Pad the y-axis (i.e. top/bottom)
* pt - Pad the top
* pl - Pad the left side
* pr - Pad the right side
* pb - Pad the bottom

$3

You can also specify colors in your theme, and then reference those colors by name in the color and bgColor props. E.g.

`javascript
import Base from 'vdux-base'

function render ({props}) {
return {props.errorMessage}
}
`

And then in the root of your file:

`javascript
const {render} = vdux()

render(, {uiTheme: {colors: myColors}})
`

But you may also pass any valid color string and it will be passed on through if there is no corresponding key in the theme's color map.

$3

Positioning attributes, inspired by nib's position mixin allow you an expressive shorthand for specifying different types of positioning.

* absolute - Boolean|String|Object
* fixed - Boolean|String|Object
* relative - Boolean|String|Object

Each take a string of the form top|bottom [n] left|right [n]. For example:

`javascript
import {Text} from 'vdux-ui'

function render () {
return (
Invalid username
)
}
`

You may also specify them as boolean attributes to solely set the position property. E.g.

Invalid username

Lastly, you can use object syntax if you want as well:

Invalid username

$3

* wide - Sets width: 100%
* tall - Sets height: 100%
* fs - Font size. Sets the font-size css property.
* ellipsis - Boolean. Sets text-overflow: ellipsis.
* clear - Boolean|String. If true sets clear: both. Otherwise sets the clear attribute to the value passed.
* cursor - String. Set cursor.
* pointer - Boolean - shorthand for cursor='pointer'.
* transition - String. Set transition` style.

But you may also pass any valid color string and it will be passed on through if there is no corresponding key in the theme's color map.

License

MIT