Design attributes in Lightning Web Components

EP.11

🪓 예제

• myComponent

  • html

  <template>
      <lightning-card title="Welcome in Apex Hours" icon-name="custom:custom14">
          <div>
              <p class="ColorClass">Hello, {firstName}</p>
              <template if:true={showImage}>
                  <div>
                      <img src={imgUrl}/>
                  </div>
              </template>
          </div>
      </lightning-card>
  </template>

  • js

  import { LightningElement, api } from 'lwc';
  export default class MyComponent extends LightningElement {
  
      @api firstName = '거 누구계슈';
      @api strTitle  = 'Welcome in Salesforce';
      @api showImage = false;
      @api imgUrl = '';
  
  }

  • xml

  <?xml version="1.0" encoding="UTF-8"?>
  <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
      <apiVersion>57.0</apiVersion>
      <isExposed>true</isExposed>
      <targets>
          <target>lightning__AppPage</target>
          <target>lightning__HomePage</target>
          <target>lightning__RecordPage</target>
      </targets>
      <targetConfigs>
          <targetConfig targets="lightning__HomePage">
          <!-- 입력 받을 속성? -->
              <property name="strTitle" type="String" default="Welcome in Salesforce" label="Enter the title" />
              <property name="showImage" type="Boolean" default="true" label="Show Image" />
              <property name="imgUrl" type="String" default="" label="Enter Image URL" />
          </targetConfig>
          <!-- Account, Opportunity의 레코드 페이지에서만 이 컴포넌트를 사용할 수 있음 -->
          <targetConfig targets="lightning__RecordPage">
              <property name="strTitle" type="String" default="Welcome in Salesforce" label="Enter the title" />
              <property name="showImage" type="Boolean" default="true" label="Show Image" />
              <property name="imgUrl" type="String" default="" label="Enter Image URL" />
              <objects>
                  <object>Account</object>
                  <object>Opportunity</object>
              </objects>
          </targetConfig>
      </targetConfigs>
  </LightningComponentBundle>

  ❗ css 파일은 컴포넌트 번들명이랑 완전히 일치해야함 (myComponent.css)
  ❗ svg 파일을 만들어서 컴포넌트 아이콘 설정 가능(아래 캡처의 아이콘)