หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

! repo นี้ถูกเก็บถาวร ณ เดือนเมษายนปี 2023 นักพัฒนาที่กำลังมองหาซอร์สโค้ดควรอ้างอิงแพ็คเกจ NPM สาธารณะที่ใช้สายฟ้า ซอร์สโค้ดมีให้โดยไม่มีสัญญาสนับสนุน !

เก็บถาวร: สูตรส่วนประกอบพื้นฐาน

ดูตัวอย่างสำหรับส่วนประกอบพื้นฐานในการกัดเล็ก ๆ แต่ละสูตรแสดงตัวอย่างการทำงานของส่วนประกอบพื้นฐานเพื่อสร้างหน้าและแอพอย่างรวดเร็ว ใช้และปรับแต่งส่วนประกอบพื้นฐานและสูตรอาหารในแอพของคุณ

สูตรส่วนประกอบพื้นฐานเปิดซอร์สโค้ดสำหรับส่วนประกอบพื้นฐานที่แสดงในไลบรารีส่วนประกอบ เราเปลี่ยนส่วนประกอบพื้นฐานลงในเนมสเปซ c เพื่อให้คุณสามารถใช้ส่วนประกอบในโครงการของคุณ สำรวจการทำงานภายในของส่วนประกอบและใช้ซอร์สโค้ดเพื่อสร้างส่วนประกอบใหม่ด้วยความต้องการของคุณเอง ความเป็นไปได้ไม่มีที่สิ้นสุดด้วยแหล่งที่มาในมือของคุณ!

มีเพียงส่วนย่อยของส่วนประกอบในไลบรารีส่วนประกอบเท่านั้น สำหรับข้อมูลเพิ่มเติมดูส่วนเอกสาร

ส่วนประกอบพื้นฐานใช้ระบบการออกแบบ Lightning Salesforce (SLDS) และได้รับการพัฒนาโดยใช้องค์ประกอบของเว็บสายฟ้า ส่วนประกอบ Namespace c สามารถมีส่วนประกอบในเนมสเปซ lightning

ก่อนเริ่ม

พิจารณาใช้สูตรส่วนประกอบพื้นฐานเฉพาะในกรณีที่ส่วนประกอบพื้นฐานในเนมสเปซ lightning ไม่ทำงานตามความต้องการของคุณ ตัวอย่างเช่นใช้สูตรส่วนประกอบพื้นฐานหากคุณต้องการปรับแต่งรูปแบบของส่วนประกอบพื้นฐานนอกเหนือจากกลไกการออกแบบที่รองรับ สำหรับรายการส่วนประกอบพื้นฐานที่มีอยู่ในเนมสเปซ lightning ให้ดูที่ไลบรารีส่วนประกอบ

ในการปรับแต่งสไตล์บนส่วนประกอบเนมสเปซของ lightning เราขอแนะนำให้ใช้ตะขอสไตล์ SLDS สำหรับข้อมูลเพิ่มเติมดูส่วนประกอบสไตล์ด้วย SLDS

เริ่มต้น

เราขอแนะนำให้ใช้ org scratch เพื่อทำงานกับสูตรส่วนประกอบพื้นฐานบนแพลตฟอร์ม Salesforce

  1. ตั้งค่าสภาพแวดล้อมของคุณโดยทำตามขั้นตอนในคู่มือ DEV Web Components ซึ่งรวมถึง:

    • ติดตั้ง Salesforce CLI
    • ติดตั้งรหัส Visual Studio และ Salesforce Extension Pack หรือตัวแก้ไขรหัสที่คุณชื่นชอบ
    • ตั้งค่า DEV Hub org เพื่อให้คุณสามารถทำงานกับองค์ประกอบของเว็บสายฟ้าใน orgs รอยขีดข่วน

  2. รับรองความถูกต้องด้วย org ฮับ dev ของคุณและให้นามแฝงตามที่แสดงโดย mybaseorg ในคำสั่งต่อไปนี้ 

sfdx force:auth:web:login -d -a mybaseorg
  1. โคลนพื้นที่เก็บข้อมูลฐานองค์ประกอบ 
git clone [email protected]:salesforce/base-components-recipes.git
cd base-components-recipes
  1. สร้าง org scratch และให้นามแฝงตามที่แสดงโดย base-recipes ในคำสั่งต่อไปนี้ 
sfdx force:org:create -s -f config/project-scratch-def.json -a base-recipes

