base components recipes
1.0.0
عرض أمثلة للمكونات الأساسية في لدغات صغيرة. توضح كل وصفة مثالًا عمليًا للمكونات الأساسية لإنشاء الصفحات والتطبيقات بسرعة. استخدم وتخصيص المكونات الأساسية والوصفات في تطبيقاتك.
تفتح وصفات المكونات الأساسية رمز المصدر للمكونات الأساسية الموضحة في مكتبة المكون. قمنا بنقل المكونات الأساسية إلى مساحة الاسم c حتى تتمكن من استخدام المكونات في مشاريعك. استكشف الأعمال الداخلية للمكونات واستخدم الكود المصدر لإنشاء مكونات جديدة بمتطلباتك الخاصة. الاحتمالات لا حصر لها مع المصدر في يديك!
تتوفر مجموعة فرعية فقط من المكونات في مكتبة المكونات. لمزيد من المعلومات ، راجع قسم الوثائق.
تقوم المكونات الأساسية بتنفيذ نظام تصميم Salesforce Lightning (SLDs) ويتم تطويره باستخدام مكونات الويب Lightning. يمكن أن يحتوي مكون مساحة الاسم c على مكونات في مساحة اسم lightning .
فكر في استخدام وصفات المكونات الأساسية فقط إذا كانت المكونات الأساسية في مساحة الاسم lightning لا تعمل لمتطلباتك. على سبيل المثال ، استخدم وصفات المكونات الأساسية إذا كنت بحاجة إلى تخصيص أنماط المكونات الأساسية بما يتجاوز آليات التصميم المدعومة. للحصول على قائمة بالمكونات الأساسية المتاحة في مساحة الاسم lightning ، راجع مكتبة المكون.
لتخصيص الأنماط على مكونات مساحة اسم lightning ، نوصي باستخدام Hooks SLDS. لمزيد من المعلومات ، راجع مكونات النمط مع SLDs.
نوصي باستخدام Org Scratch للعمل مع وصفات المكونات الأساسية على منصة Salesforce.
قم بإعداد بيئتك باتباع الخطوات في دليل Dev Components Web Web ، والذي يتضمن:
قم بالتوثيق مع ORG DEV HUB وتزويده بالاسم المستعار ، كما هو موضح بواسطة 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 الخاص بك باعتباره محور DEV. انظر Enable Dev Hub في Org الخاص بك. بدلاً من ذلك ، قم بالتسجيل للحصول على محور DEV على https://developer.salesforce.com/promotions/orgs/dx-signup.
sfdx force:source:pushsfdx force:org:open قم بإنشاء مكون الويب HelloWorld Lightning يستخدم مكونًا أساسيًا ، c-button . سنستخدم رمز 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. لمزيد من المعلومات ، راجع المشروع السريع للبداية: Lightning Web Components.
المكونات الأساسية في مساحة الاسم c مخصصة للاستخدام على منصة Salesforce. ومع ذلك ، فإننا ندرك الرغبة في استخدامها في سيناريوهات غير المبيعات. حاليًا ، ستعمل العديد من المكونات ، لكن البعض الآخر لن يعمل ، بسبب التبعيات على منصة Salesforce. هدفنا هو توفير مكونات أساسية لحالات استخدام غير المبيعات ، وقمنا بإنشاء كتاب LWC Storybook POC لإظهار الشكل الذي قد يبدو عليه هذا في المستقبل. يرجى النقر فوق زر المراقبة على الريبو للحصول على التحديثات ونحن نتحرك إلى الأمام.
المكونات الأساسية في خريطة مساحة الاسم c للمكونات في مساحة الاسم lightning . قمنا بنقل المكونات الأساسية إلى مساحة الاسم c حتى تتمكن من استخدام المكونات في مشاريعك. ابحث عن مكونات الأساس في مساحة الاسم c في المقاطع الأساسية/القوة/التطبيق الرئيسي/الافتراضي/LWC/.
رابط المكونات أدناه إلى الوثائق للمكونات في مساحة الاسم lightning ، ولكن الاستخدام متشابه ما لم يذكر خلاف ذلك.
| عنصر | وصف | تعليق |
|---|---|---|
| C-accordion | مجموعة من الأقسام المكدسة رأسياً مع مناطق محتوى متعددة. | يحتوي هذا المكون على فتحات ولا يتم دعمها كمكون هالة. |
| C-Accordion قسم | قسم واحد من المحتوى. استخدم هذا المكون داخل 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-Card | حاوية منمقة حول مجموعة من المعلومات | يحتوي هذا المكون على فتحات ولا يتم دعمها كمكون هالة. |
| C-Carousel | مجموعة من الصور والتسميات التوضيحية التي يتم عرضها واحدة في وقت واحد. استخدم هذا المكون مع صورة C-carousel | يحتوي هذا المكون على فتحات ولا يتم دعمها كمكون هالة. يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| C-checkbox-group | مجموعة من مربعات الاختيار التي تتيح اختيار خيارات مفردة أو متعددة | |
| C-Combobox | حقل إدخال للقراءة فقط مع قائمة منسدلة للاختيار الفردي | يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| C-Dentbox | زوج من القوائم التي تتيح تحديد خيارات متعددة وإعادة ترتيبها | يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| C-Dynamic-Icon | مجموعة من الرموز المتحركة | |
| C-Formated-Date-Time | زوج من التاريخ والوقت يتم عرضهما بناءً على لغة المستخدم | |
| C-Formatted Location | زوج من خطوط الطول والعرض لموقع ما | |
| C-Formatted-Name | اسم يتم عرضه على أساس لغة المستخدم ، والذي يحدد تنسيق وترتيب المكونات (لاحقة ، التحية ، إلخ) | |
| C-formated-number | العشرية أو العملة أو النسبة المئوية التي يتم عرضها على لغة المستخدم | |
| هاتف c-formatted | رقم هاتف يفتح تطبيق استدعاء VoIP الافتراضي عند النقر عليه | |
| C-formatted-text | مجموعة من النصوص مع خيار لعرض عناوين URL وعناوين البريد الإلكتروني كروابط | |
| C-Formatted-Time | قيمة زمنية يتم عرضها بناءً على لغة المستخدم | |
| C-Formatted-url | عنوان URL الذي يتم عرضه كرابط | |
| C-ICON | عنصر مرئي يوفر السياق ويعزز قابلية الاستخدام | للاستخدام على منصة Salesforce فقط. |
| الموقع c | زوج من حقول الطول والعرض | يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| c-layout | نظام شبكة متجاوبة | يحتوي هذا المكون على فتحات ولا يتم دعمها كمكون هالة. |
| C-layout-item | حاوية في نظام الشبكة | يحتوي هذا المكون على فتحات ولا يتم دعمها كمكون هالة. |
| C-Menu-Intem | عنصر قائمة في قائمة. استخدم هذا المكون داخل c-button-menu | |
| ميدان C-output | عرض للقراءة فقط لتسمية ، نص مساعدة ، وقيمة لحقل على كائن Salesforce. استخدم هذا المكون داخل c-record-view-form . | للاستخدام على منصة Salesforce فقط. |
| C-Pill | تسمية يمكن أن تحتوي على رابط ويمكن إزالتها من العرض | يحتوي هذا المكون على فتحات ولا يتم دعمها كمكون هالة. يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| c-pill-container | قائمة من الحبوب المجمعة في حاوية | يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| C-Radio-Group | مجموعة من أزرار الراديو التي يمكن أن تحتوي على خيار واحد محدد | يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| C-Record-Edit-Form | نموذج لإنشاء أو تحرير سجل بحقل واحد أو أكثر | للاستخدام على منصة Salesforce فقط. استخدم c-record-edit-form مع lightning-input-field . استخدم c-messages في النموذج لعرض رسائل الخطأ من جانب الخادم. يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| C-Record-Form | نموذج لإنشاء أو عرض أو تحرير سجل مع التبديل التلقائي بين أوضاع التحرير والعرض | للاستخدام على منصة Salesforce فقط. يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| C-Record-View-Form | نموذج لعرض بيانات السجل. استخدم c-output-field داخل c-record-view-form . | للاستخدام على منصة Salesforce فقط. يحتوي هذا المكون على فتحات ولا يتم دعمها كمكون هالة. يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| C-Relative-Date-Time | مجموعة من النص تصور مدى ارتباط الوقت المحدد بالوقت الحالي ، مثل "قبل بضع ثوان" أو "في 5 سنوات" | |
| C-Slider | شريط تمرير نطاق إدخال يتيح اختيار قيمة بين رقمين محددين | |
| C-Spinner | دوار متحرك | |
| C-تاب | علامة تبويب واحدة داخل مكون c-tabset . | |
| C-Tabset | قائمة علامات التبويب. استخدم هذا المكون مع c-tab . | يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| C-Textarea | حقل Textarea لإدخال النص متعدد الخطوط | يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| C-Tile | مجموعة من المعلومات ذات الصلة المرتبطة بسجل | يحتوي هذا المكون على فتحات ولا يتم دعمها كمكون هالة. يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| ج شجرة | تصور للتسلسل الهرمي الهيكلي مع العناصر المتداخلة التي يمكن أن تنهار أو توسيعها. استخدم هذا المكون مع c-tree-item . | يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| C-stertical navigation | قائمة عمودية من الروابط التي يمكن تجميعها في أقسام باستخدام c-vertical-navigation-section | يحتوي هذا المكون على فتحات ولا يتم دعمها كمكون هالة. يشير هذا المكون إلى ملصقات على منصة Salesforce. |
| C-stertical navigation-item | رابط نص فقط داخل c-vertical-navigation-section أو c-vertical-navigation-overflow | |
| C-stertical navigation-item-badge | رابط وشارة داخل c-vertical-navigation-section أو c-vertical-navigation-overflow | |
| C-stertical navigation-item-icon | رابط وأيقونة داخل c-vertical-navigation-section أو c-vertical-navigation-overflow |
يمكنك إنشاء ما يصل إلى 5000 علامة مخصصة لمؤسستك ، ويمكن أن يصل طولها إلى 1000 حرف. قم بإنشاء ملصقات مخصصة يمكنك استخدامها في مكونات الويب 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 >لتخصيص الملصقات الخاصة بك ، من الإعداد ، اكتب الملصقات المخصصة في مربع الإنتاج السريع ، ثم حدد ملصقات مخصصة . يتم شحن ملصقاتنا باللغة الإنجليزية ويمكن ترجمتها إلى لغات أخرى. لمزيد من المعلومات ، راجع قسم Translate Labels أدناه والعلامات المخصصة في Salesforce Help.
استيراد الملصقات من @salesforce/label Scoped Module. الرجوع إلى اسم التسمية الخاص بك باستخدام مساحة الاسم 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.
<!-- myComponent.html -->
< template >
< c-card title = {label.cardTitleLabel} >
{label.loadingLabel}
</ c-card >
</ template > تمكين طاولة عمل الترجمة لدعم الترجمات في ORG الخاص بك. راجع تمكين وتعطيل طاولة عمل الترجمة في مساعدة 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 Scratch.
sfdx force:source:pushنستخدم إطار اختبار JAST JavaScript لتأليف واختبارات المكونات. إذا قمت بتعديل أي وصفات مكون أساسية أو إضافة مكوناتك الخاصة ، فقم بإجراء اختبارات للتحقق من التغييرات الخاصة بك.
بالنسبة للمكونات الخاصة بك ، أضف اختبارات إلى مجلد فرعي __tests__ لمجلد componentName الخاص بك وتسمية componentName.spec.js .
لتوضيح كيفية اختبار المكونات ، سنضيف اختبارًا إلى مكون HelloWorld الذي تم إنشاؤه مسبقًا.
قم بإنشاء مجلد فرعي __tests__ في مجلد helloWorld .
قم بإنشاء ملف اسمه helloWorld.spec.js في __tests__ .
أدخل هذا الرمز وحفظ الملف.
//__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 . npm run test helloWorldnpm run test هذا يدير اختبارات الوبر والوحدة. راجع ملف package.json لجميع الاختبارات المتاحة.
نحن لا نقبل المساهمات في هذا الوقت. إذا كان لديك أي أسئلة حول وصفات المكونات الأساسية ، فيرجى استخدام القنوات التالية.
أين يمكنني رؤية المزيد من الأمثلة حول كيفية استخدام مكونات ويب Lightning؟
كيف أقوم بإنشاء مكون ويب Lightning؟
شاهد البداية السريعة: مشروع Trailhead لمكونات الويب Lightning. يعد دليل مطور مكونات Web Web Components أيضًا موردًا رائعًا.
