Getting Started with Vue Splitter using JQWidgets
Balanced design for a UI interface is a must and needs to be achieved while designing the user interface. It is important to have information placed in the right position. To achieve this, the designer must use panels to organize the user interface and this can be easily achieved using Splitter component. With jQWidgets splitter component, it is very easy to achieve vertical, horizontal and nested divisions on your web page.
Splitter component for Vue is a moveable bar that divides the page or container into resizable and collapsible panels. We will take a look at how to add a jQWidgets splitter for Vue framework and its features.
Integration:
You need node.js v=> 8 to install the Vue CLI. Check the node version by node –v else you can upgrade the node version with npm install npm@latest –g.
To install Vue CLI,
To create a Vue project using CLI type below command in Vue CLI; later install the jQWidgets using npm.
This will start the creation of the project, which will then present an option to pick default preset or manually select features. Select the features for the project manually. Once the project is created, you can run it using npm.
Your project will run at localhost:8080.
Folder Structure of Vue Project:
Once the project is created, you will have a project structure as shown below.
You can get the configuration of the package.json file from the source code below. All the required modules are included.
After package.json is ready, type npm install in your CLI.
Working with nested splitters:
To create a page layout using nested splitters of jQWidgets in your Vue application, you need to import Splitter component for Vue in App.vue file.
Add JqxSplitter to components section of App.vue.
App.vue contains <template/> structural tag which defines application structure. Now set the tag for new component <JqxSplitter>. This tag can be modified based on the panels required. Below is the basic definition of <template/> tag.
To demonstrate the creation of panels, will have multiple panels in the tag. First, set the main splitter with horizontal orientation defining the panel size as 50%. This will divide the area into two equal parts horizontally.
Now, add a vertical splitter and a horizontal splitter.
Create one more splitter which would divide the panel horizontally. To create nested splitters in the panel, use class “jqx-splitter-nested”.
Below is the entire code for adding splitters and nested-splitters.
Now to set the properties of <JqxSplitter/> component, modify the data member of App.vue file. The properties like width, height, size of the panel are set and are added in return object of the data.
Below is an example of jqxsplitter in Vue framework. Various panels are created according to the orientation and panel size defined in the <template/> structural tag.
Styling Splitters:
Splitters are used for creating layouts in templates. jqSplitters uses a pair of CSS files jqx.base.css which is used to create widget layout like margin, padding, border-width, position, etc. and jqx.[theme name].css to apply widgets colours and background. Include jqx.base.css before jqx.[theme] file.
Features:
Splitters are an integral part of the page layout. It helps to divide the area and can be customizable by the user. We have already seen the nested splitters in this article. Now we will go through some of its features.
- Integration with tabs, tree, and grid:
Panels can be integrated with tabs and tree easily. We can add the jqxTabs in one of the splitters like shown below.
Similarly, we can integrate the jqxGrid and jqxTree components with jqxSplitters.
2) Collapsing Splitters:
jqxSplitter can be used to collapse one of the panels. In the case of a vertical splitter, top panel or in case of horizontal panel left panel will be collapsed. To enable the panel to collapse we need to mark the panel division with class “splitter-panel” to the panels.
By setting the property “collapsible: false”, we can avoid a panel to hide or collapse.
3) Multiple Split panels with Tabs:
We can have multiple or nested splitters integrated with multiple tabs. These layouts are useful when the data displayed are interlinked and to display the details of selected data of one tab into another panel or tab like displaying the news feed. These splitters can be collapsible and moveable.
4) Fluid Size:
We can have multiple options of splitter layout, where we can create a horizontal and vertical layout with nested splitters. These can be collapsible with the ability of splitters to be moved from left, right, up and down. These splitters can be integrated with any other jqxWidget like tabs, grids or tree.
Summary:
jQWidgets splitters for Vue are mainly used for designing the page layouts. It can be easily integrated and flexible to use at runtime. It is loaded with multiple options to divide the page into multiple panels. You can have nested panels with tabs, tree, and grid integrated with it. These splitters are flexible enough to get collapsed when a panel is not needed. With these fluid size options, you can have multiple permutations and combinations to design your web page.
