Learning JQWidgets for VUE.js: Tabs for Vue a flexible approach for organizing contents
VUE.js is progressive JavaScript framework, used for the development of Single Page Applications (SPA). It is a powerful web-based UI framework, designed from the ground up to be incrementally adoptable. It’s quite easy to work with VUE.js framework. This article focuses on JQWidget Tab component build for Vue.
Tabs make it easy to explore, switch between different views and enable content organization at a high level, such as different data sets or functional aspects of an app.
Tabs component for Vue is very flexible and is targeted for fluid size design. It enables close buttons and images on the tabs support keyboard navigation and right-to-left layout. The additional button next to the tabs can be added as well as there is a reorder property which allows to drag and drop the different tabs. The scrolling of the tabs is very useful for large data when there is not enough available space to show all the tabs.
Prerequisites:
Node.js — to verify that you have it installed, run the command node -v in cmd. It will output the current version.
Step 1 — Create a folder structure:
We have a base root folder that contains public src folders, and package.json file. The public folder has “index.html” page which is used for a base. The content is one <div/> which will be used to render the future Vue.js solution. Also, there can be additional references for the purpose of the project.
Step 2 — Configuration and installation:
You can get the configuration of the package.json file from the source code below. All the needed modules are included.
After your package.json is ready to type npm install in your CLI.
Step :3 Creating an application for tabs :
Navigate to the public folder and create the index.html file. It should be a simple HTML document with one <div/>where data will be rendered using straightforward template syntax.
Index.Html:
The next step is to navigate to the src folder. In this folder, you will create the main.js file. You will have to add a simple configuration there.
Main.js
In the same folder, you have to create the App.vue file, which is the main file for your application.
App.vue:
In the same folder, you have to create the App.vue file, which is the main file for your application. It has 3 sections template, scripts and style. Below is the format for App.vue for Tab component. The App.vue has a <template/> structural tag where the application structure is determined. You have to set the tags for the new components <JqxTabs/> there. JqxTabs divides the content into multiple sections. You can populate it from ‘UL’ for the tab titles and ‘DIV’ for its contents.
In <script/> section import Tabs from JQWidgets .
In components add JqxTabs to Vue class,
Properties
The properties of the <JqxTabs/> component are defined in the data member of the Vue class. You should put them in the return object of the data function:
Events
The events in Vue are set as an attribute with @ prefix. Events which are bound to a component are implemented in the methods member of Vue class. An example of event in tabs is illustrated below.
Methods:
To use a component’s method we should have its reference. In Vue, we refer to a component by the special $refs property. We need to add the desired name reference to that component. If we want to add additional methods we can implement them in this methods member of Vue class.
Below is the default functionality of tab components. Style section can be used to add enhancements to this component.
Features of the Tab Component for Vue:
1) Integration of Tabs with Other Widgets :
Tabs can be integrated with other JQWidgets like a chart, grid etc. It helps in defining the content of the tab in the list of the tabs. The integration with other widgets features is demonstrated here.
2) Tabs with Wizards :
A wizard is a step-by-step process that allows users to input information in a prescribed order and in which subsequent steps may depend on information entered in previous ones. Tabs can be used to display wizards. Demonstration of different types of wizards in tabs is displayed here.
3) Tabs with Images :
Tabs can be integrated with images, which is an excellent way to add images in web pages. A proper styling of these images would make an attractive web page design. Demonstration of this feature is displayed here.
4) Maps inside Tabs :
JQWidget tabs are also enhanced to display the maps. We need googleapis in </head> tag, and mapinsidetab.bundle.js files in </body> tag of Index.js file. These are described below. Demonstration of this feature is displayed here.
JQWidget Tabs for Vue is designed with user-friendly features like closing the tabs, collapsing the tabs, drag and drop events to reorder /re-arrange the tab orders, saving of the tabs selection when the page is reloaded using cookies, scrolling, and keyboard navigations to change the tabs etc. These features are worth for a user-friendly UI.
For more information please visit our site.
