Split panels are a reliable, simple, touch-ready Vue.js device.
split screen layout examples, how to split screen in html, split screen layout css, how to divide html page into two parts vertically, css split screen vertically
Features
- Lightweight and no dependencies unlike Vue JS
- Just worry about your parts, the partitions are automatic
- Nesting support
- Fully responsive
- Support for touch devices
- Push the other parts or not
- Double click the separator to enlarge the pane
- Programmatically set the width or height of the part
- Programmatically add and remove parts
- Supports Vue 2 and Vue 3
How to make use of it:
Install & Download:
npm i splitpanes # For Vue 2.x. npm i [email protected] # For Vue 3.
Then import the component and CSS:
// In your Vue component.
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
export default {
components: { Splitpanes, Pane },
...
}Include the Splitpanes script in your <head> document as follows:
<head> ... <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/splitpanes"></script> <link href="https://unpkg.com/splitpanes/dist/splitpanes.css" rel="stylesheet"> </head>
Once you include it in your project, use the following.
<splitpanes class="default-theme">
<pane v-for="i in 3" :key="i">
<div>{{ i }}</div>
</pane>
</splitpanes>API
Here is the list of all the props.
horizontalDefault: falseThe orientation of the panes splitting.
Vertical by default, meaning the splitters are vertical, but you can resize horizontallypush-other-panesDefault: trueWhether it should push the next splitter when dragging a splitter until it reached another one.
dbl-click-splitterDefault: trueDouble click on splitter to maximize the next pane.
rtlDefault: falseSupports Right to left direction.
first-splitterDefault: falseDisplays the first splitter when set to true. This allows maximizing the first pane on splitter double click.
touch-friendly split layout css, Splitpanes Plugin/Github
See Demo And Download
Official Website(antoniandre): Click Here
This superior jQuery/javascript plugin is developed by antoniandre. For extra Advanced Usages, please go to the official website.
