vue-gutter-resize
language : jp
For vue-gutter-resize, you can change the size of both neighbor dom by dragging gutter.
Browsers support
Chrome |
Safari |
---|---|
last version | last version |
Usage
install
yarn add vue-gutter-resize# or npm i vue-gutter-resize
Import all
Vue
Import as much as you need
Import by module
// umd module// commonjs module
Column Gutter
0 1 2 3
Row Gutter
0 1 2 3
all gutter
column-gutter
props
- width:
String
- column-gutter width
- Required
- example:
:width="'800px'"
- height :
String
- column-gutter height
- Required
- example:
:height="'600px'"
- gutter-size :
String
- all gutter width
- example:
:gutter-size="'4px'"
- gutter-sizes :
Array<String>
- each gutter width
- If gutter-size is specified, gutter-size takes precedence
- example:
:gutter-sizes="['7px', '1rem']"
- color :
String
- all gutter color
- example:
:color="'green'"
- colors :
Array<String>
- each gutter clolr
- If color is specified, color takes precedence
- example:
:colors="['red', 'blue']"
- column :
Number
- column number
- Required
- example:
:column="3"
- column-sizes:
Array<Number>
- column size(total 100)
- example:
:column-sizes="[1, 2, 3]"
emit
- resize({ col }):
Object
- col :
Array<Number>
- each column width(total 100)
- col :
slot
Specified by col-n
the first columnthe second columnthe third column
row-gutter
props
- width:
String
- row-gutter width
- Required
- example:
:width="'800px'"
- height :
String
- row-gutter height
- Required
- example:
:height="'600px'"
- gutter-size :
String
- all gutter height
- example:
:gutter-size="'4px'"
- gutter-sizes :
Array<String>
- each gutter height
- If gutter-size is specified, gutter-size takes precedence
- example:
:gutter-sizes="['7px', '1rem']"
- color :
String
- all gutter color
- example:
:color="'green'"
- colors :
Array<String>
- each gutter color
- If color is specified, color takes precedence
- example:
:colors="['red', 'blue']"
- row :
Number
- row number
- Required
- example:
:row="3"
- row-sizes:
Array<Number>
- row size(total 100)
- example:
:row-sizes="[1, 2, 3]"
emit
- resize({ row }):
Object
- row :
Array<Number>
- each column height(total 100)
- row :
slot
Specified by row-n
the first rowthe second rowthe third row
sample
https://github.com/tomatoaiu/vue-gutter-resize-example