0.10.2 • Published 5 years ago
vue-gutter-resize v0.10.2
vue-gutter-resize
言語 : en
vue-gutter-resizeは、gutterをドラッグすると両隣のdomのサイズを変更できます。
Browsers support
Chrome | Safari |
---|---|
last version | last version |
使い方
インストール
yarn add vue-gutter-resize
# or
npm i vue-gutter-resize
全体import
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)
必要な分だけimport
import { ColumnGutter } from 'vue-gutter-resize'
import 'vue-gutter-resize/dist/vue-gutter-resize.css'
module別import
// 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'
Column Gutter
<template>
<column-gutter
:column="column"
:width="'100vw'"
:height="'600px'"
:gutter-sizes="['4px', '1rem', '1em']"
:colors="colors"
:column-sizes="[4, 1, 4, 1]"
@resize="resize">
<div slot="col-0">0</div>
<div slot="col-1">1</div>
<div slot="col-2">2</div>
<div slot="col-3">3</div>
</column-gutter>
</template>
<script>
import { ColumnGutter } from 'vue-gutter-resize'
import 'vue-gutter-resize/dist/vue-gutter-resize.css'
export default {
components: {
ColumnGutter
},
data () {
return {
column: 4,
colors: ['red', 'blue', 'yellow']
}
},
methods: {
resize ({ col }) {
console.log(col) // current col size (etc... [25, 25, 25, 25]
}
}
}
</script>
Row Gutter
<template>
<row-gutter
style="border: 1px solid #ccc;"
:row="row"
:width="'800px'"
:height="'600px'"
:gutter-size="'4px'"
:colors="colors"
:row-sizes="[1, 2, 3, 4]"
@resize="resize">
<div slot="row-0">0</div>
<div slot="row-1">1</div>
<div slot="row-2">2</div>
<div slot="row-3">3</div>
</row-gutter>
</template>
<script>
import { RowGutter } from 'vue-gutter-resize'
import 'vue-gutter-resize/dist/vue-gutter-resize.css'
export default {
components: {
RowGutter
},
data () {
return {
row: 4,
colors: ['red', 'blue', 'yellow']
}
},
methods: {
resize ({ row }) {
console.log(row) // current row size (etc... [25, 25, 25, 25]
}
}
}
</script>
全てのgutter
column-gutter
props
- width:
String
- column-gutterの横幅
- 必須
- 例:
:width="'800px'"
- height :
String
- column-gutterの縦幅
- 必須
- 例:
:height="'600px'"
- gutter-size :
String
- 全gutterの幅
- 例:
:gutter-size="'4px'"
- gutter-sizes :
Array<String>
- それぞれのgutterの幅
- gutter-sizeが指定されている場合、gutter-sizeが優先される
- 例:
:gutter-sizes="['7px', '1rem']"
- color :
String
- 全gutterの色
- 例:
:color="'green'"
- colors :
Array<String>
- それぞれのgutterの色
- colorが指定されている場合、colorが優先される
- 例:
:colors="['red', 'blue']"
- column :
Number
- column数
- 必須
- 例:
:column="3"
- column-sizes:
Array<Number>
- columnのサイズ(合計で100)
- 例:
:column-sizes="[1, 2, 3]"
emit
- resize({ col }):
Object
- col :
Array<Number>
- それぞれのcolumnの幅(合計で100)
- col :
slot
col-nで指定
<div slot="col-0">1つ目のcolumn</div>
<div slot="col-1">2つ目のcolumn</div>
<div slot="col-2">3つ目のcolumn</div>
row-gutter
props
- width:
String
- row-gutterの横幅
- 必須
- 例:
:width="'800px'"
- height :
String
- row-gutterの縦幅
- 必須
- 例:
:height="'600px'"
- gutter-size :
String
- 全gutterの幅
- 例:
:gutter-size="'4px'"
- gutter-sizes :
Array<String>
- それぞれのgutterの幅
- gutter-sizeが指定されている場合、gutter-sizeが優先される
- 例:
:gutter-sizes="['7px', '1rem']"
- color :
String
- 全gutterの色
- 例:
:color="'green'"
- colors :
Array<String>
- それぞれのgutterの色
- colorが指定されている場合、colorが優先される
- 例:
:colors="['red', 'blue']"
- row :
Number
- row数
- 必須
- 例:
:row="3"
- row-sizes:
Array<Number>
- rowのサイズ(合計で100)
- 例:
:row-sizes="[1, 2, 3]"
emit
- resize({ row }):
Object
- row :
Array<Number>
- それぞれのcolumnの幅(合計で100)
- row :
slot
row-nで指定
<div slot="row-0">1つ目のrow</div>
<div slot="row-1">2つ目のrow</div>
<div slot="row-2">3つ目のrow</div>
サンプル
https://github.com/tomatoaiu/vue-gutter-resize-example
ライセンス
0.10.2
5 years ago
0.10.1
5 years ago
0.10.0
6 years ago
0.9.4
6 years ago
0.9.3
6 years ago
0.9.2
6 years ago
0.9.1
6 years ago
0.9.0
6 years ago
0.8.6
6 years ago
0.8.5
6 years ago
0.8.4
6 years ago
0.8.3
6 years ago
0.8.2
6 years ago
0.8.1
6 years ago
0.8.0
6 years ago
0.7.5
6 years ago
0.7.4
6 years ago
0.7.3
6 years ago
0.7.2
6 years ago
0.7.1
6 years ago
0.7.0
6 years ago
0.6.7
6 years ago
0.6.6
6 years ago
0.6.5
6 years ago
0.6.4
6 years ago
0.6.3
6 years ago
0.6.2
6 years ago
0.6.1
6 years ago
0.6.0
6 years ago
0.5.6
6 years ago
0.5.5
6 years ago
0.5.4
6 years ago
0.5.3
6 years ago
0.5.2
6 years ago
0.5.1
6 years ago
0.5.0
6 years ago
0.4.1
6 years ago
0.4.0
6 years ago
0.3.0
6 years ago
0.2.1
6 years ago
0.2.0
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago