Kendo UI Tabstrips

Tab strips are convenient ways to group together related items. Learn how you can use the Kendo UI TabStrip to improve the UI in your apps.

Last time in this series you mastered the Menu. In this episode, you will see how to use the TabStrip to organize your content. A tab strip is a grouping of items that allows the user to switch between views. It shares some similarities to a menu but is functionally different. A menu groups together items that are unrelated. A tab strip, on the other hand, groups together items that are related. For example, on a social networking site, you may have menu links for posts, profile, and settings. On the profile page, you can include a TabStrip with the labels feed, followers, and following. There are two types of tab strips: fixed and scrollable. I will explain both and show you how to use them in your project.

Fixed Kendo UI TabStrip

A fixed TabStrip has all its tabs visible. Fixed tab strips are good to use when you have a small number of views and it's important for the user to see all of the available options. The example above about the profile page of a social site is a good use case for a fixed tab strip. This is what a Kendo UI fixed TabStrip looks like along with the code to create it:

Kendo UI Tabstrips

<!DOCTYPE html>
<html>
<head>
  <title>Kendo UI Tabstrip Example</title>
  <link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
  <link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default-v2.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
  <div id="tabstrip">
    <ul>
      <li>Feed</li>
      <li>Followers</li>
      <li>Following</li>
    </ul>
    <div>Content for feed</div>
    <div>Content for followers</div>
    <div>Content for following</div>
  </div>
  <script>
    $(document).ready(function() {
      $('#tabstrip').kendoTabStrip();
    });
  </script>
</body>
</html>

The default functionality transforms the unordered list into a row of items that switches views to the content in the corresponding <div> element. Alternatively, you do not have to write out the HTML for the TabStrip. You can build the TabStrip by configuring the options in the .kendoTabStrip method. In this example, we configure the text for the tab labels and its content:

<div id="tabstrip"></div> 
<script>
  $(document).ready(function() {
    $('#tabstrip').kendoTabStrip({
      dataTextField: 'label',
      dataContentField: 'content',
      dataSource: [
        {label: 'Feed', content: 'Content for feed'},
        {label: 'Followers', content: 'Content for followers'},
        {label: 'Following', content: 'Content for following'}
      ]
    });
  });
</script>

The first two options, dataTextField and dataContentField, define the keys that will be used in the object. Using a data source to create the TabStrip is useful when you have many tabbed items and you don't want to be concerned with writing the HTML. You can abstract the data of the tabs from its markup.

Scrollable Kendo UI TabStrip

A scrollable TabStrip has an overflow of content that can be viewed by pressing a button to move the tabs to the right or to the left. They are best used when you have many tabs and it's not important they all be shown at once. It is also useful when you have a variable number of tabs and they may be dynamically added and removed to the TabStrip. A PDF viewing app is an example where you might use a scrollable tab strip, where each tab could display the content of a document. In that case, you wouldn't know ahead of time how many tabs will be visible.

By default, a TabStrip is scrollable when the tab labels extend the width of the TabStrip. The following is an example of a scrollable TabStrip. It has been styled with the Material theme included in Kendo UI.

Kendo UI Tabstrips

Since scrollable tabs are great when dealing with variable content, it would be helpful if we could add or remove tabs programmatically. This is how to add tabs to the TabStrip:

$(document).ready(function() {
  const tabstrip = $('#tabstrip').kendoTabStrip().data('kendoTabStrip');
  tabstrip.append([
    {text: 'Feed', content: 'Content for feed'},
    {text: 'Followers', content: 'Content for followers'},
    {text: 'Following', content: 'Content for following'}
  ]);
});

Removing a tab is as simple as calling tabstrip.remove(arg) and passing it an element selector, a jQuery object, or a zero-based item index.

Summary

The benefit of organizing your content with the TabStrip is that it allows the user to quickly switch between views. The TabStrip provides a child view within the context of a higher level view, without requiring the user to navigate away from the page. You can further customize your TabStrip by using images for labels, changing the orientation, as well as animating how the content loads.

In the next episode, we will take on the PanelBar. You may know this component as an accordion or a collapse. But what you may not know is the many ways it can be used in your app. As with the Menu and the TabStrip, you will see how to wield this component effectively in your code. Until then, train on.


Alberta Williams
About the Author

Alberta Williams

Alberta is a software developer and writer from New Orleans. Learn more about Alberta at github.com/albertaw.

Related Posts

Comments

Comments are disabled in preview mode.