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:
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