base components recipes
1.0.0
Просмотреть примеры для базовых компонентов в небольших укусах. Каждый рецепт демонстрирует рабочий пример базовых компонентов для быстрого создания страниц и приложений. Используйте и настраивайте базовые компоненты и рецепты в ваших приложениях.
Рецепты базовых компонентов открывают исходный код для базовых компонентов, показанных в библиотеке компонентов. Мы перенесли базовые компоненты в пространство имен c , чтобы вы могли использовать компоненты в своих проектах. Исследуйте внутреннюю работу компонентов и используйте исходный код для создания новых компонентов с вашими собственными требованиями. Возможности бесконечны с источником в ваших руках!
Доступно только подмножество компонентов в библиотеке компонентов. Для получения дополнительной информации см. Раздел документации.
Базовые компоненты реализуют Salesforce Lightning Design System (SLDS) и разработаны с использованием веб -компонентов Lightning. Компонент пространства имен c может содержать компоненты в пространстве имен lightning .
Рассмотрите возможность использования рецептов базовых компонентов, только если базовые компоненты в пространстве имен lightning не работают для ваших требований. Например, используйте рецепты базовых компонентов, если вам нужно настроить стили базовых компонентов за пределами поддерживаемых механизмов стиля. Список доступных базовых компонентов в пространстве имен lightning , см. Библиотеку компонентов.
Чтобы настроить стили на компонентах пространства имен lightning , мы рекомендуем использовать крючки для стиля SLDS. Для получения дополнительной информации см. Компоненты стиля с SLD.
Мы рекомендуем использовать Scratch Org для работы с рецептами базовых компонентов на платформе Salesforce.
Настройте вашу среду, выполнив шаги в руководстве Dev Lightning Web Components, которое включает в себя:
Аутентифицируйте с вашим Dev Hub Org и предоставьте его псевдонимом, как показано mybaseorg в следующей команде.
sfdx force:auth:web:login -d -a mybaseorggit clone [email protected]:salesforce/base-components-recipes.git
cd base-components-recipesbase-recipes в следующей команде. sfdx force:org:create -s -f config/project-scratch-def.json -a base-recipesЕсли вы получите ошибку «у вас нет доступа к объекту [ScratchorGinfo]», убедитесь, что вы включили свою организацию в качестве Dev Hub Org. Смотрите Enable Dev Hub в вашей организации. В качестве альтернативы подпишитесь на Dev Hub Org по адресу https://developer.salesforce.com/promotions/orgs/dx-signup.
sfdx force:source:pushsfdx force:org:open Создайте веб-компонент Helloworld Lightning, который использует базовый компонент, c-button . В этом примере мы будем использовать Visual Studio Code.
base-components-recipes .force-app/main/default/lwc .helloWorld создается в force-app/main/default/lwc а в редакторе открывается файл helloWorld.js Javascript.helloWorld.js замените контент следующим кодом. Сохраните файл. //helloWorld.js
import { LightningElement , api } from 'lwc' ;
export default class HelloWorld extends LightningElement {
@ api greeting = 'Hello World' ;
}helloWorld.html и замените его контент следующим кодом. Сохраните файл. <!--helloWorld.html-->
< template >
< c-button label = {greeting} title =" greeting " > </ c-button >
</ template >helloWorld.js-meta.xml , замените контент следующим кодом. Сохраните файл. <? 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:pushВаш компонент Helloworld теперь готов к действию. Вы можете добавить этот компонент в свои приложения и страницы через Builder Lightning App. Для получения дополнительной информации см. Проект Quick Start: Lightning Web Components Trailhead.
Базовые компоненты в пространстве имен c предназначены для использования на платформе Salesforce. Тем не менее, мы понимаем желание использовать их в сценариях, не связанных с бездольно. В настоящее время многие компоненты будут работать, но другие не будут, из -за зависимости от платформы Salesforce. Наша цель состоит в том, чтобы предоставить базовые компоненты для вариантов использования, не связанных с Salesforce, и мы создали POC LWC Storybook, чтобы показать, как это может выглядеть в будущем. Пожалуйста, нажмите кнопку «Просмотр» в репо для обновлений по мере продвижения вперед.
Базовые компоненты на карте пространства имен c для компонентов в пространстве имен lightning . Мы перенесли базовые компоненты в пространство имен c , чтобы вы могли использовать компоненты в своих проектах. Найдите базовые компоненты в пространстве имен c в базовых компонентах-Recipes/Force-App/Main/Default/LWC/.
Компоненты ниже ссылаются на документацию для компонентов в пространстве имен lightning , но использование аналогично, если не указано иное.
| Компонент | Описание | Комментарий |
|---|---|---|
| c-accordion | Сборник вертикально сложенных секций с несколькими областями контента. | Этот компонент содержит слоты и не поддерживается как компонент AURA. |
| C-согласование | Один раздел контента. Используйте этот компонент в c-accordion . | Этот компонент содержит слоты и не поддерживается как компонент AURA. |
| C-Avatar | Визуальное представление объекта, такого как учетная запись или пользователь | |
| c-badge | Метка, которая содержит небольшое количество информации, такую как количество непрочитанных уведомлений | |
| C-кнопка | Элемент кнопки, который вызывает действие | |
| C-кнопка-группа | Группа кнопок, которые вызывают подобные действия | |
| C-Button-Icon | Элемент кнопки только для значков, который вызывает действие | Атрибут tooltip не поддерживается. |
| C-Button-ICon-Stateful | Кнопка только для значков, которая сохраняет состояние | |
| C-Button-Menu | Выпадающее меню со списком действий или функций. Используйте этот компонент с c-menu-divider и c-menu-subheader чтобы создать разделители меню и подзаголовки. | Атрибут tooltip не поддерживается. Для атрибута menu-alignment auto выравнивание не поддерживается. Этот компонент ссылается на этикетки на платформе Salesforce. |
| C-кнока | Кнопка, которая переключается между государствами | |
| С-карта | Стилизованный контейнер вокруг группы информации | Этот компонент содержит слоты и не поддерживается как компонент AURA. |
| c-carousel | Коллекция изображений и подписей, которые отображаются по одному. Используйте этот компонент с помощью c-carousel-image | Этот компонент содержит слоты и не поддерживается как компонент AURA. Этот компонент ссылается на этикетки на платформе Salesforce. |
| c-checkbox-группа | Группа флажков, которые позволяют выбирать отдельные или несколько параметров | |
| C-Combobox | Поле ввода только для чтения с раскрывающимся списком для одного выбора | Этот компонент ссылается на этикетки на платформе Salesforce. |
| c-двойная списка | Пара списков, которые позволяют выбрать и переупорядочить несколько параметров | Этот компонент ссылается на этикетки на платформе Salesforce. |
| C-Dynamic-ICON | Набор анимированных значков | |
| C-форматированная дата времени | Пара даты и времени, которые отображаются на основе локали пользователя | |
| C-формат-локация | Пара широты и долготы для местоположения | |
| C-Форматированное имя | Имя, которое отображается на основе локали пользователя, которое определяет формат и порядок составляющих (суффикс, приветствие и т. Д.) | |
| C-формат-номера | Десятичная, валюта или процент, которая отображается базой на локале пользователя | |
| C-формат-телефон | Номер телефона, который открывает приложение по умолчанию VoIP при нажатии | |
| C-формат-текст | Группа текста с опцией для отображения URL -адресов и адресов электронной почты в виде ссылок | |
| C-форматированное время | Значение времени, которое отображается на основе локализации пользователя | |
| C-Formatted-Url | URL, который отображается как ссылка | |
| C-ICON | Визуальный элемент, который обеспечивает контекст и повышает удобство использования | Использование только на платформе Salesforce. |
| C-Input-Location | Пара полей широты и долготы | Этот компонент ссылается на этикетки на платформе Salesforce. |
| c-layout | Система отзывчивой сети | Этот компонент содержит слоты и не поддерживается как компонент AURA. |
| c-layout-item | Контейнер в системе сетки | Этот компонент содержит слоты и не поддерживается как компонент AURA. |
| c-menu-item | Список элемента в меню. Используйте этот компонент в c-button-menu | |
| C-выпуск-поле | Отображение только для чтения метки, текста справки и значения для поля на объекте Salesforce. Используйте этот компонент в c-record-view-form . | Использование только на платформе Salesforce. |
| C-канала | Метка, которая может содержать ссылку и может быть удалена из просмотра | Этот компонент содержит слоты и не поддерживается как компонент AURA. Этот компонент ссылается на этикетки на платформе Salesforce. |
| C-Pill-Container | Список таблеток, сгруппированных в контейнер | Этот компонент ссылается на этикетки на платформе Salesforce. |
| C-Radio Group | Группа радиопроизводительных кнопок, у которых может быть выбрана одна опция | Этот компонент ссылается на этикетки на платформе Salesforce. |
| C-рекорд-редакция | Форма для создания или редактирования записи с одним или несколькими полями | Использование только на платформе Salesforce. Используйте c-record-edit-form с lightning-input-field . Используйте c-messages в форме, чтобы отобразить сообщения об ошибках на стороне сервера. Этот компонент ссылается на этикетки на платформе Salesforce. |
| C-рекордная форма | Форма для создания, отображения или редактирования записи с автоматическим переключением между режимами редактирования и просмотра | Использование только на платформе Salesforce. Этот компонент ссылается на этикетки на платформе Salesforce. |
| C-рекорд-форма | Форма для отображения данных записи. Используйте c-output-field в c-record-view-form . | Использование только на платформе Salesforce. Этот компонент содержит слоты и не поддерживается как компонент AURA. Этот компонент ссылается на этикетки на платформе Salesforce. |
| С-релагиозное время | Группа текста, изображающая, как указанное время относится к текущему времени, например, «несколько секунд назад» или «через 5 лет» | |
| C-Slider | Ползунок входного диапазона, который обеспечивает выбор значения между двумя указанными номерами | |
| C-Spinner | Анимированный прядильщик | |
| c-tab | Одна вкладка в компоненте c-tabset . | |
| c-tabset | Список вкладок. Используйте этот компонент с c-tab . | Этот компонент ссылается на этикетки на платформе Salesforce. |
| C-Textarea | Поле Textarea для многострочного текстового ввода | Этот компонент ссылается на этикетки на платформе Salesforce. |
| C-Tile | Группа связанной информации, связанной с записью | Этот компонент содержит слоты и не поддерживается как компонент AURA. Этот компонент ссылается на этикетки на платформе Salesforce. |
| С-дерево | Визуализация структурной иерархии с вложенными предметами, которые могут быть свернуты или расширены. Используйте этот компонент с c-tree-item . | Этот компонент ссылается на этикетки на платформе Salesforce. |
| C-вертикальная навигация | Вертикальный список ссылок, которые можно сгруппировать в разделы с использованием c-vertical-navigation-section | Этот компонент содержит слоты и не поддерживается как компонент AURA. Этот компонент ссылается на этикетки на платформе Salesforce. |
| C-вертикальная навигация-элемент | Ссылка только для текста в c-vertical-navigation-section или c-vertical-navigation-overflow | |
| C-вертикальная навигация-бит | Ссылка и значок в рамках c-vertical-navigation-section или c-vertical-navigation-overflow | |
| C-вертикальная навигация-item-icon | Ссылка и значок в рамках c-vertical-navigation-section или c-vertical-navigation-overflow |
Вы можете создать до 5000 пользовательских маркеров для вашей организации, и они могут составлять до 1000 символов. Создайте пользовательские метки, которые вы можете использовать в своих веб -компонентах Lightning.
Чтобы обновить пользовательские метаданные метки, перейдите в каталог force-app/main/default/labels . Метки доступны в файле lightning.labels-meta.xml . Для синтаксиса и примера определения CustomLabels см. Руководство по API DEV Metadata.
Добавьте этикетки для ваших пользовательских компонентов в файле 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 >Чтобы настроить свои метки, из настройки, введите пользовательские этикетки в поле Quick Find, затем выберите пользовательские метки . Наши ярлыки поставляются на английском языке и могут быть переведены на другие языки. Для получения дополнительной информации см. В разделе «Transate Labels ниже» и пользовательские этикетки в Salesforce Help.
Импортируйте этикетки из модуля @salesforce/label Scoped. Ссылка на имя вашей метки с помощью пространства имен 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
} ;
}Используйте свои этикетки в компоненте Lightning Web.
<!-- myComponent.html -->
< template >
< c-card title = {label.cardTitleLabel} >
{label.loadingLabel}
</ c-card >
</ template > Позвольте переводу Workbench для поддержки переводов в вашей организации. См. Включите и отключите перевод Workbench в Salesforce Help. Затем измените sfdx-project.json , чтобы включить путь для файлов перевода, которые доступны в optional папке.
{
"packageDirectories" : [
{
"path" : " force-app " ,
"default" : true
},
{
"path" : " examples " ,
"default" : false
},
{
"path" : " optional "
}
],
"namespace" : " " ,
"sfdcLoginUrl" : " https://login.salesforce.com " ,
"sourceApiVersion" : " 46.0 "
} После обновления sfdx-project.json , нажмите файлы в свою царапину.
sfdx force:source:pushМы используем структуру тестирования Jest JavaScript для автора и запустить тесты компонентов. Если вы измените какие -либо рецепты базовых компонентов или добавляете свои собственные компоненты, запустите тесты, чтобы проверить ваши изменения.
Для ваших собственных компонентов добавьте тесты в подразделение __tests__ вашей папки componentName и назовите тестовый componentName.spec.js .
Чтобы проиллюстрировать, как протестировать компоненты, мы добавим тест в компонент Helloworld, созданный ранее.
Создайте подпалку __tests__ в папке helloWorld .
Создайте файл с именем helloWorld.spec.js в __tests__ .
Вставьте этот код и сохраните файл.
//__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 Это запускает Lint и модульные тесты. См. Файл package.json для всех доступных тестов.
В настоящее время мы не принимаем взносы. Если у вас есть какие -либо вопросы о рецептах базовых компонентов, используйте следующие каналы.
Где я могу увидеть больше примеров того, как использовать веб -компоненты Lightning?
Как создать компонент Lightning Web?
Смотрите проект быстрого начала: Trailhead Project Lightning Web Components. Руководство разработчика Lightning Web Components также является отличным ресурсом.
