Vue Multipane

screenshot of Vue Multipane
vue

Vue Multipane

Resizable split panes for Vue.js.

Overview

vue-multipane is a npm package that provides resizable split panes for Vue.js. It supports both vertical and horizontal layouts and uses CSS3 flexbox for layout. The panes can be customized using CSS and the package allows for easy installation and configuration.

Features

  • Resizable split panes for Vue.js
  • Supports vertical and horizontal layouts
  • Uses CSS3 flexbox for layout
  • Supports fixed and fluid panes
  • Can be customized using CSS
  • Provides options for customizing resize handle
  • Events for pane resizing

Installation

To install vue-multipane, follow these steps:

  1. Import vue-multipane into your Vue component:
import VueMultipane from 'vue-multipane'
  1. Construct your split pane layout using the multipane component:
<VueMultipane>
  <!-- Your pane content here -->
</VueMultipane>
  1. Customize the pane layout using CSS:
  • Create vertical/horizontal layouts using the layout attribute:
<VueMultipane layout="vertical">
  <!-- Your vertical pane content here -->
</VueMultipane>
  • Set initial pane size using the width or height CSS property:
<VueMultipane style="width: 300px;">
  <!-- Your pane content here -->
</VueMultipane>
  • Set pane size constraints using the min-width, min-height, max-width, or max-height CSS property:
<VueMultipane style="min-width: 200px; max-width: 500px;">
  <!-- Your pane content here -->
</VueMultipane>
  • Create fixed/fluid combination panes by using px|% units:
<VueMultipane style="width: 200px;">
  <!-- Fixed-size pane content here -->
  <VueMultipane style="flex-grow: 1;">
    <!-- Fluid-size pane content here -->
  </VueMultipane>
</VueMultipane>
  1. Customize the resize handle using CSS:
  • Change the appearance of the resize handle:
<style>
  .vue-multipane-resizer {
    width: 15px;
    height: 5px;
    background-color: blue;
  }
</style>

Summary

vue-multipane is a npm package for Vue.js that provides resizable split panes using CSS3 flexbox. It supports both vertical and horizontal layouts and allows panes to be customized using CSS. It also provides options for customizing the resize handle and events for pane resizing. With easy installation and configuration, vue-multipane is a useful tool for creating flexible and responsive layouts in Vue.js applications.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

ui-kit
UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.