base components recipes
1.0.0
Lihat contoh untuk komponen dasar dalam gigitan kecil. Setiap resep menunjukkan contoh kerja komponen dasar untuk membangun halaman dan aplikasi dengan cepat. Gunakan dan sesuaikan komponen dasar dan resep di aplikasi Anda.
Resep Komponen Dasar Membuka kode sumber untuk komponen dasar yang ditunjukkan di pustaka komponen. Kami mentranspilasi komponen dasar ke dalam namespace c sehingga Anda dapat menggunakan komponen dalam proyek Anda. Jelajahi cara kerja komponen dalam dan gunakan kode sumber untuk membangun komponen baru dengan persyaratan Anda sendiri. Kemungkinannya tidak terbatas dengan sumber di tangan Anda!
Hanya subset komponen di pustaka komponen yang tersedia. Untuk informasi lebih lanjut, lihat bagian Dokumentasi.
Komponen dasar menerapkan Salesforce Lightning Design System (SLDS) dan dikembangkan menggunakan komponen web Lightning. Komponen namespace c dapat berisi komponen dalam namespace lightning .
Pertimbangkan untuk menggunakan resep komponen dasar hanya jika komponen dasar dalam lightning namespace tidak berfungsi untuk kebutuhan Anda. Misalnya, gunakan resep komponen dasar jika Anda perlu menyesuaikan gaya komponen dasar di luar mekanisme gaya yang didukung. Untuk daftar komponen dasar yang tersedia di lightning Namespace, lihat pustaka komponen.
Untuk menyesuaikan gaya pada komponen lightning Namespace, kami sarankan menggunakan SLDS Styling Hooks. Untuk informasi lebih lanjut, lihat komponen gaya dengan SLD.
Kami merekomendasikan menggunakan org awal untuk bekerja dengan resep komponen dasar di platform Salesforce.
Mengatur lingkungan Anda dengan mengikuti langkah -langkah dalam Panduan Dev Komponen Web Lightning, yang meliputi:
Otentikasi dengan dev hub org Anda dan berikan alias, seperti yang ditunjukkan oleh mybaseorg dalam perintah berikut.
sfdx force:auth:web:login -d -a mybaseorggit clone [email protected]:salesforce/base-components-recipes.git
cd base-components-recipesbase-recipes dalam perintah berikut. sfdx force:org:create -s -f config/project-scratch-def.json -a base-recipesJika Anda mendapatkan kesalahan "Anda tidak memiliki akses ke objek [Scratchorginfo]", pastikan Anda telah mengaktifkan org Anda sebagai org hub dev. Lihat Aktifkan Dev Hub di org Anda. Sebagai alternatif, daftar untuk dev hub org di https://developer.salesforce.com/promotions/orgs/dx-stignup.
sfdx force:source:pushsfdx force:org:open Buat komponen web HelloWorld Lightning yang menggunakan komponen dasar, c-button . Kami akan menggunakan kode Visual Studio dalam contoh ini.
base-components-recipes Anda.force-app/main/default/lwc default.helloWorld dibuat di force-app/main/default/lwc dan file JavaScript helloWorld.js dibuka di editor.helloWorld.js , ganti konten dengan kode berikut. Simpan file. //helloWorld.js
import { LightningElement , api } from 'lwc' ;
export default class HelloWorld extends LightningElement {
@ api greeting = 'Hello World' ;
}helloWorld.html , dan ganti kontennya dengan kode berikut. Simpan file. <!--helloWorld.html-->
< template >
< c-button label = {greeting} title =" greeting " > </ c-button >
</ template >helloWorld.js-meta.xml , ganti konten dengan kode berikut. Simpan file. <? 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:pushKomponen HelloWorld Anda sekarang siap untuk bertindak. Anda dapat menambahkan komponen ini ke aplikasi dan halaman Anda melalui pembangun aplikasi Lightning. Untuk informasi lebih lanjut, lihat Proyek Trailhead Komponen Web Komponen Lightning.
Komponen dasar dalam namespace c dimaksudkan untuk digunakan pada platform Salesforce. Namun, kami menyadari keinginan untuk menggunakannya dalam skenario non-penjualan. Saat ini, banyak komponen akan berfungsi, tetapi yang lain tidak akan, karena ketergantungan pada platform Salesforce. Tujuan kami adalah untuk menyediakan komponen dasar untuk kasus penggunaan non-Salesforce, dan kami telah membuat buku cerita LWC POC untuk menunjukkan seperti apa ini di masa depan. Silakan klik tombol Tonton pada repo untuk pembaruan saat kami bergerak maju.
Komponen dasar dalam peta namespace c ke komponen di lightning namespace. Kami mentranspilasi komponen dasar ke dalam namespace c sehingga Anda dapat menggunakan komponen dalam proyek Anda. Temukan komponen dasar dalam namespace c di Base-Components-Recipes/Force-App/Main/Default/LWC/.
Komponen di bawah ini tautan ke dokumentasi untuk komponen di lightning Namespace, tetapi penggunaannya serupa kecuali dinyatakan lain.
| Komponen | Keterangan | Komentar |
|---|---|---|
| C-Accordion | Kumpulan bagian yang ditumpuk secara vertikal dengan beberapa area konten. | Komponen ini berisi slot dan tidak didukung sebagai komponen AURA. |
| C-Accordion-section | Satu bagian konten. Gunakan komponen ini dalam c-accordion . | Komponen ini berisi slot dan tidak didukung sebagai komponen AURA. |
| C-Avatar | Representasi visual suatu objek, seperti akun atau pengguna | |
| C-BADGE | Label yang menyimpan sejumlah kecil informasi, seperti jumlah pemberitahuan yang belum dibaca | |
| C-Button | Elemen tombol yang meminta tindakan | |
| C-Button-Group | Sekelompok tombol yang mengajukan tindakan serupa | |
| C-Button-Icon | Elemen tombol khusus ikon yang meminta tindakan | Atribut tooltip tidak didukung. |
| C-Button-Icon-Stateful | Tombol khusus ikon yang mempertahankan keadaan | |
| C-Button-menu | Menu dropdown dengan daftar tindakan atau fungsi. Gunakan komponen ini dengan c-menu-divider dan c-menu-subheader untuk membuat pembagi menu dan sub-kepala. | Atribut tooltip tidak didukung. Untuk atribut menu-alignment , penyelarasan auto tidak didukung. Komponen ini merujuk label pada platform Salesforce. |
| c-Button-stateful | Tombol yang beralih di antara negara bagian | |
| c-card | Wadah bergaya di sekitar sekelompok informasi | Komponen ini berisi slot dan tidak didukung sebagai komponen AURA. |
| c-carousel | Kumpulan gambar dan teks yang ditampilkan satu per satu. Gunakan komponen ini dengan cit-c-carousel | Komponen ini berisi slot dan tidak didukung sebagai komponen AURA. Komponen ini merujuk label pada platform Salesforce. |
| C-checkbox-group | Sekelompok kotak centang yang memungkinkan pemilihan opsi tunggal atau berganda | |
| C-Combobox | Bidang input read-only dengan daftar dropdown untuk pilihan tunggal | Komponen ini merujuk label pada platform Salesforce. |
| C-Dual-Listbox | Sepasang daftar yang memungkinkan beberapa opsi untuk dipilih dan dipesan ulang | Komponen ini merujuk label pada platform Salesforce. |
| c-dynamic-icon | Satu set ikon animasi | |
| C-Formatated-Date-Time | Sepasang tanggal dan waktu yang ditampilkan berdasarkan lokal pengguna | |
| Lokasi-C | Sepasang lintang dan bujur untuk suatu lokasi | |
| nama-fformatted | Nama yang ditampilkan berdasarkan lokal pengguna, yang menentukan format dan urutan konstituen (akhiran, salam, dll.) | |
| Number-C-Formatted | Sebuah desimal, mata uang, atau persentase yang ditampilkan basis di lokasi pengguna | |
| Telepon-C-Format | Nomor telepon yang membuka aplikasi panggilan voip default saat diklik | |
| C-Formatatted-Text | Sekelompok teks dengan opsi untuk menampilkan URL dan alamat email sebagai tautan | |
| C-Fformatted-Time | Nilai waktu yang ditampilkan berdasarkan lokal pengguna | |
| C-formatat-URL | URL yang ditampilkan sebagai tautan | |
| c-icon | Elemen visual yang menyediakan konteks dan meningkatkan kegunaan | Hanya untuk digunakan pada platform Salesforce. |
| Lokasi C-Input | Sepasang lintang dan garis bujur | Komponen ini merujuk label pada platform Salesforce. |
| C-layout | Sistem kisi yang responsif | Komponen ini berisi slot dan tidak didukung sebagai komponen AURA. |
| c-layout-item | Wadah dalam sistem kisi | Komponen ini berisi slot dan tidak didukung sebagai komponen AURA. |
| c-menu-item | Item daftar di menu. Gunakan komponen ini dalam c-button-menu | |
| C-output-bidang | Tampilan label, teks bantuan, dan nilai hanya baca untuk bidang pada objek Salesforce. Gunakan komponen ini dalam c-record-view-form . | Hanya untuk digunakan pada platform Salesforce. |
| C-pil | Label yang dapat berisi tautan dan dapat dihapus dari tampilan | Komponen ini berisi slot dan tidak didukung sebagai komponen AURA. Komponen ini merujuk label pada platform Salesforce. |
| C-pill-container | Daftar pil yang dikelompokkan dalam wadah | Komponen ini merujuk label pada platform Salesforce. |
| C-Radio-Group | Sekelompok tombol radio yang dapat memiliki satu opsi yang dipilih | Komponen ini merujuk label pada platform Salesforce. |
| Catatan-C | Formulir untuk membuat atau mengedit catatan dengan satu atau lebih bidang | Hanya untuk digunakan pada platform Salesforce. Gunakan c-record-edit-form dengan lightning-input-field . Gunakan c-messages dalam formulir untuk menampilkan pesan kesalahan sisi server. Komponen ini merujuk label pada platform Salesforce. |
| Catatan-C | Formulir untuk membuat, menampilkan, atau mengedit catatan dengan switching otomatis antara mode edit dan tampilan | Hanya untuk digunakan pada platform Salesforce. Komponen ini merujuk label pada platform Salesforce. |
| C-Record-View-Form | Formulir untuk menampilkan data catatan. Gunakan c-output-field dalam c-record-view-form . | Hanya untuk digunakan pada platform Salesforce. Komponen ini berisi slot dan tidak didukung sebagai komponen AURA. Komponen ini merujuk label pada platform Salesforce. |
| C-Relative-Date-Time | Sekelompok teks yang menggambarkan bagaimana waktu yang ditentukan berhubungan dengan waktu saat ini, seperti "beberapa detik yang lalu" atau "dalam 5 tahun" | |
| c-slider | Slider rentang input yang memungkinkan pemilihan nilai antara dua angka yang ditentukan | |
| c-spinner | Pemintal animasi | |
| c-tab | Satu tab dalam komponen c-tabset . | |
| C-Tabset | Daftar tab. Gunakan komponen ini dengan c-tab . | Komponen ini merujuk label pada platform Salesforce. |
| C-TextArea | Bidang TextArea untuk Input Teks Multi-Line | Komponen ini merujuk label pada platform Salesforce. |
| C-ubin | Sekelompok informasi terkait yang terkait dengan catatan | Komponen ini berisi slot dan tidak didukung sebagai komponen AURA. Komponen ini merujuk label pada platform Salesforce. |
| c-tree | Visualisasi hierarki struktural dengan barang -barang bersarang yang dapat runtuh atau diperluas. Gunakan komponen ini dengan c-tree-item . | Komponen ini merujuk label pada platform Salesforce. |
| C-vertikal-navigasi | Daftar tautan vertikal yang dapat dikelompokkan menjadi bagian-bagian menggunakan c-vertical-navigation-section | Komponen ini berisi slot dan tidak didukung sebagai komponen AURA. Komponen ini merujuk label pada platform Salesforce. |
| c-vertikal-navigasi-item | Tautan khusus teks dalam c-vertical-navigation-section atau c-vertical-navigation-overflow | |
| c-vertikal-navigasi-item-badge | Tautan dan lencana dalam c-vertical-navigation-section atau c-vertical-navigation-overflow | |
| c-vertikal-navigasi-item-icon | Tautan dan ikon dalam c-vertical-navigation-section atau c-vertical-navigation-overflow |
Anda dapat membuat hingga 5.000 label khusus untuk organisasi Anda, dan panjangnya hingga 1.000 karakter. Buat label khusus yang dapat Anda gunakan di komponen Web Lightning Anda.
Untuk memperbarui metadata label khusus, buka direktori force-app/main/default/labels . Label tersedia di file lightning.labels-meta.xml . Untuk sintaks dan contoh definisi CustomLabels, lihat Panduan Dev Metadata API.
Tambahkan label untuk komponen khusus Anda di file 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 >Untuk menyesuaikan label Anda, dari pengaturan, ketik label khusus di kotak Find Quick, lalu pilih label khusus . Label kami dikirim dalam bahasa Inggris dan dapat diterjemahkan ke bahasa lain. Untuk informasi lebih lanjut, lihat bagian Translate Label di bawah ini dan label khusus di Salesforce Help.
Impor label dari modul @salesforce/label Scoped. Referensi nama label Anda menggunakan c namespace.
// 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
} ;
}Gunakan label Anda dalam komponen web Lightning.
<!-- myComponent.html -->
< template >
< c-card title = {label.cardTitleLabel} >
{label.loadingLabel}
</ c-card >
</ template > Aktifkan Workbench Terjemahan untuk mendukung terjemahan di org Anda. Lihat Aktifkan dan Nonaktifkan Workbench Terjemahan dalam Bantuan Salesforce. Selanjutnya, ubah sfdx-project.json untuk memasukkan jalur untuk file terjemahan, yang tersedia di folder optional .
{
"packageDirectories" : [
{
"path" : " force-app " ,
"default" : true
},
{
"path" : " examples " ,
"default" : false
},
{
"path" : " optional "
}
],
"namespace" : " " ,
"sfdcLoginUrl" : " https://login.salesforce.com " ,
"sourceApiVersion" : " 46.0 "
} Setelah memperbarui sfdx-project.json , dorong file ke org awal Anda.
sfdx force:source:pushKami menggunakan kerangka pengujian Jest JavaScript untuk penulis dan menjalankan tes komponen. Jika Anda memodifikasi resep komponen dasar atau menambahkan komponen Anda sendiri, jalankan tes untuk memverifikasi perubahan Anda.
Untuk komponen Anda sendiri, tambahkan tes ke sub-folder __tests__ dari folder componentName Anda dan beri nama Test componentName.spec.js .
Untuk mengilustrasikan cara menguji komponen, kami akan menambahkan tes ke komponen HelloWorld yang dibuat sebelumnya.
Buat subfolder __tests__ di folder helloWorld .
Buat file bernama helloWorld.spec.js di __tests__ .
Masukkan kode ini dan simpan file.
//__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 Ini menjalankan tes serat dan unit. Lihat file package.json untuk semua tes yang tersedia.
Kami tidak menerima kontribusi saat ini. Jika Anda memiliki pertanyaan tentang resep komponen dasar, silakan gunakan saluran berikut.
Di mana saya dapat melihat lebih banyak contoh tentang cara menggunakan komponen web Lightning?
Bagaimana cara membuat komponen web Lightning?
Lihat Start Cepat: Proyek Trailhead Komponen Web Lightning. Panduan Pengembang Komponen Web Lightning juga merupakan sumber yang bagus.
