widgets.pbTabsContainer.help.html Maven / Gradle / Ivy
Show all versions of ui-designer-artifact-builder-generator-angularjs Show documentation
A TabsContainer is a container that has multiple panes, but shows only one pane at a time.
Using the Vertical Display property, it is possible to display tabs vertically or horizontally.
To Display the tab vertically and on the left of the content, you can read this how
to learn more about customization
The Display Type property allows you to customize the tabs style ('tabs' or 'pills').
The tab's properties allows you to customize default display and behaviour of tabs based on data and/or JS expressions.
Title: can be calculated dynamically to display and render html.Selected (Default: first tab is selected): Whether the tab is selected or nothidden (Default: no): Whether tab is hidden or not.disabled (Default: no): Whether tab is clickable and can be activated.
cssClasses (Default: none): Add css classes on tab. This css class will
be attached to tab-heading html element.
Example of a tab title displaying a badge:
- Add the following class in style.css asset.
.badgeCircle {
width: 30px;
border-radius: 50%;
text-align: center;
font-size: 12px;
border: 1px solid #666;
background-color: green;
color: white;
display:inline;
}
- In tab title properties add the following value
<span class="badgeCircle"<10>/span> Users
- Click on preview to show the result
To enable form validation across multiple tabs, set the Lazy loading property to no for each tab.
Setting this property to no will load the content of each tab during the initial page load, which may result in slower loading times.