A Collection of Lightning Component Library, Developer Guide and Lightning Design System (SLDS) | Component Library of lightning developer in Salesforce

448 views

Find step-by-step aura documentation component example, Lightning Component Library, Developer guide and Lightning design system.

The Lightning Component framework is a UI framework for developing single page applications for mobile and desktop devices.

As of Spring ’19 (API version 45.0), you can build Lightning components using two programming models: the Lightning Web Components model, and the original Aura Components model. Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page.

Configure Lightning web components and Aura components to work in Lightning App Builder and Experience Builder. Admins and end users don’t know which programming model was used to develop the components. To them, they’re simply Lightning components. To know more, Use this Link..

Download ebooks:- Click here to download E-Book "The most 20 popular articles of w3web.net"

Don’t forget to check out:- Find the Lightning Web Component (LWC) UI Developer Guide, Component Reference and Aura Documentation Click Here For More Information

Aura Component:- Input

  <div class="row">
        <h2 class="header">Basic Input Date</h2>
        <lightning:input type="date" name="input1" label="Enter a date" />
        <lightning:input type="date" name="input2" label="Date field with a predefined value" value="2020-09-07"/>
        <lightning:input type="date" name="input3" label="Date field with ISO8601 formatted value" value="2020-09-07T00:00:00Z"/>
        <lightning:input type="date" name="input4" label="Date field with placeholder (desktop only)" placeholder="type here..."/>
    </div>

    <div class="row">
        <h2 class="header">Advanced Input Date</h2>
        <lightning:input type="date" name="input5" label="Required date field" required="true" value="2020-09-07" />
        <lightning:input type="date" name="input6" label="Read-only date field" readonly="true" value="2020-09-07" />
        <lightning:input type="date" name="input7" label="Disabled date field" disabled="true" value="2020-09-07" />
        <lightning:input type="date" name="input8" label="Date field with min and max values" value="2020-09-07" min="2020-09-05" max="2020-09-22" />
    </div>

<h2 class="header">Basic Input Date</h2>

<lightning:input type="date" name="input1" label="Enter a date" />

<lightning:input type="date" name="input2" label="Date field with a predefined value" value="2020-09-07"/>

<lightning:input type="date" name="input3" label="Date field with ISO8601 formatted value" value="2020-09-07T00:00:00Z"/>

<lightning:input type="date" name="input4" label="Date field with placeholder (desktop only)" placeholder="type here..."/>

</div>

<h2 class="header">Advanced Input Date</h2>

<lightning:input type="date" name="input5" label="Required date field" required="true" value="2020-09-07" />

<lightning:input type="date" name="input6" label="Read-only date field" readonly="true" value="2020-09-07" />

<lightning:input type="date" name="input7" label="Disabled date field" disabled="true" value="2020-09-07" />

<lightning:input type="date" name="input8" label="Date field with min and max values" value="2020-09-07" min="2020-09-05" max="2020-09-22" />

</div>

Aura Component:- Date/Time Input

  <div class="row">
        <h2 class="header">Basic Input Date Time</h2>
        <lightning:input type="datetime" name="input1" label="Enter a date/time value" />
        <lightning:input type="datetime" name="input2" label="Date Time field with a predefined value" value="2020-09-12T18:13:41Z"/>
    </div>

    <div class="row">
        <h2 class="header">Advanced Input Date Time</h2>
        <lightning:input type="datetime" name="input3" label="Required Date Time field" required="true" value="2020-09-12T18:13:41Z" />
        <lightning:input type="datetime" name="input4" label="Disabled Date Time field" disabled="true" value="2020-09-12T18:13:41Z" />
        <lightning:input type="datetime" name="input5" label="Date Time field with min and max values" value="2020-09-12T18:13:41Z" min="2020-08-03T08:20:44Z" max="2020-09-25T22:33:44Z" />
    </div>

<h2 class="header">Basic Input Date Time</h2>

<lightning:input type="datetime" name="input1" label="Enter a date/time value" />

<lightning:input type="datetime" name="input2" label="Date Time field with a predefined value" value="2020-09-12T18:13:41Z"/>

</div>

<h2 class="header">Advanced Input Date Time</h2>

<lightning:input type="datetime" name="input3" label="Required Date Time field" required="true" value="2020-09-12T18:13:41Z" />

<lightning:input type="datetime" name="input4" label="Disabled Date Time field" disabled="true" value="2020-09-12T18:13:41Z" />

<lightning:input type="datetime" name="input5" label="Date Time field with min and max values" value="2020-09-12T18:13:41Z" min="2020-08-03T08:20:44Z" max="2020-09-25T22:33:44Z" />

</div>

Aura Component:- Time Input

Subscribe My Channel :- Tech W3web - YouTube

<div class="row">
        <h2 class="header">Basic Input Time</h2>
        <lightning:input type="time" name="input1" label="Enter a time" />
        <lightning:input type="time" name="input2" label="Time field with a predefined value" value="18:30:00.000Z"/>
        <lightning:input type="time" name="input3" label="Time field with placeholder (desktop only)" placeholder="type here..."/>
    </div>

    <div class="row">
        <h2 class="header">Advanced Input Time</h2>
        <lightning:input type="time" name="input4" label="Required Time field" required="true" value="18:30:00.000Z" />
        <lightning:input type="time" name="input5" label="Disabled Time field" disabled="true" value="18:30:00.000Z" />
        <lightning:input type="time" name="input6" label="Time field with min and max values" value="18:30:00.000Z" min="10:30:00.000Z" max="22:00:00.000Z" />
    </div>