หากคุณได้รับข้อผิดพลาด "คุณไม่สามารถเข้าถึงวัตถุ [scratchorginfo]" ตรวจสอบให้แน่ใจว่าคุณได้เปิดใช้งานองค์กรของคุณเป็นฮับฮับ ดูเปิดใช้งาน Dev Hub ในองค์กรของคุณ อีกทางเลือกหนึ่งคือลงทะเบียนสำหรับ dev hub org ที่ https://developer.salesforce.com/promotions/orgs/dx-signup

  1. กดรหัสส่วนประกอบพื้นฐานของตัวเลือกไปยัง org รอยขีดข่วนของคุณ 
sfdx force:source:push
  1. เปิด org รอยขีดข่วน 
sfdx force:org:open
  1. ในแอพ Launcher ให้เลือกแอป Base Components แอพนี้แสดงสูตรส่วนประกอบพื้นฐานที่องค์ประกอบพื้นฐาน-รีเลค/ตัวอย่าง/LWC

ใช้ส่วนประกอบพื้นฐานบนแพลตฟอร์ม Salesforce

สร้างองค์ประกอบเว็บ HelloWorld Lightning ที่ใช้องค์ประกอบพื้นฐาน c-button เราจะใช้รหัส Visual Studio ในตัวอย่างนี้

  1. ใน Visual Studio Code ให้เปิดไดเรกทอรี base-components-recipes ของคุณ
  2. เปิดจานคำสั่งโดยกด Ctrl+shift+p บน windows หรือ cmd+shift+p บน macOS
  3. พิมพ์ SFDX
  4. เลือก SFDX: สร้างองค์ประกอบเว็บ Lightning
  5. พิมพ์ HelloWorld สำหรับชื่อขององค์ประกอบใหม่และกด Enter
  6. กด ENTER เพื่อยอมรับไดเร็กทอรี force-app/main/default/lwc เริ่มต้น
  7. ชุด helloWorld ถูกสร้างขึ้นใน force-app/main/default/lwc และไฟล์ helloWorld.js JavaScript จะเปิดขึ้นในตัวแก้ไข
  8. ใน helloWorld.js แทนที่เนื้อหาด้วยรหัสต่อไปนี้ บันทึกไฟล์ 
 //helloWorld.js

import { LightningElement , api } from 'lwc' ;
export default class HelloWorld extends LightningElement {
    @ api greeting = 'Hello World' ;
}
  1. เปิดไฟล์ HTML, helloWorld.html และแทนที่เนื้อหาด้วยรหัสต่อไปนี้ บันทึกไฟล์ 
 <!--helloWorld.html-->

< template >
    < c-button label = {greeting} title =" greeting " > </ c-button >
</ template >
  1. ในไฟล์ XML, helloWorld.js-meta.xml แทนที่เนื้อหาด้วยรหัสต่อไปนี้ บันทึกไฟล์ 
<? xml version = " 1.0 " encoding = " UTF-8 " ?>
< LightningComponentBundle xmlns = " http://soap.sforce.com/2006/04/metadata " >
    < apiVersion >47.0</ apiVersion >
    < isExposed >true</ isExposed >
    < targets >
        < target >lightning__AppPage</ target >
        < target >lightning__RecordPage</ target >
        < target >lightning__HomePage</ target >
  </ targets >
</ LightningComponentBundle >
  1. ผลักดันการเปลี่ยนแปลงของคุณ 
sfdx force:source:push

ตอนนี้องค์ประกอบ HelloWorld ของคุณพร้อมสำหรับการดำเนินการแล้ว คุณสามารถเพิ่มส่วนประกอบนี้ลงในแอพและหน้าของคุณผ่านตัวสร้างแอป Lightning สำหรับข้อมูลเพิ่มเติมโปรดดูการเริ่มต้นอย่างรวดเร็ว: Lightning Web Components โครงการ Trailhead

[การทดลอง] ใช้ส่วนประกอบพื้นฐานนอกแพลตฟอร์ม Salesforce

ส่วนประกอบพื้นฐานในเนมสเปซ c มีไว้สำหรับใช้บนแพลตฟอร์ม Salesforce อย่างไรก็ตามเราตระหนักถึงความปรารถนาที่จะใช้พวกเขาในสถานการณ์ที่ไม่ใช่การขาย ปัจจุบันส่วนประกอบจำนวนมากจะทำงานได้ แต่ส่วนอื่น ๆ จะไม่เกิดขึ้นเนื่องจากการพึ่งพาแพลตฟอร์ม Salesforce เป้าหมายของเราคือการจัดหาส่วนประกอบพื้นฐานสำหรับกรณีการใช้งานที่ไม่ใช่การขายและเราได้สร้าง LWC Storybook POC เพื่อแสดงว่าสิ่งนี้อาจเป็นอย่างไรในอนาคต โปรดคลิกปุ่มดูบน Repo สำหรับการอัปเดตในขณะที่เราก้าวไปข้างหน้า

