Vuetiful Tabs (Part I)
Having lot’s of different views, data and functionalities in the application can be messy, and after some time we will have many commands, input fields and other controls. One of the ways to decrease the application complexity is to group and structure all of the elements.
Today we will show you how you can use Vuetify’s Tab Component to do this. They enable faster navigation between views, documents or commands, and are styled according to the Material Design Guidelines.
I am sure you are already familiar with the concept of Tabs, as we can see them in almost all of the applications we can encounter on a daily basis. According to Wikipedia, they have been with us since the early 1980s. The interface was inspired by traditional card tabs which are inserted in paper files or card indexes, but in some styles like the Material Design, the desktop metaphor is no longer visually present.
The Vuetify implementation follows the standard look and feel you can encounter in many mobile and desktop applications, and with the 1.0 version, the Tab component got more powerful and even simpler to use. Let’s take a look at some examples of what can be done.
Examples
Basic tabs are comprised of a series of title and the corresponding content related to each title:
Tabs can also be part of application toolbar:
We can see below that tabs are not limited to only labels. They can contain icons as well. Later we will show how to even further customize the look.
By combining these with properties such as alignment, expansion ways and paging among others, we can cover a wide range of requirements for the look and feel of the tabs.
All of the supported styles and variants can be seen and tried on the documentation page.
Basic structure of tabs and contents
The basic structure of the markup used for adding a Tabs component follows our intuition — we have a container component <v-tabs>, followed by 1 or more <v-tab> components which hold the title, and the corresponding content is kept under the <v-tab-item> components.
Below we can see the simplified example for the basic tabs from documentation. For the whole <v-tabs> container, we can define color, set it to use dark style and have a yellow slider-color.
Not much has been defined for <v-tab> component — only that they will have a ripple effect when they are clicked upon.
As for the contents, we are using <v-card> to keep the text we would like to show. Of course, other components can be used here as well.
Embedding tabs within toolbar
Like in the previously shown examples, in some scenarios we will want to embed the tabs as part of our application toolbar, or have search integrated with them.
For this we will need to take the actual titles of the tabs (the <v-tab> component) and put them under the toolbar container (the <v-toolbar> component). The contents (the <v-tab-item> component) will be separated .
We will need the <v-tab-items> component to keep the <v-tab-item>s in such cases. To illustrate this, let’s look at an example from the documentation in the next picture:
We can notice that the tab labels feel like an integral part of the toolbar and search functionality — that’s because they really are part of the toolbar!
Step-by-Step instructions
First, we will need to define the actual toolbar component using the <v-toolbar> component. The color and dark attributes are pretty self explanatory. The tabs attribute tells the toolbar that it will contain child tab elements, and to adjust the styling accordingly.
After having the container, we will add a text field (the <v-text-field> component) to act as the search bar:
- setting prepend-icon will add the magnifying glass icon to the left;
- setting append-icon will add the microphone icon to the right;
- label attribute gives us the placeholder text;
- solo-inverted reduces element opacity until focused — this will make the field prominent once we click on it to start typing;
- with class=”mx-3" we set the left and right padding;
- and finally we give it a flat look
Once this is ready, we can add the actual tabs which will appear under the search. As mentioned in the previous example, we need the <v-tabs> component to act as a container for the tabs, and the <v-tab> components to hold the titles.
Slot attribute
The first thing to notice within the <v-tabs> element is the slot attribute having value ”extension”. This relates with the fact that we are embedding the tabs within the toolbar. Toolbar exposes a slot called extension for embedding other components within it. To read more about how slots work, please have a look at the Vue.js documentation about it.
Binding to a model
The <v-tabs> component also exposes a two-way binding property for controlling the currently visible tab — the v-model=”tabs” defines this. The variable tabs will hold a zero-based index of the selected tab, i.e. if the first tab is selected, it will be equal to 0, if the second tab is selected it will be equal to 1 and so on. Binding is not mandatory to be used — the tabs will function even if you remove them.
Other attributes are pretty much self-explanatory. Notice how we are setting the background color of the tabs container to transparent in order to use the toolbar background.
Defining individual <v-tab> components is done dynamically using a for loop to create 3 tabs. In this example, this is done just for demonstration purpose, but comes very useful when the tabs structure is not known in advance (for example, when each tab represents a document).
Important to notice here is that the toolbar container is closed on the line 17 after all of the tabs are defined. This is different than the previous example where everything was in tab container.
Let’s finalize the layout by adding the contents for the tabs:
Here we can see that the <v-tabs-items> also allows setting and retrieving the currently active tab using v-model=”tabs”. Like for the titles, the tab contents is generated using a for loop and contains simply a <v-card> component with some text in it.
What’s coming next
With this article we gave an introduction to the way the tabs component is defined and structured in Vuetify. As we could see from examples, it enables us to make great looking menus with ease.
In the Part II of this article, we will use what we have learned so far and make a practical example with some real-world data. We will also customise the way the tabs are displayed to enrich the available information.
For inspiration we will use the stock tickers commonly found on finance web sites. An example of such display can be seen in the following picture:
As Bitcoin is everywhere in the news currently, we will also show how to download and use the pricing data from a publicly available API, and how to dynamically add tabs from search results.
