Responsive Grid
|
1 2 3 4 5 6 7 |
<div class="slds-grid slds-wrap"> <div class="slds-col slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_4-of-12"> <span>1</span> </div> </div> |
SLDS – Grid
Spinner Tag
|
1 2 3 |
<lightning-spinner if:true={showSpinner} alternative-text="Loading" size="medium" class="spinnerClass"></lightning-spinner> |
Button Tag
|
1 2 3 4 5 |
<lightning-button variant="brand" label="Save" title="Save" onclick={handleButtonClick} class="slds-p-around_xx-small"></lightning-button> <!-- Variant -> base, brand, brand-outline, destructive, destructive-text, success --> |
Component Library – Button
Button Icons
|
1 2 3 4 5 6 7 8 9 10 11 |
<lightning-button-icon data-id={index} icon-name="utility:edit" onclick={handleIconClick} size="small" name="" variant="container" class="slds-p-around_xx-small" alternative-text="Edit" title="Edit"></lightning-button-icon> <lightning-button-icon data-id={index} icon-name="utility:preview" onclick={handleIconClick} size="small" name="" variant="container" class="slds-p-around_xx-small" alternative-text="Preview" title="Preview"></lightning-button-icon> <lightning-button-icon data-id={index} icon-name="utility:add" onclick={handleIconClick} size="small" name="" variant="brand" class="slds-p-around_xx-small" alternative-text="Add" title="Add"></lightning-button-icon> <lightning-button-icon data-id={index} icon-name="utility:dash" onclick={handleIconClick} size="small" name="" variant="brand" class="slds-p-around_xx-small" alternative-text="Subtract" title="Subtract"></lightning-button-icon> <lightning-button-icon data-id={index} icon-name="utility:delete" onclick={handleIconClick} size="small" name="" variant="container" class="slds-p-around_xx-small" alternative-text="Delete" title="Delete"></lightning-button-icon> |
Icon Library – Icons
Input Tag
|
1 2 3 |
<lightning-input label="label" value={value} onchange={handleMICRNoChange} type="text" placeholder="MICR No" class="" name=""></lightning-input> |
Component Library – Input
Combobox Tag
|
1 2 3 4 5 |
<lightning-combobox name="combobox" value={value} label="Combobox" options={options} onchange={handleComboboxChange} placeholder="Select" class="coreEelement" disabled={disableCombobox} required></lightning-combobox> |
Component Library – Combobox
Custom Table
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="scrollableDiv"> <table class="customTable slds-table slds-table_bordered slds-table_col-bordered"> <thead> <tr class="slds-line-height_reset"> <th class="" scope="col"> <div class="slds-truncate" title="Items">Items</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Comment">Comment</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Amount">Amount</div> </th> </tr> </thead> <tbody> <template for:each={options} for:item="rec" for:index="index"> <tr key={rec.Id} class="slds-hint-parent"> <td> <div class="slds-truncate" title={rec.items}>{rec.items}</div> </td> <td> <lightning-input value={value} name={index} onchange={handleInputChange} class="coreElement" type="Number" variant="label-hidden" required></lightning-input> </td> <td> <lightning-formatted-number value={value} format-style="percent" maximum-fraction-digits="3"></lightning-formatted-number> </td> </tr> </template> </tbody> </table> </div> |
SLDS – Custom Table
Modal/Popup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<template if:true={showModal}> <section aria-labelledby="confirmationModal" aria-modal="true" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container modalContainer"> <header class="slds-modal__header modalHeader"> <div class="slds-clearfix"> <div class="slds-float_left inlineDisplay"> <lightning-icon icon-name="action:following" size="xx-small" alternative-text="Warning!" title="Warning"></lightning-icon> <h2 class="slds-text-heading_small modalHeadText slds-hyphenate">Heading</h2> </div> <div class="slds-float_right slds-p-around_xx-small"> <lightning-icon icon-name="utility:close" class="pointer" variant="inverse" size="small" onclick={closeModal}></lightning-icon> </div> </div> </header> <div class="slds-modal__content slds-p-around_small"> <div class="slds-grid"> </div> </div> </div> </section> <div class="slds-backdrop slds-backdrop_open"></div> </template> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.inlineDisplay { display: inline-flex; } .modalContainer { max-width: 25rem; min-width: 25rem; width: 25rem; margin: 0 auto; } .modalHeader { text-align: left; background: #1D4282 !important; color: #fff; } @media only screen and (max-width: 600px) { .modalContainer { max-width: 18rem; min-width: 18rem; width: 18rem; margin: 0 auto; } } |