เอกสาร

ส่วนประกอบพื้นฐานในแผนที่เนมสเปซ c ไปยังส่วนประกอบในเนมสเปซ lightning เราเปลี่ยนส่วนประกอบพื้นฐานลงในเนมสเปซ c เพื่อให้คุณสามารถใช้ส่วนประกอบในโครงการของคุณ ค้นหาส่วนประกอบพื้นฐานในเนมสเปซ c ในองค์ประกอบพื้นฐาน-ส่วนประกอบ/force-app/main/default/lwc/

ส่วนประกอบด้านล่างลิงก์ไปยังเอกสารประกอบสำหรับส่วนประกอบในเนมสเปซ lightning แต่การใช้งานจะคล้ายกันเว้นแต่จะระบุไว้เป็นอย่างอื่น

ส่วนประกอบ คำอธิบาย การแสดงความคิดเห็น
C-Accordion คอลเลกชันของส่วนที่ซ้อนกันในแนวตั้งที่มีพื้นที่เนื้อหาหลายพื้นที่ ส่วนประกอบนี้มีสล็อตและไม่รองรับเป็นองค์ประกอบออร่า
C-Accordion-section เนื้อหาส่วนเดียว ใช้ส่วนประกอบนี้ภายใน c-accordion ส่วนประกอบนี้มีสล็อตและไม่รองรับเป็นองค์ประกอบออร่า
C-Avatar การแสดงภาพของวัตถุเช่นบัญชีหรือผู้ใช้
C-badge ฉลากที่เก็บข้อมูลจำนวนเล็กน้อยเช่นจำนวนการแจ้งเตือนที่ยังไม่ได้อ่าน
C-button องค์ประกอบปุ่มที่เรียกใช้การกระทำ
C-button-Group กลุ่มของปุ่มที่เรียกการกระทำที่คล้ายกัน
C-button-Icon องค์ประกอบปุ่มไอคอนเท่านั้นที่เรียกใช้การกระทำ ไม่รองรับแอตทริบิวต์คำแนะนำ tooltip
C-Button-Icon-Stateful ปุ่มไอคอนเท่านั้นที่รักษาสถานะ
C-button-menu เมนูแบบเลื่อนลงพร้อมรายการการกระทำหรือฟังก์ชั่น ใช้ส่วนประกอบนี้ด้วย c-menu-divider และ c-menu-subheader เพื่อสร้างตัวแบ่งเมนูและหัวย่อย ไม่รองรับแอตทริบิวต์คำแนะนำ tooltip สำหรับแอตทริบิวต์ menu-alignment ไม่รองรับการจัดตำแหน่ง auto ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
C-button-Stateful ปุ่มที่สลับระหว่างรัฐ
การ์ด C ภาชนะที่มีสไตล์รอบ ๆ กลุ่มข้อมูล ส่วนประกอบนี้มีสล็อตและไม่รองรับเป็นองค์ประกอบออร่า
คาราเซล คอลเลกชันของภาพและคำอธิบายภาพที่แสดงทีละครั้ง ใช้ส่วนประกอบนี้ด้วย c-carousel-image ส่วนประกอบนี้มีสล็อตและไม่รองรับเป็นองค์ประกอบออร่า ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
C-checkbox-Group กลุ่มช่องทำเครื่องหมายที่เปิดใช้งานการเลือกตัวเลือกเดียวหรือหลายตัวเลือก
C-combobox ฟิลด์อินพุตแบบอ่านอย่างเดียวพร้อมรายการดรอปดาวน์สำหรับการเลือกเดียว ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
c-dual-listbox รายการคู่ที่เปิดใช้งานตัวเลือกหลายตัวที่จะเลือกและจัดลำดับใหม่ ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
c-dynamic-icon ชุดไอคอนภาพเคลื่อนไหว
เวลา C-Formatted คู่ของวันที่และเวลาที่แสดงตามสถานที่ของผู้ใช้
สถานที่จัดรูปแบบ C ละติจูดและลองจิจูดคู่หนึ่งสำหรับสถานที่
ชื่อ C-Formatted ชื่อที่แสดงตามสถานที่ของผู้ใช้ซึ่งกำหนดรูปแบบและลำดับขององค์ประกอบ (คำต่อท้ายคำทักทาย ฯลฯ )
หมายเลข C-Formatted ทศนิยมสกุลเงินหรือเปอร์เซ็นต์ที่แสดงฐานบนสถานที่ของผู้ใช้
c-formatted-phone หมายเลขโทรศัพท์ที่เปิดแอพโทร VoIP เริ่มต้นเมื่อคลิก
ข้อความ C-Formatted กลุ่มข้อความที่มีตัวเลือกในการแสดง URL และที่อยู่อีเมลเป็นลิงค์
เวลา C-Formatted ค่าเวลาที่แสดงตามสถานที่ของผู้ใช้
C-formatted-url URL ที่แสดงเป็นลิงค์
C-ICON องค์ประกอบภาพที่ให้บริบทและเพิ่มความสามารถในการใช้งาน สำหรับใช้บนแพลตฟอร์ม Salesforce เท่านั้น
C-Input-Location ทุ่งละติจูดและลองจิจูดคู่หนึ่ง ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
C-layout ระบบกริดที่ตอบสนอง ส่วนประกอบนี้มีสล็อตและไม่รองรับเป็นองค์ประกอบออร่า
c-layout-item ภาชนะในระบบกริด ส่วนประกอบนี้มีสล็อตและไม่รองรับเป็นองค์ประกอบออร่า
c-menu-item รายการรายการในเมนู ใช้ส่วนประกอบนี้ภายใน c-button-menu
C-output-field การแสดงแบบอ่านฉลากข้อความช่วยเหลือและความคุ้มค่าสำหรับฟิลด์บนวัตถุ Salesforce ใช้ส่วนประกอบนี้ภายใน c-record-view-form สำหรับใช้บนแพลตฟอร์ม Salesforce เท่านั้น
C-pill ฉลากที่สามารถมีลิงค์และสามารถลบออกจากมุมมองได้ ส่วนประกอบนี้มีสล็อตและไม่รองรับเป็นองค์ประกอบออร่า ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
C-pill-container รายการยาที่จัดกลุ่มในคอนเทนเนอร์ ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
กลุ่ม C-radio กลุ่มปุ่มตัวเลือกที่สามารถเลือกตัวเลือกเดียวได้ ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
C-record-edit-form แบบฟอร์มสำหรับการสร้างหรือแก้ไขบันทึกด้วยหนึ่งช่องหรือมากกว่า สำหรับใช้บนแพลตฟอร์ม Salesforce เท่านั้น ใช้ c-record-edit-form กับ lightning-input-field ใช้ c-messages ในแบบฟอร์มเพื่อแสดงข้อความแสดงข้อผิดพลาดฝั่งเซิร์ฟเวอร์ ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
รูปแบบ C-record แบบฟอร์มสำหรับการสร้างการแสดงหรือแก้ไขบันทึกด้วยการสลับอัตโนมัติระหว่างโหมดแก้ไขและโหมดดู สำหรับใช้บนแพลตฟอร์ม Salesforce เท่านั้น ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
รูปแบบ C-RECORD-VIEW-FORM แบบฟอร์มสำหรับการแสดงข้อมูลบันทึก ใช้ c-output-field ภายใน c-record-view-form สำหรับใช้บนแพลตฟอร์ม Salesforce เท่านั้น ส่วนประกอบนี้มีสล็อตและไม่รองรับเป็นองค์ประกอบออร่า ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
เวลา C-Relative กลุ่มของข้อความแสดงให้เห็นว่าเวลาที่กำหนดเกี่ยวข้องกับเวลาปัจจุบันเช่น "ไม่กี่วินาทีที่ผ่านมา" หรือ "ใน 5 ปี"
C-slider ตัวเลื่อนช่วงอินพุตที่เปิดใช้งานการเลือกค่าระหว่างสองตัวเลขที่ระบุ
C-spinner สปินเนอร์อนิเมชั่น
C-tab แท็บเดียวภายในองค์ประกอบ c-tabset
C-tabset รายการแท็บ ใช้ส่วนประกอบนี้ด้วย c-tab ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
C-textarea ฟิลด์ textarea สำหรับการป้อนข้อความหลายบรรทัด ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
C-tile กลุ่มข้อมูลที่เกี่ยวข้องที่เกี่ยวข้องกับบันทึก ส่วนประกอบนี้มีสล็อตและไม่รองรับเป็นองค์ประกอบออร่า ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
C-Tree การสร้างภาพของลำดับชั้นโครงสร้างที่มีรายการซ้อนกันซึ่งสามารถยุบหรือขยายได้ ใช้ส่วนประกอบนี้กับ c-tree-item ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
c-ventical-navigation รายการแนวตั้งของลิงก์ที่สามารถจัดกลุ่มเป็นส่วนต่างๆโดยใช้ c-vertical-navigation-section ส่วนประกอบนี้มีสล็อตและไม่รองรับเป็นองค์ประกอบออร่า ส่วนประกอบนี้อ้างอิงฉลากบนแพลตฟอร์ม Salesforce
c-ventical-navigation-item ลิงก์ข้อความอย่างเดียวภายใน c-vertical-navigation-section หรือ c-vertical-navigation-overflow
c-ventical-navigation-item-badge ลิงค์และป้ายภายใน c-vertical-navigation-section หรือ c-vertical-navigation-overflow
c-ventical-navigation-item-icon ลิงค์และไอคอนภายใน c-vertical-navigation-section หรือ c-vertical-navigation-overflow

