base components recipes
1.0.0
Ver ejemplos para componentes base en pequeñas bocados. Cada receta demuestra un ejemplo de trabajo de los componentes base para construir páginas y aplicaciones rápidamente. Use y personalice los componentes base y las recetas en sus aplicaciones.
Las recetas de componentes base abren el código fuente para los componentes base que se muestran en la biblioteca de componentes. Transpilamos los componentes base en el espacio de nombres c para que pueda usar los componentes en sus proyectos. Explore el funcionamiento interno de los componentes y use el código fuente para crear nuevos componentes con sus propios requisitos. ¡Las posibilidades son infinitas con la fuente en tus manos!
Solo hay un subconjunto de los componentes en la biblioteca de componentes disponibles. Para obtener más información, consulte la sección de documentación.
Los componentes base implementan el Sistema de diseño de Lightning (SLDS) de Salesforce y se desarrollan utilizando componentes web Lightning. Un componente de espacio de nombres c puede contener componentes en el espacio de nombres lightning .
Considere usar recetas de componentes base solo si los componentes base en el espacio de nombres lightning no funcionan para sus requisitos. Por ejemplo, use recetas de componentes base si necesita personalizar los estilos de los componentes base más allá de los mecanismos de estilo compatibles. Para obtener una lista de componentes base disponibles en el espacio de nombres lightning , consulte la biblioteca de componentes.
Para personalizar los estilos en los componentes del espacio de nombres lightning , recomendamos usar SLDS Styling Hooks. Para obtener más información, consulte Componentes de estilo con SLDS.
Recomendamos usar una organización de scratch para trabajar con recetas de componentes base en la plataforma Salesforce.
Configure su entorno siguiendo los pasos de la Guía de desarrollo de componentes web Lightning, que incluye:
Autentice con su Hub de Dev Org y proporcione un alias, como lo muestra mybaseorg en el siguiente comando.
sfdx force:auth:web:login -d -a mybaseorggit clone [email protected]:salesforce/base-components-recipes.git
cd base-components-recipesbase-recipes en el siguiente comando. sfdx force:org:create -s -f config/project-scratch-def.json -a base-recipesSi recibe un error "No tiene acceso al objeto [scratchorginfo]", asegúrese de haber habilitado su organización como una organización de cubo de desarrollo. Consulte Habilitar el Hub Dev en su organización. Alternativamente, regístrese para un Hub de Dev Org en https://developer.salesforce.com/promotions/orgs/dx-signup.
sfdx force:source:pushsfdx force:org:open Cree un componente web de Lightning Helloworld que use un componente base, c-button . Usaremos el código Visual Studio en este ejemplo.
base-components-recipes .force-app/main/default/lwc .helloWorld se crea en force-app/main/default/lwc y el archivo JavaScript helloWorld.js se abre en el editor.helloWorld.js , reemplace el contenido con el siguiente código. Guarde el archivo. //helloWorld.js
import { LightningElement , api } from 'lwc' ;
export default class HelloWorld extends LightningElement {
@ api greeting = 'Hello World' ;
}helloWorld.html y reemplace su contenido con el siguiente código. Guarde el archivo. <!--helloWorld.html-->
< template >
< c-button label = {greeting} title =" greeting " > </ c-button >
</ template >helloWorld.js-meta.xml , reemplace el contenido con el siguiente código. Guarde el archivo. <? 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:pushTu componente Helloworld ahora está listo para la acción. Puede agregar este componente a sus aplicaciones y páginas a través del Lightning App Builder. Para obtener más información, consulte el proyecto de inicio rápido: Lightning Web Components Trailhead.
Los componentes base en el espacio de nombres c están destinados a su uso en la plataforma Salesforce. Sin embargo, nos damos cuenta del deseo de usarlos en escenarios no de fuerza de venta. Actualmente, muchos componentes funcionarán, pero otros no, debido a las dependencias de la plataforma Salesforce. Nuestro objetivo es proporcionar componentes básicos para los casos de uso de la fuerza de venta, y hemos creado el LWC Storybook POC para mostrar cómo esto podría ser esto en el futuro. Haga clic en el botón de reloj en el repositorio para obtener actualizaciones a medida que avanzamos.
Componentes base en el mapa del espacio de nombres c a los componentes en el espacio de nombres lightning . Transpilamos los componentes base en el espacio de nombres c para que pueda usar los componentes en sus proyectos. Encuentre los componentes base en el espacio de nombres c en componentes base-recipas/force-app/main/default/lwc/.
Los componentes a continuación enlazan a la documentación para componentes en el espacio de nombres lightning , pero el uso es similar a menos que se indique lo contrario.
| Componente | Descripción | Comentario |
|---|---|---|
| C-ACORDION | Una colección de secciones apiladas verticalmente con múltiples áreas de contenido. | Este componente contiene ranuras y no es compatible como un componente aura. |
| C-ACORDION SECCIÓN | Una sola sección de contenido. Use este componente dentro de c-accordion . | Este componente contiene ranuras y no es compatible como un componente aura. |
| C-Avatar | Una representación visual de un objeto, como una cuenta o usuario | |
| c-badge | Una etiqueta que contiene una pequeña cantidad de información, como el número de notificaciones no leídas | |
| C-botón | Un elemento de botón que invoca una acción | |
| grupo de botón | Un grupo de botones que invoca acciones similares | |
| c-botón | Un elemento de botón de solo icono que invoca una acción | El atributo tooltip no es compatible. |
| c-botón-icon-estado | Un botón solo icono que retiene el estado | |
| C-Button-Menu | Un menú desplegable con una lista de acciones o funciones. Use este componente con c-menu-divider y c-menu-subheader para crear divisores de menú y subtítulos. | El atributo tooltip no es compatible. Para el atributo menu-alignment , la alineación auto no es compatible. Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| C-botón-estado | Un botón que alternará entre los estados | |
| Card | Un contenedor estilizado alrededor de un grupo de información | Este componente contiene ranuras y no es compatible como un componente aura. |
| Carril | Una colección de imágenes y subtítulos que se muestran una a la vez. Use este componente con imagen de curo c. | Este componente contiene ranuras y no es compatible como un componente aura. Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| CHECKBOX GROUP | Un grupo de casillas de verificación que permite la selección de opciones individuales o múltiples | |
| Combobox c | Un campo de entrada de solo lectura con una lista desplegable para la selección única | Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| cajón c-listón | Un par de listas que permiten seleccionar y reordenar múltiples opciones | Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| c-dynamic-ícon | Un conjunto de íconos animados | |
| cita c-forma de cita | Un par de fecha y hora que se muestra en función de la configuración del usuario | |
| ubicación c-formateada | Un par de latitud y longitud para una ubicación | |
| con un nombre de Cormato | Un nombre que se muestra en función de la localidad del usuario, que determina el formato y el orden de los componentes (sufijo, saludo, etc.) | |
| number en formato C | Un decimal, moneda o porcentaje que se muestra en la ubicación del usuario | |
| COLEMBRE COMENTADO | Un número de teléfono que abre la aplicación de llamada VoIP predeterminada cuando se hace clic | |
| text en formato C | Un grupo de texto con una opción para mostrar URL y direcciones de correo electrónico como enlaces | |
| C en forma de C | Un valor de tiempo que se muestra en función de la configuración regional del usuario | |
| Cormato C | Una URL que se muestra como un enlace | |
| c-ícon | Un elemento visual que proporciona contexto y mejora la usabilidad | Solo para su uso en la plataforma Salesforce. |
| ubicación de entrada c | Un par de campos de latitud y longitud | Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| cayot | Un sistema de cuadrícula receptivo | Este componente contiene ranuras y no es compatible como un componente aura. |
| C-Layout-item | Un contenedor en un sistema de cuadrícula | Este componente contiene ranuras y no es compatible como un componente aura. |
| C-Menu-ítem | Un elemento de lista en un menú. Use este componente dentro de c-button-menu | |
| campo de salida de salida | Una visualización de solo lectura de una etiqueta, texto de ayuda y valor para un campo en un objeto Salesforce. Use este componente dentro de c-record-view-form | Solo para su uso en la plataforma Salesforce. |
| píldelo | Una etiqueta que puede contener un enlace y se puede eliminar de la vista | Este componente contiene ranuras y no es compatible como un componente aura. Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| contenedor de píldoras | Una lista de píldoras agrupadas en un contenedor | Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| grupo de radio | Un grupo de botones de radio que pueden tener una sola opción seleccionada | Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| Forma de edición de récords | Un formulario para crear o editar un registro con uno o más campos | Solo para su uso en la plataforma Salesforce. Use c-record-edit-form con lightning-input-field . Use c-messages en el formulario para mostrar mensajes de error del lado del servidor. Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| récord de C | Un formulario para crear, mostrar o editar un registro con conmutación automática entre modos de edición y vista | Solo para su uso en la plataforma Salesforce. Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| Forma de visión de récords | Un formulario para mostrar datos de registro. Use c-output-field dentro de c-record-view-form . | Solo para su uso en la plataforma Salesforce. Este componente contiene ranuras y no es compatible como un componente aura. Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| C-Relativo-Tiempo | Un grupo de texto que representa cómo un tiempo específico se relaciona con el tiempo actual, como "hace unos segundos" o "en 5 años" | |
| slider de c | Un control deslizante de rango de entrada que permite la selección de un valor entre dos números especificados | |
| spinner | Una hilandera animada | |
| T-Tab | Una sola pestaña dentro de un componente c-tabset . | |
| C-Tabset | Una lista de pestañas. Use este componente con c-tab . | Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| C-textárea | Un campo TextAREA para entrada de texto de múltiples líneas | Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| azulejo | Un grupo de información relacionada asociada con un registro | Este componente contiene ranuras y no es compatible como un componente aura. Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| árbol C | Una visualización de una jerarquía estructural con artículos anidados que se pueden colapsar o expandir. Use este componente con c-tree-item . | Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| clavigación c-vertical | Una lista vertical de enlaces que se pueden agrupar en secciones utilizando c-vertical-navigation-section | Este componente contiene ranuras y no es compatible como un componente aura. Este componente hace referencia a las etiquetas en la plataforma Salesforce. |
| ítem c-vertical-navegación | Un enlace de solo texto dentro de c-vertical-navigation-section o c-vertical-navigation-overflow | |
| C-vertical-navegación-item-badge | Un enlace y una insignia dentro de c-vertical-navigation-section o c-vertical-navigation-overflow | |
| C-érem-Ím-ícon | Un enlace e ícono dentro de c-vertical-navigation-section o c-vertical-navigation-overflow |
Puede crear hasta 5,000 etiquetas personalizadas para su organización, y pueden tener hasta 1,000 caracteres de longitud. Cree etiquetas personalizadas que pueda usar en sus componentes web Lightning.
Para actualizar los metadatos de etiquetas personalizadas, vaya al directorio de force-app/main/default/labels . Las etiquetas están disponibles en el archivo lightning.labels-meta.xml . Para la sintaxis y un ejemplo de una definición de CustomLabels, consulte la guía de desarrollo de la API de metadatos.
Agregue etiquetas para sus componentes personalizados en el archivo 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 >Para personalizar sus etiquetas, desde la configuración, escriba etiquetas personalizadas en el cuadro de búsqueda rápida, luego seleccione etiquetas personalizadas . Nuestras etiquetas se envían en inglés y se pueden traducir a otros idiomas. Para obtener más información, consulte la sección Traduce de etiquetas a continuación y etiquetas personalizadas en la ayuda de Salesforce.
Importe las etiquetas del módulo @salesforce/label Scoped. Haga referencia a su nombre de etiqueta usando el espacio de nombres 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
} ;
}Use sus etiquetas en un componente web Lightning.
<!-- myComponent.html -->
< template >
< c-card title = {label.cardTitleLabel} >
{label.loadingLabel}
</ c-card >
</ template > Habilite el Banco de trabajo de traducción para apoyar las traducciones en su organización. Consulte Habilitar y deshabilitar el Banco de trabajo de traducción en Salesforce Ayuda. A continuación, modifique sfdx-project.json para incluir la ruta para los archivos de traducción, que están disponibles en la carpeta optional .
{
"packageDirectories" : [
{
"path" : " force-app " ,
"default" : true
},
{
"path" : " examples " ,
"default" : false
},
{
"path" : " optional "
}
],
"namespace" : " " ,
"sfdcLoginUrl" : " https://login.salesforce.com " ,
"sourceApiVersion" : " 46.0 "
} Después de actualizar sfdx-project.json , presione los archivos a su organización de scratch.
sfdx force:source:pushUtilizamos el marco de prueba JavaScript Jest para el autor y ejecutamos las pruebas de componentes. Si modifica las recetas de componentes base o agrega sus propios componentes, ejecute pruebas para verificar sus cambios.
Para sus propios componentes, agregue las pruebas a un __tests__ sub-holdero de su carpeta componentName y nombre la prueba componentName.spec.js .
Para ilustrar cómo probar los componentes, agregaremos una prueba al componente Helloworld creado anteriormente.
Crea una subcarpeta __tests__ en la carpeta helloWorld .
Cree un archivo llamado helloWorld.spec.js en __tests__ .
Inserte este código y guarde el archivo.
//__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 Esto ejecuta las pruebas de pelusa y unitaria. Consulte el archivo package.json para todas las pruebas disponibles.
No aceptamos contribuciones en este momento. Si tiene alguna pregunta sobre las recetas de componentes base, utilice los siguientes canales.
¿Dónde puedo ver más ejemplos sobre cómo usar componentes web de Lightning?
¿Cómo creo un componente web Lightning?
Vea el proyecto de inicio rápido: Lightning Web Components Trailhead. La Guía de desarrolladores de componentes web Lightning también es un gran recurso.
