Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

For vue-gutter-resize, you can change the size of both neighbor dom by dragging gutter.
https://github.com/tomatoaiu/vue-gutter-resize

gutter gutter-grid parcel parcel-bundler resize vue vue-components vue2 vuejs vuejs2

Last synced: about 1 month ago
JSON representation

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

Host: GitHub
URL: https://github.com/tomatoaiu/vue-gutter-resize
Owner: tomatoaiu
License: mit
Created: 2018-06-14T10:15:29.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2022-12-10T17:10:24.000Z (almost 2 years ago)
Last Synced: 2024-10-04T15:19:17.071Z (about 1 month ago)
Topics: gutter, gutter-grid, parcel, parcel-bundler, resize, vue, vue-components, vue2, vuejs, vuejs2
Language: Vue
Homepage: https://tomatoaiu.github.io/vue-gutter-resize/
Size: 3.14 MB
Stars: 10
Watchers: 3
Forks: 1
Open Issues: 21
Metadata Files:
- Readme: README.jp.md
- License: LICENSE.md

Awesome Lists containing this project

README

        # vue-gutter-resize

言語 : [en](./README.md)

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

[デモ](https://tomatoaiu.github.io/vue-gutter-resize/)

  

[![current npm version](https://img.shields.io/npm/v/vue-gutter-resize.svg)](https://www.npmjs.com/package/vue-gutter-resize)

[![support vue version](https://img.shields.io/badge/support%20vue%20version-2.x-blueviolet.svg)](https://img.shields.io/badge/support%20vue%20version-2.x-blueviolet.svg)

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/ad4d8157285645c5893c521e5130c51d)](https://www.codacy.com/app/tomatoaiu/vue-gutter-resize?utm_source=github.com&utm_medium=referral&utm_content=tomatoaiu/vue-gutter-resize&utm_campaign=Badge_Grade)

[![Maintainability](https://api.codeclimate.com/v1/badges/56f0f345d51e956c5bca/maintainability)](https://codeclimate.com/github/tomatoaiu/vue-gutter-resize/maintainability)

[![dependencies Status](https://david-dm.org/tomatoaiu/vue-gutter-resize/status.svg)](https://david-dm.org/tomatoaiu/vue-gutter-resize)

[![devDependencies Status](https://david-dm.org/tomatoaiu/vue-gutter-resize/dev-status.svg)](https://david-dm.org/tomatoaiu/vue-gutter-resize?type=dev)

[![install size](https://packagephobia.now.sh/badge?p=vue-gutter-resize)](https://packagephobia.now.sh/result?p=vue-gutter-resize)

[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/vue-gutter-resize.svg)](https://github.com/tomatoaiu/vue-gutter-resize)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Browsers support

| [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari |

| --------- | --------- |

| last version| last version

## 使い方

### インストール

```sh

yarn add vue-gutter-resize

# or

npm i vue-gutter-resize

```

### 全体import

```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)

```

### 必要な分だけimport

```javascript

import { ColumnGutter } from 'vue-gutter-resize'

import 'vue-gutter-resize/dist/vue-gutter-resize.css'

```

### module別import

```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'

```

### Column Gutter

```html

  

    
0

    1

    2

    3

  

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]

    }

  }

}

```

### Row Gutter

```html

  

    
0

    1

    2

    3

  

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]

    }

  }

}

```

## 全ての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`

  - それぞれの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

```

### 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`

  - それぞれの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](./LICENSE.md)