การแปลเป็นภาษาท้องถิ่น

คุณสามารถสร้างป้ายกำกับที่กำหนดเองได้สูงสุด 5,000 ป้ายสำหรับองค์กรของคุณและพวกเขามีความยาวสูงสุด 1,000 อักขระ สร้างฉลากที่กำหนดเองที่คุณสามารถใช้ในส่วนประกอบของเว็บสายฟ้าของคุณ

อัปเดตฉลาก

หากต้องการอัปเดตข้อมูลเมตาของป้ายกำกับที่กำหนดเองให้ไปที่ไดเรกทอรี force-app/main/default/labels ป้ายกำกับมีอยู่ในไฟล์ lightning.labels-meta.xml สำหรับไวยากรณ์และตัวอย่างของคำจำกัดความของ CustomLabels ให้ดูคำแนะนำข้อมูลเมตาดาต้า API

เพิ่มป้ายกำกับสำหรับส่วนประกอบที่กำหนดเองของคุณในไฟล์ lightning.labels-meta.xml 

< labels >
    < categories >lightning</ categories >
    < fullName >MyCard_cardTitle</ fullName >
    < language >en_US</ language >
    < protected >false</ protected >
    < shortDescription >cardTitleLabel</ shortDescription >
    < value >This is my card</ value >
  </ labels >

