• Stars
    star
    513
  • Rank 84,116 (Top 2 %)
  • Language
    JavaScript
  • Created almost 7 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Split-Pane component built with vue2.0, can be split vertically or horizontally. http://panjiachen.github.io/split-pane/demo/index.html

Vue Split Pane

Split-Pane component built with vue2.0, can be split vertically or horizontally.

Try the demo

How to use?

npm install vue-splitpane

#import
import splitPane from 'vue-splitpane'

# use as global component
Vue.component('split-pane', splitPane);

Example

   <split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical">
      <template slot="paneL">
        A
      </template>
      <template slot="paneR">
        B
      </template>
    </split-pane>
  //nested
   <split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical">
      <template slot="paneL">
        A
      </template>
      <template slot="paneR">
        <split-pane split="horizontal">
          <template slot="paneL">
           B
          </template>
          <template slot="paneR">
            C
          </template>
        </split-pane>
      </template>
    </split-pane>

Options

Property Description type default
split the split type String [horizontal,vertical] must choose one type
min-percent paneL max-min-percent Number 10
max-percent paneL max-percent Number 10

More Repositories

1

vue-element-admin

๐ŸŽ‰ A magical vue admin https://panjiachen.github.io/vue-element-admin
Vue
82,787
star
2

vue-admin-template

a vue2.0 minimal admin template
JavaScript
18,508
star
3

electron-vue-admin

vue electron admin template web: http://panjiachen.github.io/vue-admin-template
JavaScript
2,998
star
4

awesome-bookmarks

๐Ÿ’– A curated list of awesome things
JavaScript
1,817
star
5

vue-countTo

It's a vue component that will count to a target number at a specified duration https://panjiachen.github.io/countTo/demo/
JavaScript
1,328
star
6

vue-element-admin-site

๐Ÿ“ The documentation source of vue-element-admin https://panjiachen.github.io/vue-element-admin-site
Shell
344
star
7

Music-Visualization

้Ÿณไนๅฏ่ง†ๅŒ–
JavaScript
64
star
8

PanJiaChen.github.io

Pjc
CSS
63
star
9

custom-element-theme

custom-element-theme
CSS
59
star
10

tinymce-all-in-one

Build all tinymce plugins into one js
JavaScript
39
star
11

countUp-demo

JavaScript
20
star
12

get-markdown-images

๐Ÿ’พ get all images from markdown
JavaScript
12
star
13

demo-playground

๐Ÿ˜Ž A simple development playground with live reload capability
JavaScript
10
star
14

PanJiaChen

8
star
15

vue-tree-table

vue-tree-table
Vue
7
star
16

cos-nodejs

่…พ่ฎฏไบ‘ cos nodejs sdk ไธŠไผ 
JavaScript
6
star
17

tree-shaking-test

for tree-shaking test demo
JavaScript
3
star
18

tinymce-lang

support Tinymce's lang cdn
JavaScript
3
star
19

tangram

css3 tangram
HTML
3
star
20

chunk-test

just for test demo
Vue
2
star
21

create-react-bolierplate

create-react-bolierplate quickly start
JavaScript
1
star
22

singalpage

ๅˆๅญฆๅ‰็ซฏๆ—ถๅ€™ๅš็š„ไธ€ไธชsingalpage
JavaScript
1
star
23

chrome-extenstion-ToDoList

chrome-extenstion-ToDoList
JavaScript
1
star
24

node-react

JavaScript
1
star
25

cssnano-test

just for cssnano issue test
JavaScript
1
star
26

color-2048

color-2048
JavaScript
1
star
27

image-tags

JavaScript
1
star
28

react-chatroom

react-chatroom pc demo:http://rebirth.wallstcn.com/chatroom/51 wap demo http://m.wallstcn.com/chatroom/detail/51
JavaScript
1
star
29

chunksSortMode-test

just for issue test
Vue
1
star