Design Attribute in LWC :
What is?
When you want to expose any attribute to the end user so that the user can modify the values of the component in builder tools like the Lightning App Builder, Community Builder, or Flow Builder.
Where to define?
You need to define attribute in Component Configuration File (XML).
?You need to define the?property?in the component’s?JavaScript class using the @api?decorator.
Let’s have a sneak peek at this using below example:
DesignAttrubuteUsingLWC.html :
<template>??
??????<lightning-card title="Design Attribute Picklist Demo" icon-name="custom:custom19">?
<div>
? <p>{firstName} </p>
????????????????????<p>{lastName} </p>
?????????????</div>??
??????</lightning-card>
</template>
?
DesignAttrubuteUsingLWC.js :
Import {LightningElement,api} from ‘lwc’
export default class DesignAttrubuteUsingLWC extends LightningElement {
??@api firstName =’Sweety’;
??@api lastName =’Kumari’;
};
DesignAttrubuteUsingLWC.js-meta.xml :
<?xml version="1.0" encoding="UTF-8"?>
???????<LightningComponentBundle xmlns="https://soap.sforce.com/2006/04/metadata" fqn="MyComponent">
????????<apiVersion>45.0</apiVersion>
???????<isExposed>true</isExposed>
???????<targets>
???????????<target>lightning__AppPage</target>
???????????<target>lightning__RecordPage</target>
???????????<target>lightning__HomePage</target>
???????</targets>
??????<targetConfigs>
????????????????<targetConfig targets="lightning__HomePage, lightning__RecordPage">
???????????????<property name="firstName" type="String" default=" " label="Enter the FirstName"/>
????????????????<property name="lastName" type="string" default="true" label=" Enter the LastName “/>
??????????????</targetConfig>
???????</targetConfigs>
</LightningComponentBundle>