Tab

Overview

• The Tab is a container

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

• Tab component is used within the vertical tabs or tabs (horizontal)

• 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

    Open