widgets.pbTabsContainer.help.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of ui-designer-artifact-builder-generator-angularjs Show documentation

This module is a generator on AngularJS for Artifact Builder

There is a newer version: 1.0.9

Show newest version


    
        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 not
            hidden (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