base components recipes
1.0.0
ベースコンポーネントの例をご覧ください。各レシピは、ページとアプリを迅速に構築するためのベースコンポーネントの実用的な例を示しています。アプリのベースコンポーネントとレシピを使用してカスタマイズします。
ベースコンポーネントレシピコンポーネントライブラリに示されているベースコンポーネントのソースコードを開きます。プロジェクトでコンポーネントを使用できるように、ベースコンポーネントをcネームスペースに導入しました。コンポーネントの内側の仕組みを探索し、ソースコードを使用して、独自の要件で新しいコンポーネントを構築します。あなたの手にソースがあり、可能性は無限です！
コンポーネントライブラリのコンポーネントのサブセットのみが利用可能です。詳細については、ドキュメントセクションを参照してください。
ベースコンポーネントSalesforce Lightning Design System（SLDS）を実装し、Lightning Webコンポーネントを使用して開発されています。 A cネームスペースコンポーネントには、 lightningネームスペースにコンポーネントを含めることができます。
lightning Namespaceのベースコンポーネントが要件に合わせて機能しない場合にのみ、ベースコンポーネントレシピを使用することを検討してください。たとえば、サポートされているスタイリングメカニズムを超えて、ベースコンポーネントのスタイルをカスタマイズする必要がある場合は、ベースコンポーネントレシピを使用してください。 lightningネームスペースにある利用可能なベースコンポーネントのリストについては、コンポーネントライブラリを参照してください。
lightning Namepaceコンポーネントのスタイルをカスタマイズするには、SLDSスタイリングフックを使用することをお勧めします。詳細については、SLDSのスタイルコンポーネントを参照してください。
SALESFORCEプラットフォームのベースコンポーネントレシピを使用するために、スクラッチ組織を使用することをお勧めします。
Lightning Web Components Dev Guideの手順に従って環境をセットアップします。
次のコマンドに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組織として組織を有効にしていることを確認してください。組織でDev Hubを有効にすることを参照してください。または、https：//developer.salesforce.com/promotions/orgs/dx-signupで開発者のハブ組織にサインアップしてください。
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:pushHelloworldコンポーネントはアクションの準備が整いました。このコンポーネントをLightningアプリビルダーを介してアプリやページに追加できます。詳細については、クイックスタート：Lightning Webコンポーネントトレイルヘッドプロジェクトを参照してください。
cネームスペースのベースコンポーネントは、Salesforceプラットフォームで使用することを目的としています。ただし、非セールスフォースシナリオでそれらを使用したいという願望が認識されています。現在、多くのコンポーネントは機能しますが、Salesforceプラットフォームへの依存関係により、他のコンポーネントは機能しません。私たちの目標は、非セールスフォースユースケースに基本コンポーネントを提供することであり、LWCストーリーブックPOCを作成して、これが将来どのように見えるかを示しました。前進するときに更新をするために、リポジトリのウォッチボタンをクリックしてください。
cネームスペースマップのベースコンポーネントは、 lightning名空間のコンポーネントにマップします。プロジェクトでコンポーネントを使用できるように、ベースコンポーネントをcネームスペースに導入しました。 Base-Components-Recipes/Force-App/Main/Default/LWC/のcネームスペースのベースコンポーネントを見つけます。
以下のコンポーネントは、 lightning Namespaceのコンポーネントのドキュメントにリンクしますが、特に明記しない限り、使用法は似ています。
| 成分 | 説明 | コメント |
|---|---|---|
| c-accordion | 複数のコンテンツ領域を備えた垂直に積み重ねられたセクションのコレクション。 | このコンポーネントにはスロットが含まれており、オーラコンポーネントとしてサポートされていません。 |
| c-accordionセクション | コンテンツの単一セクション。 c-accordion内のこのコンポーネントを使用します。 | このコンポーネントにはスロットが含まれており、オーラコンポーネントとしてサポートされていません。 |
| c-avatar | アカウントやユーザーなどのオブジェクトの視覚的表現 | |
| Cバッジ | 未読通知の数など、少量の情報を保持するラベル | |
| Cボタン | アクションを呼び出すボタン要素 | |
| 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カルーゼル | 一度に1つずつ表示される画像とキャプションのコレクション。このコンポーネントをC-Carousel-Imageで使用します | このコンポーネントにはスロットが含まれており、オーラコンポーネントとしてサポートされていません。このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| C-Checkbox-Group | 単一または複数のオプションを選択できるチェックボックスのグループ | |
| c-combobox | シングル選択用のドロップダウンリストを備えた読み取り専用の入力フィールド | このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| c-dual-listbox | 複数のオプションを選択して並べ替えることを可能にするリストのペア | このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| c-dynamic-icon | アニメーションアイコンのセット | |
| c-formatted-date-time | ユーザーロケールに基づいて表示される日付と時刻のペア | |
| Cフォーマットロケーション | 場所の緯度と経度のペア | |
| c-formatted-name | 構成要素の形式と順序を決定するユーザーロケールに基づいて表示される名前（接尾辞、挨拶など） | |
| Cフォーマット番号 | ユーザーロケールに基地に表示される小数、通貨、または割合 | |
| c-formatted-phone | クリックしたときにデフォルトのVoIPコールアプリを開く電話番号 | |
| c-formatted-text | URLと電子メールアドレスをリンクとして表示するオプションを備えたテキストのグループ | |
| Cフォーマット時間 | ユーザーロケールに基づいて表示される時間値 | |
| c-formatted-url | リンクとして表示されるURL | |
| C-ICON | コンテキストを提供し、使いやすさを向上させる視覚的な要素 | Salesforceプラットフォームでのみ使用します。 |
| C入力ロケーション | 一対の緯度と経度のフィールド | このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| c-layout | レスポンシブグリッドシステム | このコンポーネントにはスロットが含まれており、オーラコンポーネントとしてサポートされていません。 |
| c-layout-item | グリッドシステム内のコンテナ | このコンポーネントにはスロットが含まれており、オーラコンポーネントとしてサポートされていません。 |
| c-menu-item | メニューのリスト項目。 c-button-menu内のこのコンポーネントを使用します | |
| c出力フィールド | Salesforceオブジェクトのフィールドのラベル、ヘルプテキスト、および価値の読み取り専用表示。 c-record-view-form内のこのコンポーネントを使用します。 | Salesforceプラットフォームでのみ使用します。 |
| Cピル | リンクを含み、ビューから削除できるラベル | このコンポーネントにはスロットが含まれており、オーラコンポーネントとしてサポートされていません。このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| c-pill-container | 容器にグループ化された錠剤のリスト | このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| C-Radio-Group | 単一のオプションを選択できるラジオボタンのグループ | このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| C-Record-Edit-Form | 1つ以上のフィールドでレコードを作成または編集するためのフォーム | Salesforceプラットフォームでのみ使用します。 lightning-input-fieldを使用したc-record-edit-formを使用します。フォームのc-messagesを使用して、サーバー側のエラーメッセージを表示します。このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| c-Record-form | 編集モードとビューモード間の自動スイッチングでレコードを作成、表示、編集するためのフォーム | Salesforceプラットフォームでのみ使用します。このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| c-Record-view-form | レコードデータを表示するためのフォーム。 c-record-view-form内のc-output-fieldを使用します。 | Salesforceプラットフォームでのみ使用します。このコンポーネントにはスロットが含まれており、オーラコンポーネントとしてサポートされていません。このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| C相関日 | 指定された時間が「数秒前」や「5年間」などの現在の時間にどのように関連するかを示すテキストのグループ | |
| c-slider | 2つの指定された数値間の値の選択を可能にする入力範囲スライダー | |
| Cスピナー | アニメーションスピナー | |
| c-tab | c-tabsetコンポーネント内の単一のタブ。 | |
| c-tabset | タブのリスト。このコンポーネントをc-tabで使用します。 | このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| Cテキストレア | マルチラインテキスト入力用のテキストアレアフィールド | このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| Cタイル | レコードに関連する関連情報のグループ | このコンポーネントにはスロットが含まれており、オーラコンポーネントとしてサポートされていません。このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| C-Tree | 崩壊または拡張できるネストされたアイテムを使用した構造階層の視覚化。このコンポーネントをc-tree-itemで使用します。 | このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| C-vertical-navigation | c-vertical-navigation-sectionを使用してセクションにグループ化できるリンクの垂直リスト | このコンポーネントにはスロットが含まれており、オーラコンポーネントとしてサポートされていません。このコンポーネントは、Salesforceプラットフォームのラベルを参照しています。 |
| c-vertical-navigation-item | c-vertical-navigation-sectionまたはc-vertical-navigation-overflow内のテキストのみのリンク | |
| C-vertical-navigation-item-badge | c-vertical-navigation-sectionまたはc-vertical-navigation-overflow内のリンクとバッジ | |
| c-vertical-navigation-item-icon | c-vertical-navigation-sectionまたはc-vertical-navigation-overflow内のリンクとアイコン |
組織用に最大5,000のカスタムラベルを作成でき、長さは最大1,000文字になります。 Lightning Webコンポーネントで使用できるカスタムラベルを作成します。
カスタムラベルメタデータを更新するには、 force-app/main/default/labelsディレクトリに移動します。ラベルはlightning.labels-meta.xmlファイルで利用できます。構文とカスタムラベル定義の例については、メタデータ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
} ;
}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を更新した後、ファイルをスクラッチ組織に押します。
sfdx force:source:pushJest 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コンポーネントの使用方法に関する例はどこにありますか？
Lightning Webコンポーネントを作成するにはどうすればよいですか？
クイックスタート：Lightning Webコンポーネントトレイルヘッドプロジェクトをご覧ください。 Lightning Web Components Developer Guideも優れたリソースです。