ปรับแต่งป้ายกำกับ

ในการปรับแต่งฉลากของคุณจากการตั้งค่าให้พิมพ์ฉลากที่กำหนดเองในช่องค้นหาด่วนจากนั้นเลือก ป้ายกำกับที่กำหนดเอง ฉลากของเราถูกส่งเป็นภาษาอังกฤษและสามารถแปลเป็นภาษาอื่น ๆ ได้ สำหรับข้อมูลเพิ่มเติมโปรดดูส่วนป้ายกำกับการแปลด้านล่างและฉลากที่กำหนดเองในความช่วยเหลือของ Salesforce

ใช้ป้ายกำกับ

นำเข้าฉลากจากโมดูล @salesforce/label อ้างอิงชื่อฉลากของคุณโดยใช้ Namespace c 

 // myComponent.js

import cardTitleLabel from '@salesforce/label/c.MyCard_cardTitle' ;
import loadingLabel from '@salesforce/label/c.lightning_LightningControl_loading' ;
import { LightningElement } from 'lwc' ;

export default class MyComponent extends LightningElement {
    label = {
        cardTitleLabel ,
        loadingLabel
    } ;
}

ใช้ฉลากของคุณในองค์ประกอบเว็บสายฟ้า 

 <!-- myComponent.html -->

< template >
    < c-card title = {label.cardTitleLabel} >
        {label.loadingLabel}
    </ c-card >
</ template >

แปลฉลาก

เปิดใช้งาน Workbench การแปลเพื่อสนับสนุนการแปลในองค์กรของคุณ ดูเปิดใช้งานและปิดการใช้งาน Workbench การแปลในความช่วยเหลือของ Salesforce ถัดไปแก้ไข sfdx-project.json เพื่อรวมเส้นทางสำหรับไฟล์การแปลซึ่งมีอยู่ในโฟลเดอร์ optional 

