{"id":5705,"date":"2021-04-21T17:08:41","date_gmt":"2021-04-21T14:08:41","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=5705"},"modified":"2024-03-18T00:22:06","modified_gmt":"2024-03-17T21:22:06","slug":"javascript-tabs-save-space-examples-of-tabbed-widgets","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/javascript-tabs-save-space-examples-of-tabbed-widgets\/","title":{"rendered":"JavaScript Tabs: Save Space! Examples of Tabbed Widgets"},"content":{"rendered":"

As an essential UI component of the site, it seems that tabs are taken for granted and don’t deserve close attention. However, thanks to tabs that resolve the question of data segmentation and organization, the site audience can easily choose the relevant data they need to explore. Plus, tabs make the website more interactive and responsive, adding clarity that enhances the user experience.

In our review of JavaScript<\/a> tabs, we cover the creation process and snippet selection, crucial for developers building web apps, emphasizing their role in enhancing business software’s <\/a>user interface and functionality.<\/p>

What is JavaScript tab?<\/strong><\/h2>

A tab, in a nutshell, is a single content area\/component of a site design system (also called a tabbed widget) with multiple panels, each linked to a title\/header in the list. Tabs may vary in size and shape, and they make the website page more structured and easier to grasp. From the position of web developers, tabbed widgets is a collection of links or other HTML elements that can be visually represented in the form of buttons, a group of buttons, and in some other ways. In essence, they simply turn on the visibility of one content block while hiding others.<\/p>

Types of Tabs<\/strong>: Navigation Tabs and Modular Tabs<\/strong><\/h2>

Frequently, the focused, currently-used tab is somehow highlighted or moved forward to the user. This way, tabs can be divided into navigation tabs<\/em> and modular tabs.<\/em> Navigation tabs work as a clickable space opening content in a new webpage. Modular tabs open further info within the same page.<\/p>

Well, needless to say, each interface is designed to resemble the tabs at the top of traditional file folders, as viewed from inside a file cabinet. The main advantage of modular tabs<\/em> is that they help to reflect the relevant data-optimized within the web page screen area without data cluttering and reduce the amount of info on the screen to that needed to be shown. <\/p>

Scrollable and Fixed Tabs<\/strong><\/h2>

Additionally, tabs can be divided into scrollable and fixed. When a set of tabs cannot fit on the screen, use scrollable tabs. Scrollable tabs can use longer text labels and a larger number of tabs. They are best used for browsing on touch interfaces.<\/p>

Tab Structure<\/strong><\/h2>

Tab components consist of the container (the frame), tab item, active\/inactive tab icon or text, tab indicator. Tabs control the UI region are displayed below them. Tabs can be joined with components like top app bars, or nested into components like cards and sheets. In this sample we have no clear tab indicator, but we’ve defined its place by number 2, the aim of the indicator is to show the state of the content within the tab item.  \"Professional <\/a><\/p>

\"Javascript<\/figure>
  1. Frame (Container)<\/li>
  2. Tab indicator (Active\/Inactive)<\/li>
  3. Text (Active\/Inactive)<\/li>
  4. Icon\/Label (Active\/Inactive)<\/li>
  5. Tab item<\/li><\/ol>

    Common Problems Resolved by Tabs<\/strong><\/h2>