Skip to content

For vue-gutter-resize, you can change the size of both neighbor dom by dragging gutter.

License

Notifications You must be signed in to change notification settings

tomatoaiu/vue-gutter-resize

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-gutter-resize

language : jp

For vue-gutter-resize, you can change the size of both neighbor dom by dragging gutter.

demo

current npm version support vue version Codacy Badge Maintainability dependencies Status devDependencies Status install size npm bundle size (minified + gzip) License: MIT

Browsers support

Chrome
Chrome
Safari
Safari
last version last version

Usage

install

yarn add vue-gutter-resize
# or
npm i vue-gutter-resize

Import all

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 as much as you need

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

Import by module

// 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.common.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>

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)

slot

Specified by col-n

<div slot="col-0">the first column</div>
<div slot="col-1">the second column</div>
<div slot="col-2">the third column</div>

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)

slot

Specified by row-n

<div slot="row-0">the first row</div>
<div slot="row-1">the second row</div>
<div slot="row-2">the third row</div>

sample

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

License

MIT