{
    "packageDirectories" : [
        {
            "path" : " force-app " ,
            "default" : true
        },
        {
            "path" : " examples " ,
            "default" : false
        },
        {
            "path" : " optional "
        }
    ],
    "namespace" : " " ,
    "sfdcLoginUrl" : " https://login.salesforce.com " ,
    "sourceApiVersion" : " 46.0 "
}

หลังจากอัปเดต sfdx-project.json แล้วให้กดไฟล์ไปยัง org รอยขีดข่วนของคุณ 

sfdx force:source:push

การทดสอบ

เราใช้กรอบการทดสอบ JavaScript JEST เพื่อการทดสอบและเรียกใช้การทดสอบส่วนประกอบ หากคุณแก้ไขสูตรส่วนประกอบพื้นฐานหรือเพิ่มส่วนประกอบของคุณเองให้เรียกใช้การทดสอบเพื่อตรวจสอบการเปลี่ยนแปลงของคุณ

สำหรับส่วนประกอบของคุณเองเพิ่มการทดสอบลงในโฟลเดอร์ย่อย __tests__ ของโฟลเดอร์ componentName ของคุณและตั้งชื่อ componentName.spec.js

เพื่อแสดงวิธีทดสอบส่วนประกอบเราจะเพิ่มการทดสอบลงในส่วนประกอบของ HelloWorld ที่สร้างขึ้นก่อนหน้านี้

  1. สร้างโฟลเดอร์ย่อย __tests__ ในโฟลเดอร์ helloWorld

  2. สร้างไฟล์ชื่อ helloWorld.spec.js ใน __tests__

  3. แทรกรหัสนี้และบันทึกไฟล์ 

 //__tests__/helloWorld.spec.js

import { createElement } from 'lwc' ;
import Element from 'c/helloWorld' ;

const createComponent = ( params = { } ) => {
    const element = createElement ( 'c-hello-world' , { is : Element } ) ;
    Object . assign ( element , params ) ;
    document . body . appendChild ( element ) ;
    return element ;
} ;

describe ( 'c-hello-world' , ( ) => {
    it ( 'button has the expected message' , ( ) => {
        const element = createComponent ( ) ;
        const button = element . shadowRoot . querySelector ( 'c-button' ) ;
        return Promise . resolve ( ) . then ( ( ) => {
            expect ( button . label ) . toEqual ( 'Hello World' ) ;
        } ) ;
    } ) ;
} ) ;
  1. เรียกใช้ชุดทดสอบ HelloWorld จากโฟลเดอร์ base-components-recipe 
npm run test helloWorld
  1. เรียกใช้ชุดประกอบการทดสอบส่วนประกอบพื้นฐานทั้งหมด 
npm run test

สิ่งนี้เรียกใช้การทดสอบผ้าสำลีและหน่วย ดูไฟล์ package.json สำหรับการทดสอบทั้งหมดที่มีอยู่

การบริจาค

เราไม่ยอมรับการมีส่วนร่วมในเวลานี้ หากคุณมีคำถามใด ๆ เกี่ยวกับสูตรส่วนประกอบพื้นฐานโปรดใช้ช่องทางต่อไปนี้

  • ชุมชน Trailblazer - การพัฒนาส่วนประกอบสายฟ้า
  • ฟอรัมนักพัฒนา Salesforce
  • Salesforce Stackexchange

คำถามที่พบบ่อย

  • ฉันจะดูตัวอย่างเพิ่มเติมเกี่ยวกับวิธีการใช้ส่วนประกอบเว็บสายฟ้าได้ที่ไหน

    • สำหรับตัวอย่างเกี่ยวกับการใช้งานส่วนประกอบเว็บ Lightning บนแพลตฟอร์ม Salesforce เยี่ยมชม LWC-Recipes
    • สำหรับแอพตัวอย่างเพิ่มเติมโดยใช้องค์ประกอบเว็บสายฟ้าโปรดไปที่ https://trailhead.salesforce.com/sample-gallery
    • หากต้องการสัมผัสกับองค์ประกอบของเว็บสายฟ้าบนแพลตฟอร์มใด ๆ โปรดไปที่ https://lwc.dev

  • ฉันจะสร้างองค์ประกอบเว็บสายฟ้าได้อย่างไร

    ดูการเริ่มต้นอย่างรวดเร็ว: Lightning Web Components โครงการ Trailhead คู่มือนักพัฒนา Components Web Lightning ยังเป็นทรัพยากรที่ยอดเยี่ยม

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด