https://github.com/acehubert/vue-layout-separator
layout separator
https://github.com/acehubert/vue-layout-separator
layout separator vue2
Last synced: 9 days ago
JSON representation
layout separator
- Host: GitHub
- URL: https://github.com/acehubert/vue-layout-separator
- Owner: aceHubert
- License: mit
- Created: 2018-08-14T01:40:23.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-13T07:35:14.000Z (almost 8 years ago)
- Last Synced: 2025-06-07T01:05:51.885Z (about 1 year ago)
- Topics: layout, separator, vue2
- Language: Vue
- Homepage: https://acehubert.github.io/vue-layout-separator/
- Size: 188 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-layout-separator
## Installation
``` bash
//with yarn
yarn add vue-layout-separator
//with npm
npm install vue-layout-separator --save
```
## Usage
Here's a quick example to get you started:
``` js
// main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
// App.vue
Content
import { Separator, SeparatorItem } from 'vue-layout-separator'
import 'vue-layout-separator/dist/index.css'
export default {
name: 'app',
components: {
Separator,
SeparatorItem
}
}
```
## Prpos
` Separator:`
name | type | default | description
---- | ---- | ------- | -----------
vertical | Boolean | false | direction of items.
width | String/Number | 100% | container's width.
height | String/Number | 100% | container's height.
` SeparatorItem:`
name | type | default | description
---- | ---- | ------- | -----------
width | String/Number | auto | item width(300, 10% or auto), works with parent's vertical with 'false'.
height | String/Number | auto | item height(same with width), works with parent's vertical width 'true'.
maxWidth | Number | - | item max width.
minWidth | Number | 34 | item min width.
maxHeight | Number | - | item max height.
minHeight | Number | 34 | item min height.
noresize | Boolean | false | event 'resize' will not be triggered.
if you do not need it, better to set 'true'.
resize | event | - | Callback fired when the item size is changed.
__Signature:__
function(el) => void
## Update
> 0.1.0
* Added prop "vertical", "width", "height" in Container
* Removed prop "direction" in Container
> 0.0.12
* Added prop "noresize" in Item.
## LICENSE
[MIT](https://choosealicense.com/licenses/mit/)