base components recipes
1.0.0
작은 물기로 기본 구성 요소의 예를 봅니다. 각 레시피는 기본 구성 요소의 작업 예를 보여주기 위해 페이지와 앱을 빠르게 작성합니다. 앱의 기본 구성 요소와 레시피를 사용하고 사용자 정의하십시오.
기본 구성 요소 레시피는 구성 요소 라이브러리에 표시된 기본 구성 요소의 소스 코드를 열어줍니다. 기본 구성 요소를 c 네임 스페이스로 변환하여 프로젝트에서 구성 요소를 사용할 수 있도록했습니다. 구성 요소의 내부 작업을 탐색하고 소스 코드를 사용하여 자신의 요구 사항이있는 새로운 구성 요소를 구축하십시오. 가능성은 당신의 손에 소스로 끝이 없습니다!
구성 요소 라이브러리의 구성 요소의 하위 집합 만 사용할 수 있습니다. 자세한 내용은 문서 섹션을 참조하십시오.
기본 구성 요소는 SLDS (Salesforce Lightning Design System)를 구현하고 번개 웹 구성 요소를 사용하여 개발됩니다. c 네임 스페이스 구성 요소는 lightning 네임 스페이스에 구성 요소를 포함 할 수 있습니다.
lightning 네임 스페이스의 기본 구성 요소가 요구 사항에 맞지 않는 경우에만 기본 구성 요소 레시피를 사용하는 것을 고려하십시오. 예를 들어, 지원되는 스타일 메커니즘 이외의 기본 구성 요소의 스타일을 사용자 정의 해야하는 경우 기본 구성 요소 레시피를 사용하십시오. lightning 네임 스페이스에서 사용 가능한 기본 구성 요소 목록은 구성 요소 라이브러리를 참조하십시오.
lightning 네임 스페이스 구성 요소의 스타일을 사용자 정의하려면 SLDS 스타일링 후크를 사용하는 것이 좋습니다. 자세한 내용은 SLDS가있는 스타일 구성 요소를 참조하십시오.
Scratch Org를 사용하여 Salesforce 플랫폼의 기본 구성 요소 레시피와 함께 작동하는 것이 좋습니다.
Lightning Web Components Dev Guide의 단계를 수행하여 다음을 포함하여 환경을 설정하십시오.
Dev Hub Org를 인증하고 mybaseorg 에서 다음 명령에 표시된대로 별칭을 제공하십시오.
sfdx force:auth:web:login -d -a mybaseorggit clone [email protected]:salesforce/base-components-recipes.git
cd base-components-recipesbase-recipes 로 표시된대로 별명을 제공하십시오. sfdx force:org:create -s -f config/project-scratch-def.json -a base-recipes"[scratchorginfo] 객체에 액세스 할 수없는"오류가 발생하면 org를 개발 허브 org로 활성화했는지 확인하십시오. 조직에서 Dev Hub 활성화를 참조하십시오. 또는 https://developer.salesforce.com/promotions/orgs/dx-signup에서 개발 허브 조직에 가입하십시오.
sfdx force:source:pushsfdx force:org:open 기본 구성 요소 인 c-button 사용하는 Helloworld Lightning 웹 구성 요소를 만듭니다. 이 예에서는 Visual Studio 코드를 사용하겠습니다.
base-components-recipes 를 엽니 다.force-app/main/default/lwc 디렉토리를 허용합니다.helloWorld 번들은 force-app/main/default/lwc 로 생성되고 helloWorld.js JavaScript 파일은 편집기에서 열립니다.helloWorld.js 에서는 내용을 다음 코드로 바꾸십시오. 파일을 저장하십시오. //helloWorld.js
import { LightningElement , api } from 'lwc' ;
export default class HelloWorld extends LightningElement {
@ api greeting = 'Hello World' ;
}helloWorld.html 을 열고 다음 코드로 컨텐츠를 바꾸십시오. 파일을 저장하십시오. <!--helloWorld.html-->
< template >
< c-button label = {greeting} title =" greeting " > </ c-button >
</ template >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 >sfdx force:source:pushHelloWorld 구성 요소가 이제 작업 준비가되었습니다. Lightning App Builder를 통해이 구성 요소를 앱과 페이지에 추가 할 수 있습니다. 자세한 내용은 Quick Start : Lightning Web Components Trailhead 프로젝트를 참조하십시오.
c 네임 스페이스의 기본 구성 요소는 Salesforce 플랫폼에서 사용하기위한 것입니다. 그러나 우리는 비 송금 시나리오에서 그것들을 사용하려는 욕구를 알고 있습니다. 현재 많은 구성 요소가 작동하지만 Salesforce 플랫폼의 종속성으로 인해 다른 구성 요소는 작동하지 않습니다. 우리의 목표는 비 송금 사용 사례에 대한 기본 구성 요소를 제공하는 것이며, 우리는 LWC Storybook POC를 만들어 앞으로 이것이 어떻게 보일지 보여줍니다. 앞으로 나아갈 때 업데이트를 보려면 Repo의 시계 버튼을 클릭하십시오.
c 네임 스페이스의 기본 구성 요소는 lightning 네임 스페이스의 구성 요소에 대한 맵입니다. 기본 구성 요소를 c 네임 스페이스로 변환하여 프로젝트에서 구성 요소를 사용할 수 있도록했습니다. c 네임 스페이스의 기본 구성 요소를 기본 구성 요소/Force-App/Main/Default/LWC/에서 찾으십시오.
아래 구성 요소는 lightning 네임 스페이스의 구성 요소에 대한 문서화에 연결되지만 달리 명시되지 않는 한 사용법은 유사합니다.
| 요소 | 설명 | 논평 |
|---|---|---|
| C- 아코드온 | 여러 컨텐츠 영역이있는 수직 스택 섹션 모음. | 이 구성 요소에는 슬롯이 포함되어 있으며 오라 구성 요소로 지원되지 않습니다. |
| C- 아코 코디온 섹션 | 내용의 단일 섹션. 이 구성 요소는 c-accordion 내에서 사용하십시오. | 이 구성 요소에는 슬롯이 포함되어 있으며 오라 구성 요소로 지원되지 않습니다. |
| C- 아바타 | 계정 또는 사용자와 같은 개체의 시각적 표현 | |
| C-Badge | 읽지 않은 알림 수와 같은 소량의 정보를 보유하는 레이블 | |
| C 버튼 | 작업을 호출하는 버튼 요소 | |
| C- 버튼 그룹 | 비슷한 동작을 호출하는 버튼 그룹 | |
| C- 버튼 아이콘 | 동작을 호출하는 아이콘 전용 버튼 요소 | tooltip 속성은 지원되지 않습니다. |
| C-Button-Icon-Stateful | 상태를 유지하는 아이콘 전용 버튼 | |
| C-Button-Menu | 동작 또는 기능 목록이있는 드롭 다운 메뉴. 이 구성 요소를 c-menu-divider 및 c-menu-subheader 와 함께 사용하여 메뉴 분배기 및 하위 헤드를 만듭니다. | tooltip 속성은 지원되지 않습니다. menu-alignment 속성의 경우 auto 정렬이 지원되지 않습니다. 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C-Button-Stateful | 상태를 전환하는 버튼 | |
| C 카드 | 정보 그룹 주위에 양식화 된 용기 | 이 구성 요소에는 슬롯이 포함되어 있으며 오라 구성 요소로 지원되지 않습니다. |
| C- 카우셀 | 한 번에 하나씩 표시되는 이미지 및 캡션 모음. 이 구성 요소를 C- 카우셀 이미지와 함께 사용하십시오 | 이 구성 요소에는 슬롯이 포함되어 있으며 오라 구성 요소로 지원되지 않습니다. 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 체크 박스 그룹 | 단일 또는 여러 옵션을 선택할 수있는 확인란 그룹 | |
| C- 콤보 박스 | 단일 선택을위한 드롭 다운 목록이있는 읽기 전용 입력 필드 | 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 이중 목록 상자 | 여러 옵션을 선택하고 재주문 할 수있는 한 쌍의 목록 | 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 동기-ICON | 애니메이션 아이콘 세트 | |
| C- 형식 날짜 시간 | 사용자 로케일을 기반으로 표시되는 한 쌍의 날짜 및 시간 | |
| C- 형식의 위치 | 위치를위한 한 쌍의 위도와 경도 | |
| C- 형식의 이름 | 구성 요소의 형식과 순서를 결정하는 사용자 로케일을 기반으로 표시되는 이름 (접미사, 인사말 등) | |
| C- 형식 수 | 사용자 로케일에 기반이 표시된 소수점, 통화 또는 백분율 | |
| C- 형식의 전화 | 클릭하면 기본 VoIP 통화 앱을 열는 전화 번호 | |
| C- 형식 텍스트 | URL 및 이메일 주소를 링크로 표시하는 옵션이있는 텍스트 그룹 | |
| C- 형성 시간 | 사용자 로케일을 기반으로 표시되는 시간 값 | |
| C- 형식의 URL | 링크로 표시되는 URL | |
| C-ICON | 컨텍스트를 제공하고 유용성을 향상시키는 시각적 요소 | Salesforce 플랫폼에서만 사용합니다. |
| C-input-location | 위도 및 경도장 한 쌍 | 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 층 | 반응 형 그리드 시스템 | 이 구성 요소에는 슬롯이 포함되어 있으며 오라 구성 요소로 지원되지 않습니다. |
| C- 층 항목 | 그리드 시스템의 컨테이너 | 이 구성 요소에는 슬롯이 포함되어 있으며 오라 구성 요소로 지원되지 않습니다. |
| C- 메뉴-항목 | 메뉴의 목록 항목. 이 구성 요소는 c-button-menu 내에서 사용하십시오 | |
| C- 출력 필드 | 레이블의 읽기 전용 라벨, 도움말 텍스트 및 Salesforce 객체의 필드 값. c-record-view-form 내 에서이 구성 요소를 사용하십시오. | Salesforce 플랫폼에서만 사용합니다. |
| C- 필 | 링크를 포함 할 수 있고 View에서 제거 할 수있는 레이블 | 이 구성 요소에는 슬롯이 포함되어 있으며 오라 구성 요소로 지원되지 않습니다. 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 펜트 컨테이너 | 컨테이너로 그룹화 된 알약 목록 | 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C-Radio 그룹 | 단일 옵션을 선택할 수있는 라디오 버튼 그룹 | 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 레코드 편집 형식 | 하나 이상의 필드로 레코드를 작성하거나 편집하기위한 양식 | Salesforce 플랫폼에서만 사용합니다. lightning-input-field 와 함께 c-record-edit-form 사용하십시오. 양식의 c-messages 사용하여 서버 측 오류 메시지를 표시하십시오. 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 레코드 형식 | 편집 및보기 모드 사이의 자동 전환으로 레코드 생성, 표시 또는 편집 양식 | Salesforce 플랫폼에서만 사용합니다. 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 레코드-뷰 형식 | 레코드 데이터를 표시하기위한 양식. c-record-view-form 내에서 c-output-field 사용하십시오. | Salesforce 플랫폼에서만 사용합니다. 이 구성 요소에는 슬롯이 포함되어 있으며 오라 구성 요소로 지원되지 않습니다. 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 관계 날짜 시간 | 지정된 시간이 "몇 초 전"또는 "5 년 만에"와 같은 현재 시간과 관련된 방법을 묘사 한 텍스트 그룹 | |
| C- 슬라이더 | 지정된 두 숫자 사이에서 값을 선택할 수있는 입력 범위 슬라이더 | |
| C 스피너 | 애니메이션 스피너 | |
| C-TAB | c-tabset 구성 요소 내의 단일 탭. | |
| c-tabset | 탭 목록. 이 구성 요소를 c-tab 와 함께 사용하십시오. | 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 텍사스 테레아 | 멀티 라인 텍스트 입력을위한 TextArea 필드 | 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 타일 | 레코드와 관련된 관련 정보 그룹 | 이 구성 요소에는 슬롯이 포함되어 있으며 오라 구성 요소로 지원되지 않습니다. 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 트리 | 붕괴되거나 확장 될 수있는 중첩 된 항목으로 구조적 계층 구조의 시각화. 이 구성 요소를 c-tree-item 과 함께 사용하십시오. | 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 수구-검색 | c-vertical-navigation-section 사용하여 섹션으로 그룹화 할 수있는 링크의 수직 목록 | 이 구성 요소에는 슬롯이 포함되어 있으며 오라 구성 요소로 지원되지 않습니다. 이 구성 요소는 Salesforce 플랫폼에서 레이블을 참조합니다. |
| C- 지팡이 정복 항목 | c-vertical-navigation-section 또는 c-vertical-navigation-overflow 내의 텍스트 전용 링크 | |
| C- 지팡이 정복 항목-바드 | c-vertical-navigation-section 또는 c-vertical-navigation-overflow 내의 링크 및 배지 | |
| c- 수직-정복-항목 -ICON | c-vertical-navigation-section 또는 c-vertical-navigation-overflow 내의 링크 및 아이콘 |
조직을 위해 최대 5,000 개의 사용자 정의 레이블을 만들 수 있으며 길이가 최대 1,000자가 될 수 있습니다. Lightning 웹 구성 요소에서 사용할 수있는 사용자 지정 레이블을 만듭니다.
사용자 정의 레이블 메타 데이터를 업데이트하려면 force-app/main/default/labels 디렉토리로 이동하십시오. 라벨은 lightning.labels-meta.xml 파일에서 사용할 수 있습니다. 구문 및 CustomLabels 정의의 예는 Metadata API DEV 안내서를 참조하십시오.
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 scoped 모듈에서 레이블을 가져옵니다. 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 > 번역 워크 벤치를 활성화하여 조직에서 번역을 지원하십시오. 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 업데이트 한 후 파일을 스크래치 조직으로 푸시하십시오.
sfdx force:source:push우리는 Jest JavaScript 테스트 프레임 워크를 사용하여 구성 요소 테스트를 작성하고 실행합니다. 기본 구성 요소 레시피를 수정하거나 고유 한 구성 요소를 추가하는 경우 테스트를 실행하여 변경 사항을 확인하십시오.
자신의 구성 요소의 경우 componentName 폴더의 __tests__ 서브 폴더에 테스트를 추가하고 Test componentName.spec.js 이름을 지정하십시오.
구성 요소를 테스트하는 방법을 설명하기 위해 이전에 만든 Helloworld 구성 요소에 테스트를 추가합니다.
helloWorld 폴더에서 __tests__ subfolder를 만듭니다.
__tests__ 에서 helloWorld.spec.js 라는 파일을 만듭니다.
이 코드를 삽입하고 파일을 저장하십시오.
//__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' ) ;
} ) ;
} ) ;
} ) ;base-components-recipe 폴더에서 Helloworld 테스트 스위트를 실행하십시오. npm run test helloWorldnpm run test 보풀 및 단위 테스트를 실행합니다. 사용 가능한 모든 테스트는 package.json 파일을 참조하십시오.
우리는 현재 기부금을 받아들이지 않습니다. 기본 구성 요소 레시피에 대해 궁금한 점이 있으면 다음 채널을 사용하십시오.
라이트닝 웹 구성 요소를 사용하는 방법에 대한 더 많은 예를 어디에서 볼 수 있습니까?
번개 웹 구성 요소를 어떻게 만들려면?
빠른 시작 : 번개 웹 구성 요소 트레일 헤드 프로젝트를 참조하십시오. Lightning Web Components 개발자 가이드도 훌륭한 리소스입니다.
