I am facing an issue with displaying scoped tabs. I am referring the link: https://www.lightningdesignsystem.com/components/scoped-tabs/ as I want the tabs to display as per the link. But my tabs are displaying as unordered list even after using the same block of code.

    <aura:component description="TabSetExample">

    <ltng:require styles="/resource/SL_CP_SLDS/assets/styles/salesforce-lightning-design-system-ltng.css" />

    <div class="slds">
        <div class="slds-tabs_scoped">
            <ul class="slds-tabs_scoped__nav" role="tablist">
                <li class="slds-tabs_scoped__item slds-is-active" title="Item One" role="presentation"><a class="slds-tabs_scoped__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1" id="tab-scoped-1__item">Item One</a></li>
                <li class="slds-tabs_scoped__item" title="Item Two" role="presentation"><a class="slds-tabs_scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2" id="tab-scoped-2__item">Item Two</a></li>
                <li class="slds-tabs_scoped__item" title="Item Three" role="presentation"><a class="slds-tabs_scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3" id="tab-scoped-3__item">Item Three</a></li>
            <div id="tab-scoped-1" class="slds-tabs_scoped__content slds-show" role="tabpanel" aria-labelledby="tab-scoped-1__item">Item One Content</div>
            <div id="tab-scoped-2" class="slds-tabs_scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-2__item">Item Two Content</div>
            <div id="tab-scoped-3" class="slds-tabs_scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-3__item">Item Three Content</div>

FYI, Can anyone please help me out where I am going wrong. The slds static resource which I am referring is a valid resource as well with latest version.

Also can anyone tell me how can I use dynamic tab names. The tab names comes from the picklist values.

My current view

  • It looks like Lightning Design System is not included in your component. Are you sure about the path to the css resource? – Martin Lezer Jul 24 '17 at 20:12
  • I had missed extends implementation in aura:application. Thanks anyways :) – Rajesh Kamath Jul 24 '17 at 20:39
  • 1
    Why not use <lightning:tabset variant="scoped"> and <lightning:tab> ? – Itai Shmida Jul 25 '17 at 6:50

If you are using this component in the app then extend SLDS in application itself.

   <aura:application extends="force:slds">
  • Thanks @Arpit. I already fixed it. Yup, I missed that stuff in aura:application. – Rajesh Kamath Jul 24 '17 at 20:23
  • Can you tell me how can i dynamically iterate to create tabs that displays tab names which should come from picklist values. I have a picklist field name specified in config property – Rajesh Kamath Jul 24 '17 at 20:24
  • Glad it helps you. For dynamic tab names, you can make a list of string from the picklist and iterate over that list to make tabs. Please do let me know if you face issue. – Arpit Sethi Jul 25 '17 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.