base components recipes
1.0.0
Veja exemplos para componentes básicos em pequenas mordidas. Cada receita demonstra um exemplo de funcionamento dos componentes básicos para criar páginas e aplicativos rapidamente. Use e personalize os componentes básicos e as receitas em seus aplicativos.
As receitas de componentes básicas abrem o código -fonte para os componentes básicos mostrados na biblioteca de componentes. Transpilamos os componentes básicos no espaço de nome c para que você possa usar os componentes em seus projetos. Explore o funcionamento interno dos componentes e use o código -fonte para criar novos componentes com seus próprios requisitos. As possibilidades são infinitas com a fonte em suas mãos!
Apenas um subconjunto dos componentes na biblioteca de componentes está disponível. Para mais informações, consulte a seção de documentação.
Os componentes básicos implementam o Salesforce Lightning Design System (SLDs) e são desenvolvidos usando componentes da Web Lightning. Um componente de namespace c pode conter componentes no espaço para nome de lightning .
Considere o uso de receitas de componentes básicas apenas se os componentes básicos no espaço para nome lightning não funcionarem para seus requisitos. Por exemplo, use receitas de componentes básicas se precisar personalizar os estilos dos componentes básicos além dos mecanismos de estilo suportados. Para obter uma lista de componentes básicos disponíveis no espaço para nome lightning , consulte a biblioteca de componentes.
Para personalizar os estilos nos componentes do namespace lightning , recomendamos o uso de ganchos de estilo SLDS. Para obter mais informações, consulte os componentes de estilo com SLDs.
Recomendamos o uso de uma organização de arranhões para trabalhar com receitas de componentes básicas na plataforma Salesforce.
Configure seu ambiente seguindo as etapas do Guia de Dev componentes da Web Lightning, que inclui:
Autentique -se com o seu Dev Hub Org e forneça um alias, conforme mostrado por mybaseorg no comando a seguir.
sfdx force:auth:web:login -d -a mybaseorggit clone [email protected]:salesforce/base-components-recipes.git
cd base-components-recipesbase-recipes no comando a seguir. sfdx force:org:create -s -f config/project-scratch-def.json -a base-recipesSe você receber um erro "Você não terá acesso ao objeto [Scratchorginfo]", verifique se você ativou sua organização como uma org de dev hub. Consulte Ativar Dev Hub em sua organização. Como alternativa, inscreva-se em um org de dev hub em https://developer.salesforce.com/promotions/orgs/dx-signup.
sfdx force:source:pushsfdx force:org:open Crie um componente da Web Helloworld Lightning que use um componente básico, c-button . Usaremos o código do Visual Studio neste exemplo.
base-components-recipes .force-app/main/default/lwc .helloWorld é criado no arquivo JavaScript de force-app/main/default/lwc e do helloWorld.js .helloWorld.js , substitua o conteúdo pelo código a seguir. Salve o arquivo. //helloWorld.js
import { LightningElement , api } from 'lwc' ;
export default class HelloWorld extends LightningElement {
@ api greeting = 'Hello World' ;
}helloWorld.html e substitua seu conteúdo pelo código a seguir. Salve o arquivo. <!--helloWorld.html-->
< template >
< c-button label = {greeting} title =" greeting " > </ c-button >
</ template >helloWorld.js-meta.xml , substitua o conteúdo pelo código a seguir. Salve o arquivo. <? 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:pushSeu componente Helloworld agora está pronto para a ação. Você pode adicionar esse componente aos seus aplicativos e páginas através do construtor de aplicativos Lightning. Para obter mais informações, consulte o projeto Rick Start: Lightning Web Components Trailhead.
Os componentes básicos no espaço para nome c destinam -se ao uso na plataforma Salesforce. No entanto, percebemos o desejo de usá-los em cenários que não sejam de Salesforce. Atualmente, muitos componentes funcionarão, mas outros não, devido a dependências da plataforma Salesforce. Nosso objetivo é fornecer componentes básicos para casos de uso que não sejam de Salesforce, e criamos o POC do livro de histórias da LWC para mostrar como isso pode ser no futuro. Clique no botão Watch no repositório para atualizações à medida que avançamos.
Componentes básicos no mapa de namespace c para componentes no espaço para nome de lightning . Transpilamos os componentes básicos no espaço de nome c para que você possa usar os componentes em seus projetos. Encontre os componentes básicos no espaço de nome c em componentes-base-Recipes/Force-App/Main/Padrão/LWC/.
Os componentes abaixo do link para a documentação para componentes no espaço para nome lightning , mas o uso é semelhante, a menos que indicado de outra forma.
| Componente | Descrição | Comentário |
|---|---|---|
| acordão C. | Uma coleção de seções empilhadas verticalmente com várias áreas de conteúdo. | Este componente contém slots e não é suportado como um componente AURA. |
| Seção de acordos C. | Uma única seção de conteúdo. Use este componente dentro c-accordion | Este componente contém slots e não é suportado como um componente AURA. |
| c-Avatar | Uma representação visual de um objeto, como uma conta ou usuário | |
| C-Badge | Um rótulo que mantém uma pequena quantidade de informações, como o número de notificações não lidas | |
| C-Button | Um elemento de botão que invoca uma ação | |
| Grupo C-Button | Um grupo de botões que invoca ações semelhantes | |
| C-Button-icon | Um elemento de botão somente para ícone que invoca uma ação | O atributo tooltip não é suportado. |
| C-Button-icon-statuty | Um botão somente de ícone que mantém o estado | |
| C-Button-Menu | Um menu suspenso com uma lista de ações ou funções. Use este componente com c-menu-divider e c-menu-subheader para criar divisores e sub-cabeças de menu. | O atributo tooltip não é suportado. Para o atributo menu-alignment , o alinhamento auto não é suportado. Este componente faz referência aos rótulos da plataforma Salesforce. |
| C-Button-statuty | Um botão que alterna entre os estados | |
| C-CARD | Um recipiente estilizado em torno de um grupo de informações | Este componente contém slots e não é suportado como um componente AURA. |
| CAROUSEL C. | Uma coleção de imagens e legendas que são exibidas uma de cada vez. Use este componente com a imagem C-Carousel | Este componente contém slots e não é suportado como um componente AURA. Este componente faz referência aos rótulos da plataforma Salesforce. |
| C-checkbox-group | Um grupo de caixas de seleção que permite a seleção de opções únicas ou múltiplas | |
| C-Combobox | Um campo de entrada somente leitura com uma lista suspensa para seleção única | Este componente faz referência aos rótulos da plataforma Salesforce. |
| C-Listbox C-Dual | Um par de listas que permitem que várias opções sejam selecionadas e reordenadas | Este componente faz referência aos rótulos da plataforma Salesforce. |
| c-dinâmico-icon | Um conjunto de ícones animados | |
| c-formatted-date-time | Um par de data e hora exibidas com base no local do usuário | |
| Localização formatada em C. | Um par de latitude e longitude para um local | |
| Nome c-formatted | Um nome exibido com base na localidade do usuário, que determina o formato e a ordem dos constituintes (sufixo, saudação, etc.) | |
| Número em formato em C. | Uma porcentagem decimal, de moeda ou | |
| Phone em formato em C. | Um número de telefone que abre o aplicativo de chamada VoIP padrão quando clicado | |
| Texto em formato C. | Um grupo de texto com uma opção para exibir URLs e endereços de email como links | |
| C-formated-time | Um valor de tempo exibido com base no local do usuário | |
| C-formatted-URL | Um URL que é exibido como um link | |
| c-icon | Um elemento visual que fornece contexto e aprimora a usabilidade | Para uso apenas na plataforma Salesforce. |
| Localização de entrada C. | Um par de campos de latitude e longitude | Este componente faz referência aos rótulos da plataforma Salesforce. |
| C-layout | Um sistema de grade responsivo | Este componente contém slots e não é suportado como um componente AURA. |
| c-layout-iteem | Um recipiente em um sistema de grade | Este componente contém slots e não é suportado como um componente AURA. |
| C-Menu-Item | Um item da lista em um menu. Use este componente dentro c-button-menu | |
| C-Output-Field | Uma exibição somente leitura de um rótulo, texto de ajuda e valor para um campo em um objeto Salesforce. Use este componente no c-record-view-form . | Para uso apenas na plataforma Salesforce. |
| pill c | Um rótulo que pode conter um link e pode ser removido da visualização | Este componente contém slots e não é suportado como um componente AURA. Este componente faz referência aos rótulos da plataforma Salesforce. |
| CONTE-CONTENCIDO C. | Uma lista de comprimidos agrupados em um contêiner | Este componente faz referência aos rótulos da plataforma Salesforce. |
| Grupo C-Radio | Um grupo de botões de rádio que pode ter uma única opção selecionada | Este componente faz referência aos rótulos da plataforma Salesforce. |
| Formulário C-Record-Edit | Um formulário para criar ou editar um recorde com um ou mais campos | Para uso apenas na plataforma Salesforce. Use c-record-edit-form com lightning-input-field . Use- c-messages no formulário para exibir mensagens de erro do lado do servidor. Este componente faz referência aos rótulos da plataforma Salesforce. |
| Formulário C. | Um formulário para criar, exibir ou editar um registro com alternância automática entre os modos de edição e exibição | Para uso apenas na plataforma Salesforce. Este componente faz referência aos rótulos da plataforma Salesforce. |
| C-Record-View-Form | Um formulário para exibir dados de registro. Use c-output-field no c-record-view-form . | Para uso apenas na plataforma Salesforce. Este componente contém slots e não é suportado como um componente AURA. Este componente faz referência aos rótulos da plataforma Salesforce. |
| C-Relativa a tempo | Um grupo de texto que descreve como um tempo especificado se refere ao horário atual, como "alguns segundos atrás" ou "em 5 anos" | |
| Slider C. | Um deslizante de intervalo de entrada que permite a seleção de um valor entre dois números especificados | |
| c-spinner | Um spinner animado | |
| C-TAB | Uma única guia dentro de um componente c-tabset . | |
| C-Tabset | Uma lista de guias. Use este componente com c-tab . | Este componente faz referência aos rótulos da plataforma Salesforce. |
| c-textarea | Um campo de textarea para entrada de texto multi-line | Este componente faz referência aos rótulos da plataforma Salesforce. |
| C-Tile | Um grupo de informações relacionadas associadas a um registro | Este componente contém slots e não é suportado como um componente AURA. Este componente faz referência aos rótulos da plataforma Salesforce. |
| c-árvore | Uma visualização de uma hierarquia estrutural com itens aninhados que podem ser colapsados ou expandidos. Use este componente com c-tree-item . | Este componente faz referência aos rótulos da plataforma Salesforce. |
| C-Navigação C-Vertical | Uma lista vertical de links que podem ser agrupados em seções usando c-vertical-navigation-section | Este componente contém slots e não é suportado como um componente AURA. Este componente faz referência aos rótulos da plataforma Salesforce. |
| C-Navigação-Item-Item | Um link somente de texto na c-vertical-navigation-section ou c-vertical-navigation-overflow | |
| C-Navigação-Item-Badge | Um link e crachá na c-vertical-navigation-section ou c-vertical-navigation-overflow | |
| C-Navigação-Item-icon | Um link e ícone na c-vertical-navigation-section ou c-vertical-navigation-overflow |
Você pode criar até 5.000 rótulos personalizados para sua organização e eles podem ter até 1.000 caracteres de comprimento. Crie rótulos personalizados que você pode usar em seus componentes da Web Lightning.
Para atualizar os metadados dos rótulos personalizados, vá para o diretório force-app/main/default/labels . Os rótulos estão disponíveis no arquivo lightning.labels-meta.xml . Para sintaxe e um exemplo de uma definição de alfabetização personalizada, consulte o Guia de Dev Metadados API.
Adicione rótulos para seus componentes personalizados no arquivo 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 seus rótulos, desde a configuração, digite rótulos personalizados na caixa de localização rápida e selecione etiquetas personalizadas . Nossos rótulos são enviados em inglês e podem ser traduzidos para outros idiomas. Para obter mais informações, consulte a seção de rótulos de tradução abaixo e etiquetas personalizadas no Salesforce Help.
Importe as etiquetas do módulo @salesforce/label Scoped. Faça referência ao seu nome de etiqueta usando o espaço de nome 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 seus rótulos em um componente da Web Lightning.
<!-- myComponent.html -->
< template >
< c-card title = {label.cardTitleLabel} >
{label.loadingLabel}
</ c-card >
</ template > Habilite a bancada de tradução para apoiar traduções em sua organização. Consulte Ativar e desativar a bancada de trabalho de tradução na ajuda do Salesforce. Em seguida, modifique sfdx-project.json para incluir o caminho para os arquivos de tradução, disponíveis na pasta optional .
{
"packageDirectories" : [
{
"path" : " force-app " ,
"default" : true
},
{
"path" : " examples " ,
"default" : false
},
{
"path" : " optional "
}
],
"namespace" : " " ,
"sfdcLoginUrl" : " https://login.salesforce.com " ,
"sourceApiVersion" : " 46.0 "
} Depois de atualizar sfdx-project.json , empurre os arquivos para o seu Scratch Org.
sfdx force:source:pushUtilizamos a estrutura de teste de Jest JavaScript para autoria e executar testes de componentes. Se você modificar qualquer receita de componentes básicos ou adicionar seus próprios componentes, execute testes para verificar suas alterações.
Para seus próprios componentes, adicione os testes a um sub-folder __tests__ da sua pasta componentName e nomeie o componentName.spec.js de teste.spec.js.
Para ilustrar como testar componentes, adicionaremos um teste ao componente Helloworld criado anteriormente.
Crie uma subpasta __tests__ na pasta helloWorld .
Crie um arquivo chamado helloWorld.spec.js em __tests__ .
Insira este código e salve o arquivo.
//__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 Isso executa testes de fiapos e unidades. Consulte o arquivo package.json para todos os testes disponíveis.
Não estamos aceitando contribuições no momento. Se você tiver alguma dúvida sobre as receitas de componentes básicas, use os seguintes canais.
Onde posso ver mais exemplos sobre como usar componentes da Web Lightning?
Como faço para criar um componente da Web Lightning?
Veja o projeto Rick Start: Lightning Web Components Trailhead. O Guia do Desenvolvedor de Componentes da Web Lightning também é um ótimo recurso.
