leve_flex

leve_flex

A Vue component

describe

A container with automatic horizontal layout, line feed and neat alignment

Demo

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Usage

NPM

npm install leve_flex --save-dev

import LeveFlex from 'leve_flex'
export default {
  components: {
    LeveFlex
  }
}

Correct use

 <LeveFlex :dataLength='4'>
    <div class="items">111</div>
    <div class="items">222</div>
    <div class="items">333</div>
    <div class="items">444</div>
 </LeveFlex>

or

 <LeveFlex :dataLength='4'>
    <div class="items" v-for='item in dataList'>{{item}}</div>
 </LeveFlex>

Do not nest parents!!! Wrong usage

 <LeveFlex :dataLength='4'>
   <MyComponents>
    <div class="items">111</div>
    <div class="items">222</div>
    <div class="items">333</div>
    <div class="items">444</div>
  </MyComponents>
 </LeveFlex>

Options

Name	Type	Default	Description
dataLength	Number	undefined	items Length of data(Number of items)

License

MIT