vdux-layout
Flexbox layout components
Last updated 5 years ago by ashaffer88 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vdux-layout 
SYNC missed versions from official npm registry.

layout

js-standard-style

Flexbox layout components (ported to vdux with some modifications from reflexbox.

Installation

$ npm install vdux-layout

Usage

vdux-layout exports two components, <Flex/> and <Box/>. Flex is the container, and box is the child.

import {Flex, Box} from 'vdux-layout'

function render ({props}) {
  const {items} = props

  return (
    <Flex justify='space-between' align='center'>
      {
        items.map(item =>
          <Box auto>
            <Tile item={item} />
          </Box>
        )
      }
    </Flex>
  )
}

<Flex/> - props

  • justify - start/end/center/space-around/space-between. Sets justifyContent style property.
  • align - start/end/stretch/center/baseline. Sets alignItems style property.
  • auto - Boolean. Sets flex: 1 1 auto
  • wrap - Boolean. Sets flex-wrap: wrap
  • column - Boolean. Defaults to false, which means row.
  • gutter - Set negative left/right margins to compensate for <Box /> padding.
  • ...<Base/> props - All the props you can pass to base.

<Box/> - props

  • auto - Boolean. Sets flex: 1 1 auto.
  • flex - Boolean. Sets display: flex.
  • col - Number. Sets width/flex-basis on a 12 column grid.
  • ...<Base/> props - All the props you can pass to base.

License

MIT

Current Tags

  • 1.0.3                                ...           latest (5 years ago)

4 Versions

  • 1.0.3                                ...           5 years ago
  • 1.0.2                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (3)
Dev Dependencies (11)
Dependents (2)

Copyright 2014 - 2017 © taobao.org |