Forcetalks

Tag: Lightning Structure Framework

  • All You Need to Know About Lightning-tabset and Lightning-tabs in Salesforce

    All You Need to Know About Lightning-tabset and Lightning-tabs in Salesforce

    What is a Lightning-tabset?

    A Lightning-tabset represents a list of tabs. A lightning-tabset displays a tabbed container with multiple content areas, only one of which is visible at a time. 

    Syntax:

    <template> 
<lightning-tabset> 
<lightning-tab label="Item One"> 
One Content ! 
</lightning-tab> 
<lightning-tab label="Item Two" title="2nd tab extended title"> 
Two Content ! 
</lightning-tab> 
<lightning-tab label="Item Three"> 
Three Content ! 
</lightning-tab> 
</lightning-tabset> 
</template>

    Output:

    Tabs are displayed horizontally inline with the content shown below them, by default. Use tabs to separate information into logical sections based on functionality or use case. 

    A tabset can hold multiple lightning-tab components as part of its body. By default, the first tab is activated. 

    The variant attribute can be used to change the look of a tabset. The variant attribute can be set to default, scoped, or vertical. 

    dont miss out iconDon’t forget to check out: Learn About Lightning Design System in Salesforce

    Why and When to use a Lightning-tabset? 

    • A lightning-tabset enables users to easily switch between tabs to perform tasks without leaving the page. 
    • Assign a default tab based on the most important use case for the page. 
    • We don’t recommend using tabs to define a linear, ordered process since each tab functions independently of the others. 
    • A lightning-tabset doesn’t currently support mobile-oriented tabs. This component doesn’t adjust the tab styling when there are two or more immediately adjacent tab sets on mobile. 

    Variants in Lightning-tabset 

    Apply styling to your content by grouping it using the variation attribute. 

    • Default: Creates global tabs by using default. The content of the tab that was previously selected is replaced when you select a new tab. The default variation tab encloses the material below it without physically enclosing it. 
    • Scoped: Scoped creates a tab set that has a closed container with a defined border. Scoped tabs are useful for stacking several tabbed sections, where you want to change only a portion of the content displayed. When you click those tabs, the content at the bottom remains the same while the content at the top changes for the activity. 
    • Vertical: Vertical resembles the scoped variant in appearance, but the tabs are arranged vertically to the side instead of on the top. 

    dont miss out iconCheck out another amazing blog by Sejal here: What are Scheduled-Triggered Flows in Salesforce?

    What are the lightning-tabs? 

    A Lightning-tab is a single tab in a tabset component. 

    A lightning-tab component keeps related content in a single container. The tab content displays when a user clicks the tab. Use lightning-tab as a child of the lightning-tabset component. 

    This component inherits styling from tabs in the Lightning Design System. 

    Use the label attribute to specify the tab’s text label. 

    To display an icon at the beginning of the label, use the icon-name attribute. Provide alternative text for the icon using icon-assistive text. 

    To display an icon at the end of the label, use the end-icon-name attribute. Provide alternative text for that icon using end-icon-alternative-text. 

    Specify the show-error-indicator attribute to display an error indicator in the tab after the label. If an end icon is present, the error indicator is displayed after the icon. 

  • Salesforce Lightning Design System for Developers | The Ultimate Guide

    Salesforce Lightning Design System for Developers | The Ultimate Guide

    SLDS In Lightning

    The Salesforce Lightning Design System (SLDS) causes you to fabricate applications with the look and feel of Lightning Experience without composing a solitary line of CSS. SLDS is a CSS structure that gives you access to the symbols, shading palettes, and textual style that our designers use to make Lightning Experience.

    Use the LDS  style in Lightning Applications by extends=”fore:slds”. The Salesforce Lightning Design System gives a look and feels that is reliable with Lightning Experience. Utilize Lightning Plan Framework styles to donate your custom applications a UI that’s consistent with Salesforce. How can I utilize the lightning plan framework CSS(style) on my Lightning component?

     Step 1: Download (SLDS) platform-agnostic CSS system. …

     Step 2: Transfer zip record as an inactive asset in your Salesforce org. … 

     Step 3: Utilize lightning plan CSS system on the lightning component.

    dont miss out iconDont forget to check out: How to Use Salesforce Lightning Data Services

    Create a customized scoped CSS file to use

    • Salesforce has presented a Lightning Design System which gives work in styling that permits a designer to concentrate more on usefulness to upgrade the creating experience. By utilizing it, when we create applications in salesforce, the applications are possible with lightning experience. The concentrate presently is to comprehend Grid In Lightning Design System.
    • Before recognizing the framework in the lightning structure framework, it is compulsory to make an altered perused CSS record to get access to the assistant classes which are predefined.

    Step 1: Go to  link https://www.lightningdesignsystem.com/

    Step 2: Click Platform -> lightning.

    The given connection in the depiction is https://tools.lightningdesignsystem.com/css-customizer 

    Stage 3 generates a perusing class. You need to utilize the name of the class you have quite recently referenced, further in the code.

    Lightning innovations are utilized by  Lightning Experience Salesforce:- Stand-alone Lightning app Lightning Out component Lightning Components for Visualforce. Use lightning structure system :With the Salesforce Lightning Plan System (SLDS) we will make custom applications with a see and feel that’s great with Salesforce center highlights.SLDS incorporates the assets to make UIs reliable with the Salesforce Lightning standards. it’s accompanied cross-program perfect CSS.

    How might I use the lightning plan framework CSS(style) on my Lightning part?

    Step1:- Download (SLDS) platform-agnostic CSS framework

    Step2:- Upload zip files as static resources in your Org.

    dont miss out iconCheck out another amazing blog by Marziya here: Salesforce Security Model – Explained

    After viably downloading the lightning arrange system structure zip presently we are going to exchange it as an inactive resource. For exchange compress document, from Setup, enter Inactive Assets within the Speedy Discover box, at that point select Inactively,

    Assets, and snap Modern. In the Title field, enter the title which is utilized within the lighting segment. Snap Select Record or Browse. , and find the compressed archive you downloaded. Within the Cache-Control drop-down rundown, select Open.

    Click Save button

    Step 3:- Utilize the lightning design CSS framework on the lightning component.

    By the ltng:require tag in the lightning part we can stack outside CSS and JavaScript libraries after we transfer them as static assets.

    Thank You!