base components recipes
1.0.0
查看小叮咬基本組件的示例。每個食譜都展示了基本組件的工作示例，以快速構建頁面和應用程序。使用並自定義應用程序中的基本組件和食譜。
基本組件食譜打開了組件庫中顯示的基本組件的源代碼。我們將基本組件轉移到c名稱空間中，以便您可以使用項目中的組件。探索組件的內部工作原理，並使用源代碼來構建具有您自己要求的新組件。您手中的來源無盡的可能性！
組件庫中只有一個子集可用。有關更多信息，請參見“文檔”部分。
基本組件實現Salesforce Lightning Design System（SLDS），並使用Lightning Web組件開發。 c名稱空間組件可以在lightning名稱空間中包含組件。
僅當lightning名稱空間中的基本組件不適合您的要求時，請考慮使用基本組件食譜。例如，如果您需要自定義支持樣式機制的基本組件的樣式，請使用基本組件食譜。有關lightning名稱空間中可用的基本組件的列表，請參見組件庫。
為了自定義lightning名稱空間組件上的樣式，我們建議使用SLDS樣式鉤。有關更多信息，請參閱帶有SLDS的樣式組件。
我們建議使用Scratch org在Salesforce平台上使用基本組件食譜。
通過遵循Lightning Web組件Dev指南中的步驟來設置環境，其中包括：
使用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]對象”，請確保已啟用了一個組織作為開發室組織。請參閱您的組織中的啟用Dev Hub。另外，請在https://developer.salesforce.com/promotions/orgs/orgs/dx-signup上註冊Dev Hub org。
sfdx force:source:pushsfdx force:org:open創建一個使用基本組件c-button Helloworld Lightning Web組件。在此示例中，我們將使用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:push您的Helloworld組件現在可以採取行動。您可以通過Lightning App Builder將此組件添加到應用程序和頁面中。有關更多信息，請參閱快速啟動：Lightning Web組件Trailhead項目。
c名稱空間中的基本組件旨在在Salesforce平台上使用。但是，我們意識到在非銷售場景中使用它們的願望。目前，由於Salesforce平台的依賴關係，許多組件將起作用，而其他組件則不會。我們的目標是為非Salesforce用例提供基本組件，並且我們創建了LWC Storybook POC，以展示將來的樣子。請在我們向前邁進時單擊存儲庫的手錶按鈕以獲取更新。
c命名空間中的基本組件到lightning名稱空間中的組件。我們將基本組件轉移到c名稱空間中，以便您可以使用項目中的組件。在基本組件重新計算/force-app/main/main/default/lwc/中查找c命名空間中的基本組件。
下面的組件鏈接到lightning名稱空間中組件的文檔的鏈接，但是除非另有說明，否則用法相似。
| 成分 | 描述 | 評論 |
|---|---|---|
| C-Accordion | 垂直堆疊的部分，具有多個內容區域。 | 該組件包含插槽，並且不支持作為AURA組件。 |
| C-Accordion部分 | 一部分內容。在c-accordion中使用此組件。 | 該組件包含插槽，並且不支持作為AURA組件。 |
| C-Avatar | 對象的視覺表示，例如帳戶或用戶 | |
| C-Badge | 擁有少量信息的標籤，例如未讀通知的數量 | |
| C鍵 | 調用動作的按鈕元素 | |
| C鍵頓組 | 一組調用類似動作的按鈕 | |
| c鍵ton-icon | 調用動作的僅圖標按鈕元素 | 不支持tooltip屬性。 |
| C-button-icon狀態 | 保留狀態的僅圖標按鈕 | |
| c-button-menu | 一個下拉菜單，其中包含操作或功能列表。將此組件與c-menu-divider和c-menu-subheader一起創建菜單分隔線和子標題。 | 不支持tooltip屬性。對於menu-alignment屬性，不支持auto對齊。此組件在Salesforce平台上引用標籤。 |
| C鍵狀態 | 一個在狀態之間切換的按鈕 | |
| C卡 | 一組信息周圍的風格化容器 | 該組件包含插槽，並且不支持作為AURA組件。 |
| C-Carousel | 一次顯示的圖像和字幕集。與C-Carousel-圖像一起使用此組件 | 該組件包含插槽，並且不支持作為AURA組件。此組件在Salesforce平台上引用標籤。 |
| C-Checkbox組 | 一組可以選擇單個或多個選項的複選框 | |
| C-Combobox | 一個只讀輸入字段，其中包含單個選擇的下拉列表 | 此組件在Salesforce平台上引用標籤。 |
| c dual-listbox | 一對列表，可以選擇和重新排序多個選項 | 此組件在Salesforce平台上引用標籤。 |
| c-dynamic-icon | 一組動畫圖標 | |
| c-formatted-tate時間 | 基於用戶語言環境顯示的日期和時間 | |
| C形式位置 | 位置的一對緯度和經度 | |
| c-formatted-name | 根據用戶語言環境顯示的名稱，該名稱確定了成分的格式和順序（後綴，稱呼等） | |
| c-formatted-number | 用戶語言環境中顯示基礎的小數，貨幣或百分比 | |
| C-Formatted-Phone | 單擊時打開默認VoIP調用應用程序的電話號碼 | |
| C形式文本 | 一組文本，具有顯示URL和電子郵件地址作為鏈接的選項 | |
| c-formatted時間 | 根據用戶語言環境顯示的時間值 | |
| c-formatted-url | 顯示為鏈接的URL | |
| C-icon | 提供上下文並增強可用性的視覺元素 | 僅在Salesforce平台上使用。 |
| C輸入位置 | 一對緯度和經度場 | 此組件在Salesforce平台上引用標籤。 |
| C-layout | 響應式網格系統 | 該組件包含插槽，並且不支持作為AURA組件。 |
| C-layout-item | 網格系統中的容器 | 該組件包含插槽，並且不支持作為AURA組件。 |
| c-menu-item | 菜單中的列表項目。在c-button-menu中使用此組件 | |
| c-output-field | 僅讀取標籤，幫助文本和價值在Salesforce對像上的字段。在c-record-view-form中使用此組件。 | 僅在Salesforce平台上使用。 |
| C-PILL | 一個可以包含鏈接並可以從視圖中刪除的標籤 | 該組件包含插槽，並且不支持作為AURA組件。此組件在Salesforce平台上引用標籤。 |
| C-Pill-Actainer | 在容器中分組的藥丸清單 | 此組件在Salesforce平台上引用標籤。 |
| C-Radio組 | 一組可以選擇一個選項的廣播按鈕 | 此組件在Salesforce平台上引用標籤。 |
| c record-ediT形式 | 一個或多個字段創建或編輯記錄的表格 | 僅在Salesforce平台上使用。使用c-record-edit-form與lightning-input-field 。使用表格中的c-messages顯示服務器端錯誤消息。此組件在Salesforce平台上引用標籤。 |
| C錄製形式 | 用於創建，顯示或編輯記錄的表格，並在編輯模式之間自動切換 | 僅在Salesforce平台上使用。此組件在Salesforce平台上引用標籤。 |
| c record-view形式 | 顯示記錄數據的表格。在c-record-view-form中使用c-output-field 。 | 僅在Salesforce平台上使用。該組件包含插槽，並且不支持作為AURA組件。此組件在Salesforce平台上引用標籤。 |
| C相關日期 | 一組文字描述了指定時間與當前時間的關係，例如“幾秒鐘前”或“ 5年內” | |
| c-Slider | 一個輸入範圍滑塊，可以在兩個指定數字之間選擇一個值 | |
| C-Spinner | 動畫旋轉器 | |
| c-tab | c-tabset組件中的一個選項卡。 | |
| c-tabset | 標籤列表。將此組件與c-tab一起使用。 | 此組件在Salesforce平台上引用標籤。 |
| C-Textarea | 多行文本輸入的TextaRea字段 | 此組件在Salesforce平台上引用標籤。 |
| c網 | 一組與記錄相關的相關信息 | 該組件包含插槽，並且不支持作為AURA組件。此組件在Salesforce平台上引用標籤。 |
| C-Tree | 具有嵌套項目的結構層次結構的可視化，可以折疊或擴展。將此組件與c-tree-item一起使用。 | 此組件在Salesforce平台上引用標籤。 |
| C垂直游動 | 垂直鏈接列表，可以使用c-vertical-navigation-section分組為部分 | 該組件包含插槽，並且不支持作為AURA組件。此組件在Salesforce平台上引用標籤。 |
| C垂直行動項目 | 在c-vertical-navigation-section或c-vertical-navigation-overflow中的純文本鏈接 | |
| c垂直行動 - 項目badge | c-vertical-navigation-section或c-vertical-navigation-overflow的鏈接和徽章 | |
| c垂直行動至元素 | c-vertical-navigation-section或c-vertical-navigation-overflow的鏈接和圖標 |
您可以為您的組織創建多達5,000個自定義標籤，它們的長度最多可以是1,000個字符。創建可以在閃電網絡組件中使用的自定義標籤。
要更新自定義標籤元數據，請轉到force-app/main/default/labels目錄。標籤可在lightning.labels-meta.xml文件中使用。有關語法和CustomLabels定義的示例，請參見《元數據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示波器模塊導入標籤。使用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
} ;
}在Lightning Web組件中使用您的標籤。
<!-- 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後，將文件推到划痕org。
sfdx force:source:push我們使用Jest JavaScript測試框架來作者和運行組件測試。如果修改任何基本組件食譜或添加自己的組件，請運行測試以驗證您的更改。
對於您自己的組件，請將測試添加到componentName夾的__tests__子文件夾中，並將test componentName.spec.js命名。
為了說明如何測試組件，我們將向前面創建的Helloworld組件添加測試。
在helloWorld文件夾中創建一個__tests__子文件夾。
在__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組件Trailhead項目。 Lightning Web組件開發人員指南也是一個很好的資源。
