Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Tabs are user interface components that render and display subsections to users; they arrange content into categories for easy access and make your apps look cleaner by saving space. Instead of a single title bar, a tabbed window may include multiple tabs along the top.

This component varies from the regular 'tabs' component, with the tabs arranged on the top in a horizontal space.

...

Tabs allow you to switch between options in a program, separate documents, or web pages. The currently-selected tab is usually gets highlighted (in a bold format) than the other tabs. The interface is designed to resemble the tabs at the top of file folders, as viewed from inside a file cabinet.

Tabs allow you to load multiple websites and quickly switch between them, without each of them needing a separate window.

To create a new tab in page layout, you can click the "+" sign of the current tab to open a new blank tab.

Each open tab can be closed individually by clicking the "X" on the right side of the tab. If the tab does not show an "X," try hovering the mouse pointer over the tab.

Tabs may be easier for users to understand and associate with their content. They are best suited for a small number of items but provide scrolling on overflow. Tabs display scroll buttons to aid with scrolling when their contents overflow. The buttons show that there are more tabs on either side.

...

overview

  • The tabs is a container

  • The Tabs component is used for keeping the related content in a single container

  • We can add vertical and horizontal tabs in a tabs component

  • When you add multiple tabs, the tab label is displayed horizontally on the top if it's a Tabs component and if it's vertical then the label is on the left-hand side

  • If you click on the label of the tab, related tabs content is displayed, If it's horizontal then on the bottom, and if vertical then on the right-hand side.

Attributes

  • Label

    • The label is a short description given to the tab

    • Generally, the label is displayed in the component at the top left corner

    • e.g. in the below screenshot Personal Details is used to specify the first tab label, and Educational Summary is used to specify the second tab label

  • Icon

    • The icon is a visual element that gives the idea of the context. Users can search and use icons manually through the icon box that they will display at the beginning of the label