flexbox-vue
Advanced tools
Comparing version 1.0.9 to 1.0.10
{ | ||
"name": "flexbox-vue", | ||
"version": "1.0.9", | ||
"version": "1.0.10", | ||
"description": "A Vue Component to flexbox", | ||
@@ -5,0 +5,0 @@ "author": "hexonZhang <308826842@qq.com>", |
@@ -21,1 +21,58 @@ # flexbox-vue | ||
## Usage | ||
Install it via npm: | ||
- `npm install -S flexbox-vue` | ||
## Example | ||
1. Global import | ||
``` | ||
import Flexbox from 'flexbox-vue' | ||
Vue.use(Flexbox); | ||
``` | ||
2. Use it | ||
``` | ||
<FlexboxContainer orient="vertical"> | ||
<FlexboxItem grow="1"> | ||
<p>demo1</p> | ||
</FlexboxItem> | ||
<FlexboxItem> | ||
<p>demo2</p> | ||
</FlexboxItem> | ||
</FlexboxContainer> | ||
``` | ||
## Props | ||
**FlexboxContainer** | ||
- gutter | ||
Spacing between items, Unit is px | ||
- type: Number, | ||
- default: 8 | ||
- orient (flex-direction) | ||
- type: String, | ||
- default: 'horizontal' | ||
- options: 'horizontal' || 'vertical' | ||
- justify: | ||
- type: String | ||
- default: 'flex-start' | ||
- options: 'flex-start' || 'flex-end' || 'center' || 'space-between' || 'space-around' | ||
- align: | ||
- type: String | ||
- default: flex-start | ||
- options: 'flex-start' || 'flex-end' || 'center' || 'baseline' || 'stretch' | ||
**FlexboxItem** | ||
- grow (flex-grow) | ||
- type: Number | ||
- default: 0 | ||
- shrink (flex-shrink) | ||
- type: Number | ||
- default: 1 | ||
- basis (flex-basis) | ||
- type: Number | String | ||
- default: 'auto' | ||
- options: <length> | 'auto' | ||
- order (order) | ||
- type: Number | ||
- default: 0 | ||
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
967402
77