Create custom vertical tabs as responsive design & dynamically changed uses of lightning-tabset in Lightning Web Component — LWC

[vijayk3327]

In this post we are going to learn about How to create custom vertical tabs as responsive design & dynamically changed uses of lightning-tabset in Lightning Web Component — LWC.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component HTML ➡ lwcVerticalTabs.html

`

Create Custom Vertical Tab in Lightning Web Component (LWC)

    <lightning-tabset variant="vertical">
        <lightning-tab label="Salesforce LWC">
            <div class="tabContent">
                <div class="postImage">					
                    <a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">
                        <img src="https://www.w3web.net/wp-content/uploads/2020/12/lwcIfElseConditionFeature.jpg" width="200" height="150"/>
                    </a>
                </div> 
              <div class="imgRt"> 
                <h3 class="slds-text-heading_medium slds-text-color--error"><strong>Trigger W3web</strong></h3> 
                <p class="titleTag"><b><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">Use template if:true and template if:false condition in LWC.</a></b></p><br/>
                <p>Use template if:true and template if:false condition to display content in LWC</p><br/>                      
                <p>Today in this post we are going to learn about How do you use template if:true and template if:false condition to display content in lightning web component – LWC.<span class="readMore"><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">more...</a></span></p>
              </div>    
            </div>
        </lightning-tab>
        <lightning-tab label="Technical Guide">
            <div class="tabContent">
                <div class="postImage">					
                    <a href="https://www.w3web.net/lightning-component-library-developer-guide/" target="_blank" rel="noopener noreferrer">
                        <img src="https://www.w3web.net/wp-content/uploads/2020/12/componentLibraryFeature2.jpg" width="200" height="150"/>
                    </a>
                </div> 
              <div class="imgRt"> 
                <h3 class="slds-text-heading_medium slds-text-color--error"><strong>Technical Guide</strong></h3> 
                <p class="titleTag"><b><a href="https://www.w3web.net/lightning-component-library-developer-guide/" target="_blank" rel="noopener noreferrer">Collection of Lightning Component Library.</a></b></p><br/>
                <p>A Collection of Lightning Component Library, Developer Guide and Lightning Design System (SLDS)</p><br/>                      
                <p>ind step-by-step aura documentation component example, Lightning Component Library, Developer guide and Lightning design system. Aura Component:- Input Aura Component:- Date/Time Input Aura Component.<span class="readMore"><a href="https://www.w3web.net/lightning-component-library-developer-guide/" target="_blank" rel="noopener noreferrer">more...</a></span></p>
              </div>    
            </div>
        </lightning-tab>
        <lightning-tab label="Tutorial W3web">
            <div class="tabContent">
                <div class="postImage">					
                    <a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer">
                        <img src="https://www.w3web.net/wp-content/uploads/2020/08/rightSideBanner.png" width="200" height="150"/>
                    </a>
                </div> 
              <div class="imgRt"> 
                <h3 class="slds-text-heading_medium slds-text-color--error"><strong>Trigger W3web</strong></h3> 
                <p class="titleTag"><b><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer">Salesforce Tutorial Easy to Learn Step-by-Step.</a></b></p><br/>
                <p>Learn step-by-step about Blog, WordPress, Salesforce Lightning Component, Lightning Web Component (LWC)</p><br/>                      
                <p>w3web.net is the place where you can learn step-by-step about Blog, WordPress, Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, Technical of Computer Application, Salesforce Plugin, JavaScript, Jquery, CSS, Computer & Accessories, Software Configuration, Customization, Development and much.<span class="readMore"><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer">more...</a></span></p>
              </div>    
            </div>
        </lightning-tab>
    </lightning-tabset>

        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

        <br/><br/>
        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
        <div style="display:block; overflow:hidden;"> 
            <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
                    <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
                    <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
                    <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
                </ul>
        </div>

        <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
                    <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
                    <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
                    <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
                </ul>
            </div>
           <div style="clear:both;"></div> 
           <br/>
            <div class="youtubeIcon">
                <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
            </div>
</div>

</div>

`

Step 2:- Create Lightning Web Component Javascript ➡ lwcVerticalTabs.js

` import { LightningElement } from 'lwc';

export default class LwcVerticalTabs extends LightningElement {}`

Step 3:- Create Lightning Web Component Meta XML ➡ lwcVerticalTabs.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

Step 4:- Create Lightning Web Component Style CSS ➡ lwcVerticalTabs.css

.slds-vertical-tabs__nav .slds-vertical-tabs__nav-item.slds-is-active, .THIS .slds-vertical-tabs__nav .slds-vertical-tabs__nav-item a:focus{color:rgb(194, 57, 52); font-weight:bold; text-decoration:none;} h3.slds-text-heading_medium{padding:5px 0 5px 10px; background:#eee; margin-bottom:10px; display:block;} .slds-tabs_scoped__item.slds-is-active .slds-tabs_scoped__link{color:#b70e01; text-decoration:none;} .tabContent{display:block; padding:15px 0 5px 0px; font-size:14px; overflow: hidden;} .tabContent .postImage{display: inline-block; float: left; margin-right: 20px;} .readMore{font-size:14px; font-weight:bold; display:inline-block; padding:0 0 0 10px;} .readMore a{color:#ff0000; text-decoration:none;} .readMore a:hover{color:#04a5ca; text-decoration:underline;} .titleTag{font-size:18px;} .imgRt{width:55%; float:left;}

Step 5:- Create Lightning Application ➡ lwcVerticalTabsApp

<aura:application extends="force:slds"> <c:lwcVerticalTabs/> </aura:application>

→ Get source code live demo link:-