March 25, 2021

Custom CSS properties for lightning-tab in Salesforce Lightning Web Component

Sample Code:

HTML:

<template>
    <lightning-card>
        <lightning-tabset>
            <lightning-tab label="Item One">
                First Content
            </lightning-tab>
            <lightning-tab label="Item Two">
                Second Content
            </lightning-tab>
            <lightning-tab label="Item Three">
                Thrird Content
            </lightning-tab>
        </lightning-tabset>
    </lightning-card>
</template>

JavaScript:
import { LightningElement } from 'lwc';

export default class SampleLWC extends LightningElement {

}

CSS:
:host {
  --sds-c-tabs-list-color-border: black;
  --sds-c-tabs-item-color-border-active: red;
  --sds-c-tabs-item-color-border-hover: green;
  --sds-c-tabs-item-text-color: black;
  --sds-c-tabs-item-text-color-active: green;
}

JS-meta.xml:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>


Output:


No comments:

Post a Comment