vue-gutter-resize

言語 : en

> vue-gutter-resizeは、gutterをドラッグすると両隣のdomのサイズを変更できます。

デモ


Browsers support

|
Chrome |
Safari |
| --------- | --------- |
| last version| last version

使い方

$3

``sh
yarn add vue-gutter-resize

or

npm i vue-gutter-resize
`

$3

`javascript
import Vue from 'vue/dist/vue.esm.js'
import VueGutterResize from 'vue-gutter-resize'
import 'vue-gutter-resize/dist/vue-gutter-resize.css'
Vue.use(VueGutterResize)
`

$3

`javascript
import { ColumnGutter } from 'vue-gutter-resize'
import 'vue-gutter-resize/dist/vue-gutter-resize.css'
`

$3

`javascript
// umd module
import { ColumnGutter } from 'vue-gutter-resize/dist/vue-gutter-resize.umd.js'
import 'vue-gutter-resize/dist/vue-gutter-resize.css'
// commonjs module
import { ColumnGutter } from 'vue-gutter-resize/dist/vue-gutter-resize.js'
import 'vue-gutter-resize/dist/vue-gutter-resize.css'
`

$3

`html


`

$3


`html


`

全てのgutter

$3

#### props
- width: String
- column-gutterの横幅
- 必須
- 例: :width="'800px'"
- height : String
- column-gutterの縦幅
- 必須
- 例: :height="'600px'"
- gutter-size : String
- 全gutterの幅
- 例: :gutter-size="'4px'"
- gutter-sizes : Array
- それぞれのgutterの幅
- gutter-sizeが指定されている場合、gutter-sizeが優先される
- 例: :gutter-sizes="['7px', '1rem']"
- color : String
- 全gutterの色
- 例: :color="'green'"
- colors : Array
- それぞれのgutterの色
- colorが指定されている場合、colorが優先される
- 例: :colors="['red', 'blue']"
- column : Number
- column数
- 必須
- 例: :column="3"
- column-sizes: Array
- columnのサイズ(合計で100)
- 例: :column-sizes="[1, 2, 3]"

#### emit
- resize({ col }): Object
- col : Array
- それぞれのcolumnの幅(合計で100)

#### slot
col-nで指定
`html


1つ目のcolumn

2つ目のcolumn

3つ目のcolumn

`

$3

#### props
- width: String
- row-gutterの横幅
- 必須
- 例: :width="'800px'"
- height : String
- row-gutterの縦幅
- 必須
- 例: :height="'600px'"
- gutter-size : String
- 全gutterの幅
- 例: :gutter-size="'4px'"
- gutter-sizes : Array
- それぞれのgutterの幅
- gutter-sizeが指定されている場合、gutter-sizeが優先される
- 例: :gutter-sizes="['7px', '1rem']"
- color : String
- 全gutterの色
- 例: :color="'green'"
- colors : Array
- それぞれのgutterの色
- colorが指定されている場合、colorが優先される
- 例: :colors="['red', 'blue']"
- row : Number
- row数
- 必須
- 例: :row="3"
- row-sizes: Array
- rowのサイズ(合計で100)
- 例: :row-sizes="[1, 2, 3]"

#### emit
- resize({ row }): Object
- row : Array
- それぞれのcolumnの幅(合計で100)

#### slot
row-nで指定
`html


1つ目のrow

2つ目のrow

3つ目のrow

``

サンプル

https://github.com/tomatoaiu/vue-gutter-resize-example

ライセンス

MIT