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组件开发人员指南也是一个很好的资源。
