Awesome
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:
import myTheme from './my-theme'
render(<App state={state} />, {uiTheme: myTheme})
To override any of the default theming options or add your own.
Common options
The following are options provided by the <Base />
component and as such are available when using any vdux-ui component:
Rounding
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 circlerounded=true
sets borderRadius toborderRadius
from your theme
Padding/margin
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:
<Base px={1} />
-> <div style='padding-left: 4px; padding-right: 4px'></div>
You may specify p or m for each of these, but for simplicity i'll just write it out for padding:
p
- Pad all sidespx
- Pad the x-axis (i.e. left/right)py
- Pad the y-axis (i.e. top/bottom)pt
- Pad the toppl
- Pad the left sidepr
- Pad the right sidepb
- Pad the bottom
Colors
You can also specify colors in your theme, and then reference those colors by name in the color
and bgColor
props. E.g.
import Base from 'vdux-base'
function render ({props}) {
return <Base color='red'>{props.errorMessage}</Base>
}
And then in the root of your file:
const {render} = vdux()
render(<App/>, {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.
Positioning
Positioning attributes, inspired by nib's position mixin allow you an expressive shorthand for specifying different types of positioning.
absolute
- Boolean|String|Objectfixed
- Boolean|String|Objectrelative
- Boolean|String|Object
Each take a string of the form top|bottom [n] left|right [n]
. For example:
import {Text} from 'vdux-ui'
function render () {
return (
<Text absolute='bottom left'>Invalid username</Text>
)
}
You may also specify them as boolean attributes to solely set the position
property. E.g.
<Text relative>Invalid username</Text>
Lastly, you can use object syntax if you want as well:
<Text relative={{right: '5px'}}>Invalid username</Text>
Miscellaneous
wide
- Setswidth: 100%
tall
- Setsheight: 100%
fs
- Font size. Sets thefont-size
css property.ellipsis
- Boolean. Setstext-overflow: ellipsis
.clear
- Boolean|String. Iftrue
setsclear: both
. Otherwise sets the clear attribute to the value passed.cursor
- String. Set cursor.pointer
- Boolean - shorthand forcursor='pointer'
.transition
- String. Settransition
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