-2

I need to show the some number inside the lightning tab label in my one req: below is the screenshot: enter image description here

I just need to show this 1 inside the red badge: below is my code:

<lightning-tab label='{testThisLabel}' value={testThisLabel} end-icon-name='utility:record' variant='Error'></lightning-tab>

get testThisLabel() {
        return `Test LWC label(1)`;
    }
  • 2
    Quick search in google should lead you to developer.salesforce.com/docs/component-library/documentation/… . This will access the custom label then if you wish you can replace the string with your number .replace(‘(1)’,’2’) – sfdx bomb Sep 18 at 15:31
  • can you please explain a bit more i am new to LWC.. – sarang Sep 18 at 15:47
  • There is a full example in the link attached. Step 1 would be to get the custom label into your LWC. Have you done that? Edit your question so ppl can help you from where you are. – sfdx bomb Sep 18 at 15:55
  • 2
    Please do not remove the content of your questions. I have rolled back destructive changes. – David Reed Sep 18 at 21:28
  • You have twice made changes to your question that destroy content and remove the context for which you received an answer that is valuable to the community. Please do not continue to do so. This is considered vandalism on Salesforce Stack Exchange and is not permitted. – David Reed Sep 19 at 20:28
3

If you are looking for something like this: Tab then unfortunately it is not doable using the standard tabs component. This requires label to be a slot value where you can inject the text and badge.

Fortunately, you can roll out your own custom implementation using lightning design system tabs and badge blueprints and manage the clicks yourselves.

Sample code:

<template>
    <div class="slds-tabs_default">
        <ul class="slds-tabs_default__nav" role="tablist">
            <li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation"> <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Tab Label  <span class="slds-badge slds-theme_error">10</span></a> </li>
            <li class="slds-tabs_default__item" title="Item Two" role="presentation"> <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Tab two <span class="slds-badge slds-theme_success">3</span></a> </li>
            <li class="slds-tabs_default__item" title="Item Three" role="presentation"> <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-3" id="tab-default-3__item">Item Three</a> </li>
        </ul>
        <div id="tab-default-1" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
        <div id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
        <div id="tab-default-3" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">Item Three Content</div>
    </div>
</template>
| improve this answer | |

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