2

I have below requirement to style individual tab icons with different colors from one another in lwc using base lightning-tabset component.

enter image description here

<template>
    <lightning-tabset class="tabIconClass">
        <lightning-tab label="Item One" icon-name="utility:add">
            One Content !
        </lightning-tab>
        <lightning-tab label="Item Two" icon-name="utility:check">
            Two Content !
        </lightning-tab>
        <div class="chandra">
            <lightning-tab label="Item Three" icon-name="utility:edit">
                Three Content !
            </lightning-tab>
        </div>
    </lightning-tabset>
</template>

Can you please help me on this if there is way to achieve this

2

Since you cannot directly add class names to those Icons, using styling hooks seems to be out of the question. I think your best approach would be to use the SLDS blueprints for tabs and there, add your "custom" icons and leverage styling hooks.

0

This is possible thanks to this js snippet.

renderedCallback() {
    //prepare style component which will be inserted to dom
    const styleCss = document.createElement('style');
    styleCss.innerText = ``;
    //get all tabs with data-color attribute
    this.template.querySelectorAll(`[data-color]`).forEach(tab => {
        //get actual id of the tab icon
        let iconId = tab.getAttribute("aria-labelledby");
        //add css rule which will fill the svg with defined color
        styleCss.innerText += `#${iconId} svg {fill:${tab.dataset.color} !important;}\n`;
    })
    //append the style component
    if (this.template.querySelector('lightning-tabset') != null) {
        this.template.querySelector('lightning-tabset').appendChild(styleCss);
    }
}

enter image description here

Below is just for completeness, the main key is above. Heavily inspired in this stackoverflow.


html

<lightning-tabset variant="vertical">
    <template for:each={tabs} for:item="tab">
        <lightning-tab label={tab.label} onactive={handleTabActive} key={tab.label}
                       icon-name="utility:down" data-color={tab.color}>
            {tab.text}
        </lightning-tab>
    </template>
</lightning-tabset>

tab definition

get tabs() {
    return [
        {
            label: 'label 1',
            text: 'text 1',
            color: '#ffffff',
        },
        {
            label: 'label 2',
            text: 'text 2',
            color: '#525252',
        },
    ]
}

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.