base components recipes
1.0.0
Beispiele für Basiskomponenten in kleinen Bissen anzeigen. Jedes Rezept zeigt ein funktionierendes Beispiel für die Basiskomponenten, um Seiten und Apps schnell zu erstellen. Verwenden und passen Sie die Basiskomponenten und Rezepte in Ihren Apps an.
Basiskomponentenrezepte öffnen den Quellcode für die in der Komponentenbibliothek gezeigten Basiskomponenten. Wir haben die Basiskomponenten in den c -Namespace umgewandelt, damit Sie die Komponenten in Ihren Projekten verwenden können. Erkunden Sie die inneren Funktionen der Komponenten und verwenden Sie den Quellcode, um neue Komponenten mit eigenen Anforderungen zu erstellen. Die Möglichkeiten sind endlos mit der Quelle in Ihren Händen!
Es gibt nur eine Teilmenge der Komponenten in der Komponentenbibliothek. Weitere Informationen finden Sie im Abschnitt Dokumentation.
Basiskomponenten implementieren Salesforce Lightning Design System (SLDS) und werden mit Lightning -Webkomponenten entwickelt. Eine c -Namespace -Komponente kann Komponenten im lightning -Namespace enthalten.
Erwägen Sie nur, dass die Basiskomponenten -Rezepte nur dann verwendet werden, wenn die Basiskomponenten im lightning -Namespace nicht für Ihre Anforderungen funktionieren. Verwenden Sie beispielsweise die Rezepte für Basiskomponenten, wenn Sie die Stile der Basiskomponenten über unterstützte Styling -Mechanismen anpassen müssen. Eine Liste der verfügbaren Basiskomponenten im lightning -Namespace finden Sie in der Komponentenbibliothek.
Um die Stile auf lightning -Namespace -Komponenten anzupassen, empfehlen wir die Verwendung von SLDS -Styling -Hooks. Weitere Informationen finden Sie unter Stilkomponenten mit SLDs.
Wir empfehlen, eine Scratch -Org mit Basiskomponentenrezepten auf der Salesforce -Plattform zu verwenden.
Richten Sie Ihre Umgebung ein, indem Sie die Schritte im Dev -Handbuch für Lightning -Webkomponenten befolgen, einschließlich:
Authentifizieren Sie sich mit Ihrer Entwicklungshub -Org und geben Sie ihn mit einem Alias, wie mybaseorg im folgenden Befehl gezeigt.
sfdx force:auth:web:login -d -a mybaseorggit clone [email protected]:salesforce/base-components-recipes.git
cd base-components-recipesbase-recipes im folgenden Befehl gezeigt. sfdx force:org:create -s -f config/project-scratch-def.json -a base-recipesWenn Sie einen Fehler erhalten, "Sie haben keinen Zugriff auf das [crosshEnginfo] -Objekt", stellen Sie sicher, dass Sie Ihre Org -ORG als Dev Hub Org aktiviert haben. Siehe Dev Hub in Ihrer Org aktivieren. Alternativ melden Sie sich für einen Dev Hub org unter https://developer.salesforce.com/promotions/orgs/dx-Signup an.
sfdx force:source:pushsfdx force:org:open Erstellen Sie eine HelloWorld Lightning-Webkomponente, die eine Basiskomponente c-button verwendet. Wir werden in diesem Beispiel Visual Studio -Code verwenden.
base-components-recipes Verzeichnis.force-app/main/default/lwc zu akzeptieren.helloWorld Bundle wird in force-app/main/default/lwc erstellt, und die helloWorld.js -JavaScript-Datei wird im Editor geöffnet.helloWorld.js durch den folgenden Code. Speichern Sie die Datei. //helloWorld.js
import { LightningElement , api } from 'lwc' ;
export default class HelloWorld extends LightningElement {
@ api greeting = 'Hello World' ;
}helloWorld.html und ersetzen Sie ihren Inhalt durch den folgenden Code. Speichern Sie die Datei. <!--helloWorld.html-->
< template >
< c-button label = {greeting} title =" greeting " > </ c-button >
</ template >helloWorld.js-meta.xml den Inhalt durch den folgenden Code. Speichern Sie die Datei. <? 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:pushIhre HelloWorld -Komponente ist jetzt bereit zum Handeln. Sie können diese Komponente über den Lightning App Builder zu Ihren Apps und Seiten hinzufügen. Weitere Informationen finden Sie im Quick Start: Lightning Web Components Trailhead -Projekt.
Basiskomponenten im c -Namespace sind für die Verwendung auf der Salesforce -Plattform vorgesehen. Wir erkennen jedoch den Wunsch, sie in Szenarien ohne Verkaufsforce zu verwenden. Derzeit funktionieren viele Komponenten, andere jedoch aufgrund von Abhängigkeiten von der Salesforce -Plattform nicht. Unser Ziel ist es, Basiskomponenten für Nicht-Verkaufsforce-Anwendungsfälle bereitzustellen, und wir haben das LWC Storybook POC erstellt, um zu zeigen, wie dies in Zukunft aussehen könnte. Bitte klicken Sie im Repo auf die Schaltfläche Ansicht, um Updates zu erhalten, während wir vorwärts gehen.
Basiskomponenten in der c -Namespace -Karte zu Komponenten im lightning -Namespace. Wir haben die Basiskomponenten in den c -Namespace umgewandelt, damit Sie die Komponenten in Ihren Projekten verwenden können. Suchen Sie die Basiskomponenten im c Namespace in Basiskomponenten-Recipes/Force-App/Main/Standard/LWC/.
Die folgenden Komponenten, die folgende Dokumentation für Komponenten im lightning -Namespace verlinken, ist jedoch ähnlich, sofern nicht anders angegeben.
| Komponente | Beschreibung | Kommentar |
|---|---|---|
| C-Akkordion | Eine Sammlung vertikal gestapelter Abschnitte mit mehreren Inhaltsbereichen. | Diese Komponente enthält Slots und wird nicht als Aura -Komponente unterstützt. |
| C-Accordion-Abschnitt | Ein einzelner Abschnitt des Inhalts. Verwenden Sie diese Komponente innerhalb von c-accordion . | Diese Komponente enthält Slots und wird nicht als Aura -Komponente unterstützt. |
| C-Avatar | Eine visuelle Darstellung eines Objekts wie eines Kontos oder Benutzer | |
| C-Badge | Ein Etikett, das eine kleine Menge an Informationen enthält, wie z. B. die Anzahl der ungelesenen Benachrichtigungen | |
| C-Button | Ein Knopfelement, das eine Aktion hervorruft | |
| C-Button-Gruppe | Eine Gruppe von Tasten, die ähnliche Aktionen hervorrufen | |
| C-Button-Icon | Ein Taste-Element nur ein Symbol, das eine Aktion aufruft | Das tooltip -Attribut wird nicht unterstützt. |
| C-Button-Icon-standardvoll | Eine nur Symbol-Taste, die Status behält | |
| C-Button-Menu | Ein Dropdown -Menü mit einer Liste von Aktionen oder Funktionen. Verwenden Sie diese Komponente mit c-menu-divider und c-menu-subheader um Menü-Teiler und -Subris zu erstellen. | Das tooltip -Attribut wird nicht unterstützt. Für das menu-alignment wird die auto Ausrichtung nicht unterstützt. Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Button-staatlich | Eine Taste, die zwischen den Zuständen umschaltet | |
| C-Karte | Ein stilisierter Container um eine Gruppe von Informationen | Diese Komponente enthält Slots und wird nicht als Aura -Komponente unterstützt. |
| C-Carousel | Eine Sammlung von Bildern und Bildunterschriften, die einzeln angezeigt werden. Verwenden Sie diese Komponente mit C-Carousel-Image | Diese Komponente enthält Slots und wird nicht als Aura -Komponente unterstützt. Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Checkbox-Gruppe | Eine Gruppe von Kontrollkästchen, die die Auswahl einzelner oder mehrerer Optionen ermöglichen | |
| C-Combobox | Ein schreibgeschütztes Eingabefeld mit einer Dropdown-Liste für die Einzelauswahl | Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Dual-Listbox | Ein Listenpaar, mit dem mehrere Optionen ausgewählt und neu angeordnet werden können | Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Dynamic-Icon | Ein Satz animierter Symbole | |
| C-formatierte Zeitzeit | Ein Paar von Datum und Uhrzeit, die basierend auf dem Benutzergebietsschema angezeigt werden | |
| C-formatierte Standort | Ein Paar Breitengrad und Länge für einen Ort | |
| C-formatiertes Name | Ein Name, der basierend auf dem Benutzergebietsschema angezeigt wird, das das Format und die Reihenfolge der Bestandteile bestimmt (Suffix, Gruß usw.) | |
| C-formatiertes Number | Eine Dezimalzahl, eine Währung oder ein Prozentsatz, der die Basis im Benutzergebietsschema angezeigt wird | |
| C-formatiertes Telefon | Eine Telefonnummer, die beim Klicken die Standard -VoIP -App -App öffnet | |
| C-formatiertes Text | Eine Textgruppe mit der Option zum Anzeigen von URLs und E -Mail -Adressen als Links | |
| C-formatierte Zeit | Ein Zeitwert, der basierend auf dem Benutzergebietsschema angezeigt wird | |
| C-formatiert-url | Eine URL, die als Link angezeigt wird | |
| C-ICON | Ein visuelles Element, das Kontext bietet und die Benutzerfreundlichkeit verbessert | Nur für die Salesforce -Plattform. |
| C-Input-Standort | Ein Paar Breiten- und Längengradfelder | Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Layout | Ein reaktionsschnelles Netzsystem | Diese Komponente enthält Slots und wird nicht als Aura -Komponente unterstützt. |
| C-Layout-Item | Ein Behälter in einem Gittersystem | Diese Komponente enthält Slots und wird nicht als Aura -Komponente unterstützt. |
| C-Menu-Item | Ein Listenelement in einem Menü. Verwenden Sie diese Komponente innerhalb von c-button-menu | |
| Co-Output-Feld | Eine schreibgeschützte Anzeige eines Etiketts, eines Hilfstextes und eines Werts für ein Feld in einem Salesforce-Objekt. Verwenden Sie diese Komponente in c-record-view-form . | Nur für die Salesforce -Plattform. |
| C-Pille | Ein Etikett, das einen Link enthalten kann und von der Sicht aus entfernt werden kann | Diese Komponente enthält Slots und wird nicht als Aura -Komponente unterstützt. Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Pill-Container | Eine Liste von Pillen, die in einem Container gruppiert sind | Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Radio-Gruppen | Eine Gruppe von Optionsfeldern, die eine einzelne Option ausgewählt haben können | Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Rekord-Edit-Form | Ein Formular zum Erstellen oder Bearbeiten eines Datensatzes mit einem oder mehreren Feldern | Nur für die Salesforce -Plattform. Verwenden Sie c-record-edit-form mit lightning-input-field . Verwenden Sie c-messages im Formular, um serverseitige Fehlermeldungen anzuzeigen. Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Rekordform | Ein Formular zum Erstellen, Anzeigen oder Bearbeiten eines Datensatzes mit automatischem Umschalten zwischen Bearbeitungs- und Ansichtsmodi | Nur für die Salesforce -Plattform. Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Rekord-View-Form | Ein Formular zum Anzeigen von Datensatzdaten. Verwenden Sie c-output-field innerhalb von c-record-view-form . | Nur für die Salesforce -Plattform. Diese Komponente enthält Slots und wird nicht als Aura -Komponente unterstützt. Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Relativzeitzeit | Eine Gruppe von Text, die zeigt, wie sich eine bestimmte Zeit auf die aktuelle Zeit bezieht, wie "vor einigen Sekunden" oder "in 5 Jahren" | |
| C-Slider | Ein Eingabebereich -Schieberegler, der die Auswahl eines Wertes zwischen zwei angegebenen Zahlen ermöglicht | |
| C-Spinner | Ein animierter Spinner | |
| c-tab | Eine einzelne Registerkarte in einer c-tabset -Komponente. | |
| C-Tabset | Eine Liste von Registerkarten. Verwenden Sie diese Komponente mit c-tab . | Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Textea | Ein Textbereich Feld für Multi-Line-Texteingaben | Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Kabine | Eine Gruppe verwandter Informationen, die mit einem Datensatz verbunden sind | Diese Komponente enthält Slots und wird nicht als Aura -Komponente unterstützt. Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-Baum | Eine Visualisierung einer strukturellen Hierarchie mit verschachtelten Elementen, die zusammengebrochen oder erweitert werden können. Verwenden Sie diese Komponente mit c-tree-item . | Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-vertikale Navigation | Eine vertikale Liste von Links, die unter Verwendung c-vertical-navigation-section in Abschnitte zusammengefasst werden können | Diese Komponente enthält Slots und wird nicht als Aura -Komponente unterstützt. Diese Komponente verweist beschriftet auf Salesforce -Plattform. |
| C-vertikaler Navigation-Element | Eine nur Textverbindung im c-vertical-navigation-section oder c-vertical-navigation-overflow | |
| C-vertikale Navigation-Element-Badge | Ein Link und ein Abzeichen innerhalb c-vertical-navigation-section oder c-vertical-navigation-overflow | |
| C-vertikale Navigation-Element-ICON | Ein Link und ein Symbol innerhalb c-vertical-navigation-section oder c-vertical-navigation-overflow |
Sie können bis zu 5.000 benutzerdefinierte Etiketten für Ihre Organisation erstellen und bis zu 1.000 Zeichen lang sind. Erstellen Sie benutzerdefinierte Beschriftungen, die Sie in Ihren Lightning -Webkomponenten verwenden können.
Um die benutzerdefinierten Labels-Metadaten zu aktualisieren, gehen Sie in das Verzeichnis force-app/main/default/labels . Die Beschriftungen sind in der Datei lightning.labels-meta.xml erhältlich. Für Syntax und ein Beispiel für eine benutzerdefinierte Definition finden Sie im Metadata API Dev Guide.
Fügen Sie Etiketten für Ihre benutzerdefinierten Komponenten in der Datei lightning.labels-meta.xml hinzu.
< 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 >Um Ihre Beschriftungen aus dem Setup anzupassen, geben Sie benutzerdefinierte Beschriftungen in das Feld "Schnell -Suchen" ein und wählen Sie dann benutzerdefinierte Beschriftungen . Unsere Etiketten werden in Englisch versendet und können in andere Sprachen übersetzt werden. Weitere Informationen finden Sie im Abschnitt "Übersetzungsbeamte unten" und "Sonderanschlüsse" in Salesforce -Hilfe.
Importieren Sie die Beschriftungen aus dem Modul @salesforce/label Scoped". Verweisen Sie auf Ihren Etikettennamen mit dem 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
} ;
}Verwenden Sie Ihre Etiketten in einer Lightning -Webkomponente.
<!-- myComponent.html -->
< template >
< c-card title = {label.cardTitleLabel} >
{label.loadingLabel}
</ c-card >
</ template > Aktivieren Sie die Übersetzungsworkbench, um Übersetzungen in Ihrer Org zu unterstützen. Siehe Enable und Deaktivieren Sie die Übersetzungsworkbench in Salesforce -Hilfe. Ändern Sie als nächstes sfdx-project.json um den Pfad für die Übersetzungsdateien einzuschließen, die im optional Ordner verfügbar sind.
{
"packageDirectories" : [
{
"path" : " force-app " ,
"default" : true
},
{
"path" : " examples " ,
"default" : false
},
{
"path" : " optional "
}
],
"namespace" : " " ,
"sfdcLoginUrl" : " https://login.salesforce.com " ,
"sourceApiVersion" : " 46.0 "
} Nachdem Sie sfdx-project.json aktualisiert haben, drücken Sie die Dateien auf Ihren Scratch Org.
sfdx force:source:pushWir verwenden das Scherz -JavaScript -Test -Framework, um Komponententests zu verzeichnen und zu führen. Wenn Sie Rezepte für Basiskomponenten ändern oder Ihre eigenen Komponenten hinzufügen, führen Sie Tests aus, um Ihre Änderungen zu überprüfen.
Fügen Sie für Ihre eigenen Komponenten Tests zu einem __tests__ Unterordner Ihres componentName hinzu und nennen Sie den componentName.spec.js .
Um zu veranschaulichen, wie man Komponenten testet, fügen wir der zuvor erstellten Helloworld -Komponente einen Test hinzu.
Erstellen Sie einen __tests__ -Unterordner im Ordner helloWorld .
Erstellen Sie eine Datei namens helloWorld.spec.js in __tests__ .
Fügen Sie diesen Code ein und speichern Sie die Datei.
//__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 aus. npm run test helloWorldnpm run test Dies läuft FININT- und EINGESTELLUNGS -Tests. In der Datei package.json finden Sie alle verfügbaren Tests.
Wir akzeptieren derzeit keine Beiträge. Wenn Sie Fragen zu Rezepten von Basiskomponenten haben, verwenden Sie bitte die folgenden Kanäle.
Wo kann ich weitere Beispiele dafür sehen, wie Sie Lightning -Webkomponenten verwenden?
Wie erstelle ich eine Lightning -Webkomponente?
Siehe Quick Start: Lightning Web Components Trailhead Project. Der Lightning Web Components Developer Guide ist ebenfalls eine großartige Ressource.