<h2 class="header">Basic Input Time</h2>

<lightning:input type="time" name="input1" label="Enter a time" />

<lightning:input type="time" name="input2" label="Time field with a predefined value" value="18:30:00.000Z"/>

<lightning:input type="time" name="input3" label="Time field with placeholder (desktop only)" placeholder="type here..."/>

</div>

<h2 class="header">Advanced Input Time</h2>

<lightning:input type="time" name="input4" label="Required Time field" required="true" value="18:30:00.000Z" />

<lightning:input type="time" name="input5" label="Disabled Time field" disabled="true" value="18:30:00.000Z" />

<lightning:input type="time" name="input6" label="Time field with min and max values" value="18:30:00.000Z" min="10:30:00.000Z" max="22:00:00.000Z" />

</div>

Aura Component:- Color Input

  <lightning:input type="color" name="color" label="Favorite Color"/>

1	<lightning:input type="color" name="color" label="Favorite Color"/>

Aura Component:- File Input

  <lightning:input name="file1" type="file" label="Attachment" multiple="true" accept="image/png, .zip" onchange="{! c.handleFilesChange }"/>
    <lightning:input name="file2" type="file" label="Attachment(version required)" required="true" onchange="{! c.handleFilesChange }"/>
    <lightning:input name="file3" type="file" label="Attachment(version disabled)" disabled="true" onchange="{! c.handleFilesChange }"/>

<lightning:input name="file1" type="file" label="Attachment" multiple="true" accept="image/png, .zip" onchange="{! c.handleFilesChange }"/>

<lightning:input name="file2" type="file" label="Attachment(version required)" required="true" onchange="{! c.handleFilesChange }"/>

<lightning:input name="file3" type="file" label="Attachment(version disabled)" disabled="true" onchange="{! c.handleFilesChange }"/>

Aura Component:- File Input Controller Js

   handleFilesChange : function (cmp, event) {
        var files = event.getSource().get("v.files");
        alert(files.length + ' files !!');
    }

handleFilesChange : function (cmp, event) {

var files = event.getSource().get("v.files");

alert(files.length + ' files !!');

}

Aura Component:- Input Checkbox

   <aura:attribute name="myBool" type="Boolean" default="true"/>
	<ui:inputCheckbox aura:id="checkbox" label="Select?" change="{!c.onCheck}"/>
	<p>Selected:</p>
	<p><ui:outputText class="result" aura:id="checkResult" value="false" /></p>
	<p>The following checkbox uses a component attribute to bind its value.</p>
	<ui:outputCheckbox aura:id="output" value="{!v.myBool}"/>

<aura:attribute name="myBool" type="Boolean" default="true"/>

<ui:inputCheckbox aura:id="checkbox" label="Select?" change="{!c.onCheck}"/>

<p>Selected:</p>

<p>The following checkbox uses a component attribute to bind its value.</p>

<ui:outputCheckbox aura:id="output" value="{!v.myBool}"/>

Aura Component:- Input Checkbox Controller Js

   onCheck: function(cmp, evt) {
		 var checkCmp = cmp.find("checkbox");
		 resultCmp = cmp.find("checkResult");
		 resultCmp.set("v.value", ""+checkCmp.get("v.value"));

	 }

onCheck: function(cmp, evt) {

var checkCmp = cmp.find("checkbox");

resultCmp = cmp.find("checkResult");

resultCmp.set("v.value", ""+checkCmp.get("v.value"));

}

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

FAQ (Frequently Asked Questions)

What is lightning component library?

The Lightning Component Library is your hub for Lightning UI developer information, including reference information, this developer guide, and Lightning Locker tools. ... The Component Reference includes documentation and reference information for the base components.

What are the lightning components in Salesforce?

Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To create Lightning web components, use the code editor of your choice and the Salesforce CLI.

How do I find lightning web components in Salesforce?

From Setup, enter Lightning Components in the Quick Find box, then select Lightning Components.

Author of w3web.net

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

5 thoughts on “A Collection of Lightning Component Library, Developer Guide and Lightning Design System (SLDS) | Component Library of lightning developer in Salesforce”

Jogani Wellness

March 10, 2021 at 8:43 am

Best Article
Shah santosh

May 31, 2021 at 12:30 am

You have nice coding programs language article this my first blog for love status in hindi shayari so I Really
Shah santosh

May 31, 2021 at 1:54 am

You have nice coding programs language article this my first blog for love status in hindi shayari so I Really
Carter

July 28, 2021 at 1:23 pm

You have nice coding programs language article this my first blog for love status in hindi shayari so I Really…
Fiona Xu

August 9, 2021 at 5:39 am

Amazing article, and I have learnt a lot

A Collection of Lightning Component Library, Developer Guide and Lightning Design System (SLDS) | Component Library of lightning developer in Salesforce

What is lightning component library?

What are the lightning components in Salesforce?

How do I find lightning web components in Salesforce?

Related Topics | You May Also Like

Author of w3web.net

5 thoughts on “A Collection of Lightning Component Library, Developer Guide and Lightning Design System (SLDS) | Component Library of lightning developer in Salesforce”

Leave a Comment Cancel reply