base components recipes
1.0.0
Voir des exemples pour les composants de base dans de petites piqûres. Chaque recette montre un exemple de travail des composants de base pour créer rapidement des pages et des applications. Utilisez et personnalisez les composants de base et les recettes de vos applications.
Les recettes de composants de base ouvrent le code source des composants de base illustrés dans la bibliothèque des composants. Nous avons transpiré les composants de base dans l'espace de noms c afin que vous puissiez utiliser les composants de vos projets. Explorez le fonctionnement interne des composants et utilisez le code source pour créer de nouveaux composants avec vos propres exigences. Les possibilités sont infinies avec la source dans vos mains!
Seul un sous-ensemble des composants de la bibliothèque de composants est disponible. Pour plus d'informations, consultez la section Documentation.
Les composants de base implémentent Salesforce Lightning Design System (SLDS) et sont développés à l'aide de composants Web Lightning. Un composant d'espace de noms c peut contenir des composants dans l'espace de noms lightning .
Envisagez d'utiliser les recettes de composants de base uniquement si les composants de base de l'espace de noms lightning ne fonctionnent pas pour vos besoins. Par exemple, utilisez des recettes de composants de base si vous avez besoin de personnaliser les styles des composants de base au-delà des mécanismes de style pris en charge. Pour une liste des composants de base disponibles dans l'espace de noms lightning , voir la bibliothèque des composants.
Pour personnaliser les styles sur les composants de l'espace de noms lightning , nous vous recommandons d'utiliser des crochets de style SLDS. Pour plus d'informations, consultez les composants de style avec SLD.
Nous vous recommandons d'utiliser une organisation Scratch pour travailler avec des recettes de composants de base sur la plate-forme Salesforce.
Configurez votre environnement en suivant les étapes du Guide de déviation Lightning Web Components, qui comprend:
Authentifiez-vous avec votre Dev Hub Org et fournissez-le un alias, comme le montre mybaseorg dans la commande suivante.
sfdx force:auth:web:login -d -a mybaseorggit clone [email protected]:salesforce/base-components-recipes.git
cd base-components-recipesbase-recipes dans la commande suivante. sfdx force:org:create -s -f config/project-scratch-def.json -a base-recipesSi vous obtenez une erreur "Vous n'avez pas accès à l'objet [Scratchorginfo]", assurez-vous que vous avez activé votre org en tant que Dev Hub Org. Voir Activer Dev Hub dans votre org. Alternativement, inscrivez-vous à un Org Dev Hub sur https://developer.salesforce.com/promotions/orgs/dx-signup.
sfdx force:source:pushsfdx force:org:open Créez un composant Web Helloworld Lightning qui utilise un composant de base, c-button . Nous utiliserons Visual Studio Code dans cet exemple.
base-components-recipes .force-app/main/default/lwc par défaut.helloWorld est créé dans force-app/main/default/lwc et le fichier javascript helloWorld.js s'ouvre dans l'éditeur.helloWorld.js , remplacez le contenu par le code suivant. Enregistrez le fichier. //helloWorld.js
import { LightningElement , api } from 'lwc' ;
export default class HelloWorld extends LightningElement {
@ api greeting = 'Hello World' ;
}helloWorld.html , et remplacez son contenu par le code suivant. Enregistrez le fichier. <!--helloWorld.html-->
< template >
< c-button label = {greeting} title =" greeting " > </ c-button >
</ template >helloWorld.js-meta.xml , remplacez le contenu par le code suivant. Enregistrez le fichier. <? 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:pushVotre composant Helloworld est maintenant prêt pour l'action. Vous pouvez ajouter ce composant à vos applications et pages via le constructeur d'applications Lightning. Pour plus d'informations, consultez le projet rapide de départ: Lightning Web Components Trailhead.
Les composants de base de l'espace de noms c sont destinés à être utilisés sur la plate-forme Salesforce. Cependant, nous réalisons le désir de les utiliser dans des scénarios non-vente. Actuellement, de nombreux composants fonctionneront, mais d'autres ne le feront pas, en raison des dépendances sur la plate-forme Salesforce. Notre objectif est de fournir des composants de base pour les cas d'utilisation sans vente, et nous avons créé le livre de contes LWC POC pour montrer à quoi cela pourrait ressembler à l'avenir. Veuillez cliquer sur le bouton Regarder sur le dépôt pour les mises à jour au fur et à mesure que nous avançons.
Composants de base dans la carte de l'espace c vers les composants de l'espace de noms lightning . Nous avons transpiré les composants de base dans l'espace de noms c afin que vous puissiez utiliser les composants de vos projets. Trouvez les composants de base dans l'espace de noms c dans les composants de base-RECIPES / FORCE-APP / MAIN / DEFAULT / LWC /.
Les composants ci-dessous sont liés à la documentation des composants de l'espace de noms lightning , mais l'utilisation est similaire, sauf indication contraire.
| Composant | Description | Commentaire |
|---|---|---|
| en C | Une collection de sections empilées verticalement avec plusieurs domaines de contenu. | Ce composant contient des emplacements et n'est pas pris en charge comme un composant AURA. |
| section C | Une seule section de contenu. Utilisez ce composant dans c-accordion . | Ce composant contient des emplacements et n'est pas pris en charge comme un composant AURA. |
| c-avatar | Une représentation visuelle d'un objet, comme un compte ou un utilisateur | |
| c-badge | Une étiquette qui contient une petite quantité d'informations, comme le nombre de notifications non lues | |
| boutontte en C | Un élément bouton qui invoque une action | |
| groupe C | Un groupe de boutons qui invoque des actions similaires | |
| bouton-icon | Un élément de bouton d'icône uniquement qui invoque une action | L'attribut tooltip n'est pas pris en charge. |
| Couton C-Icondat | Un bouton d'icône uniquement qui conserve l'état | |
| bouton-menu | Un menu déroulant avec une liste d'actions ou de fonctions. Utilisez ce composant avec c-menu-divider et c-menu-subheader pour créer des diviseurs et des sous-titres de menu. | L'attribut tooltip n'est pas pris en charge. Pour l'attribut menu-alignment , l'alignement auto n'est pas pris en charge. Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| bouton C | Un bouton qui bascule entre les états | |
| carte C. | Un conteneur stylisé autour d'un groupe d'informations | Ce composant contient des emplacements et n'est pas pris en charge comme un composant AURA. |
| carabote C | Une collection d'images et de légendes qui sont affichées une à la fois. Utilisez ce composant avec une IMAGE C-CRAROUSEL | Ce composant contient des emplacements et n'est pas pris en charge comme un composant AURA. Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| C-Checkbox-Groupe | Un groupe de cases à cocher qui permet la sélection d'options uniques ou multiples | |
| c-combobox | Un champ de saisie en lecture seule avec une liste déroulante pour une seule sélection | Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| c-listbox | Une paire de listes qui permet à plusieurs options d'être sélectionnées et réorganisées | Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| c-dynamique-icon | Un ensemble d'icônes animées | |
| temps de rendez-vous en C | Une paire de date et d'heure affichées en fonction de l'utilisateur | |
| liaison C format par C | Une paire de latitude et de longitude pour un emplacement | |
| nom-format C | Un nom affiché sur la base de l'utilisateur local, qui détermine le format et l'ordre des constituants (suffixe, salutation, etc.) | |
| numéro de C à format C | Une décimale, une devise ou un pourcentage affichant de la base sur le paramètre utilisateur | |
| c-format-téléphone C | Un numéro de téléphone qui ouvre l'application VoIP d'appel par défaut lorsque vous cliquez sur | |
| text | Un groupe de texte avec une option pour afficher les URL et les adresses e-mail comme liens | |
| temps c formaté en C | Une valeur de temps affichée en fonction de la paroi utilisateur | |
| c-formatted-url | Une URL qui est affichée comme un lien | |
| c-icon | Un élément visuel qui fournit le contexte et améliore la convivialité | Pour une utilisation sur la plate-forme Salesforce uniquement. |
| C-IN-ENTÉRATION | Une paire de champs de latitude et de longitude | Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| C-LAYOUT | Un système de grille réactif | Ce composant contient des emplacements et n'est pas pris en charge comme un composant AURA. |
| C-Layout-Item | Un conteneur dans un système de grille | Ce composant contient des emplacements et n'est pas pris en charge comme un composant AURA. |
| c-menu-item | Un élément de liste dans un menu. Utilisez ce composant dans c-button-menu | |
| C-Output-Field | Un affichage en lecture seule d'une étiquette, un texte d'aide et une valeur pour un champ sur un objet Salesforce. Utilisez ce composant dans c-record-view-form . | Pour une utilisation sur la plate-forme Salesforce uniquement. |
| p-pill | Une étiquette qui peut contenir un lien et peut être supprimée de la vue | Ce composant contient des emplacements et n'est pas pris en charge comme un composant AURA. Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| Contauner en C | Une liste de pilules regroupées dans un conteneur | Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| c-radio-groupe | Un groupe de boutons radio qui peut avoir une seule option sélectionnée | Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| C. | Un formulaire pour créer ou modifier un enregistrement avec un ou plusieurs champs | Pour une utilisation sur la plate-forme Salesforce uniquement. Utilisez c-record-edit-form avec lightning-input-field . Utilisez c-messages dans le formulaire pour afficher les messages d'erreur côté serveur. Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| Cordial C | Un formulaire pour créer, afficher ou modifier un enregistrement avec une commutation automatique entre les modes d'édition et d'affichage | Pour une utilisation sur la plate-forme Salesforce uniquement. Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| C-Record-View-Form | Un formulaire pour afficher des données d'enregistrement. Utilisez c-output-field dans c-record-view-form | Pour une utilisation sur la plate-forme Salesforce uniquement. Ce composant contient des emplacements et n'est pas pris en charge comme un composant AURA. Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| temps de rendez-vous C-Relative | Un groupe de texte représentant comment un temps spécifié se rapporte à l'heure actuelle, comme "il y a quelques secondes" ou "en 5 ans" | |
| c-s-lider | Un curseur de plage d'entrée qui permet la sélection d'une valeur entre deux nombres spécifiés | |
| C-Spinner | Un spinner animé | |
| c-tab | Un seul onglet dans un composant c-tabset . | |
| c-tabset | Une liste d'onglets. Utilisez ce composant avec c-tab . | Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| c-textarea | Un champ TextArea pour la saisie de texte multi-lignes | Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| C-Tile | Un groupe d'informations connexes associées à un enregistrement | Ce composant contient des emplacements et n'est pas pris en charge comme un composant AURA. Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| arbre C | Une visualisation d'une hiérarchie structurelle avec des éléments imbriqués qui peuvent être effondrés ou étendus. Utilisez ce composant avec c-tree-item . | Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| C-Vertical Navigation | Une liste verticale de liens qui peuvent être regroupés en sections en utilisant c-vertical-navigation-section | Ce composant contient des emplacements et n'est pas pris en charge comme un composant AURA. Ce composant fait référence aux étiquettes sur la plate-forme Salesforce. |
| C-Vertical-Navigation-Item | Un lien texte uniquement dans c-vertical-navigation-section ou c-vertical-navigation-overflow | |
| C-Vertical-Navigation-Item-Badge | Un lien et un badge dans c-vertical-navigation-section ou c-vertical-navigation-overflow | |
| C-Vertical-Navigation-item-Icon | Un lien et une icône dans c-vertical-navigation-section ou c-vertical-navigation-overflow |
Vous pouvez créer jusqu'à 5 000 étiquettes personnalisées pour votre organisation, et elles peuvent comporter jusqu'à 1 000 caractères. Créez des étiquettes personnalisées que vous pouvez utiliser dans vos composants Web Lightning.
Pour mettre à jour les métadonnées personnalisées, accédez au répertoire force-app/main/default/labels . Les étiquettes sont disponibles dans le fichier lightning.labels-meta.xml . Pour la syntaxe et un exemple de définition de CustomAbels, consultez le guide Dev API Metadata.
Ajoutez des étiquettes pour vos composants personnalisés dans le fichier 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 >Pour personnaliser vos étiquettes, à partir de la configuration, tapez les étiquettes personnalisées dans la case rapide, puis sélectionnez les étiquettes personnalisées . Nos étiquettes sont expédiées en anglais et peuvent être traduites dans d'autres langues. Pour plus d'informations, consultez la section Translate Labels ci-dessous et les étiquettes personnalisées dans l'aide Salesforce.
Importez les étiquettes à partir du module SCOPED @salesforce/label . Référez-vous le nom de votre étiquette à l'aide de l'espace de noms 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
} ;
}Utilisez vos étiquettes dans un composant Web Lightning.
<!-- myComponent.html -->
< template >
< c-card title = {label.cardTitleLabel} >
{label.loadingLabel}
</ c-card >
</ template > Activez le Workbench de traduction pour prendre en charge les traductions dans votre organisation. Voir Activer et désactiver le Workbench de traduction dans l'aide de Salesforce. Ensuite, modifiez sfdx-project.json pour inclure le chemin d'accès aux fichiers de traduction, qui sont disponibles dans le dossier optional .
{
"packageDirectories" : [
{
"path" : " force-app " ,
"default" : true
},
{
"path" : " examples " ,
"default" : false
},
{
"path" : " optional "
}
],
"namespace" : " " ,
"sfdcLoginUrl" : " https://login.salesforce.com " ,
"sourceApiVersion" : " 46.0 "
} Après la mise à jour sfdx-project.json , appuyez sur les fichiers vers votre org Scratch.
sfdx force:source:pushNous utilisons le framework de test JavaScript Jest pour auteur et exécuter des tests de composants. Si vous modifiez des recettes de composants de base ou ajoutez vos propres composants, exécutez des tests pour vérifier vos modifications.
Pour vos propres composants, ajoutez des tests à un sous-dossier __tests__ de votre dossier componentName et nommez le Test componentName.spec.js .
Pour illustrer comment tester les composants, nous allons ajouter un test au composant Helloworld créé plus tôt.
Créez un sous-dossier __tests__ dans le dossier helloWorld .
Créez un fichier nommé helloWorld.spec.js dans __tests__ .
Insérez ce code et enregistrez le fichier.
//__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 Cela exécute des tests de charpie et d'unité. Voir le fichier package.json pour tous les tests disponibles.
Nous n'acceptons pas les contributions en ce moment. Si vous avez des questions sur les recettes de composants de base, veuillez utiliser les canaux suivants.
Où puis-je voir plus d'exemples sur la façon d'utiliser des composants Web Lightning?
Comment créer un composant Web Lightning?
Voir le démarrage rapide: Lightning Web Components Trailhead Project. Le Guide du développeur de composants Web Lightning est également une excellente ressource.
