Versions Compared

Key

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

...

Overview

  • The tabs Tabs is a container and represents the list of a Tab

  • The Tabs component is used for keeping grouping the related content in a single containerWe 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 sidein the Tabs component

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

  • All components except the Navigation Node can be added to the Tabs

Attributes

Label

...

The label is a short description given to the tab

...

Default Tab

  • You can select a Tab that will be displayed as the Default Tab

  • When the layout is rendered the Default Tab will be displayed on the Tabs

  • 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

    You have three tabs Personal Details, Educational Details, and Address Details and you set a default tab 1 then you can land on the Educational Details tab when you open the form

...

Limit

  • Limit let you to decide the number of tabs you want to display

  • If the Tab limit exceeds the entered value, then remaining tabs will be appearing in drop down list format

  • If you enter the value for example 4 then it will display four tabs and if you added above four tabs, then it will display the fifth tab in the drop-down list format

    Image Added