AEM WCM 组件 - 反应 核心执行
本单元提供对 AEM 核心组件。 。 。 . 这使得您能够使用核心组件 : - 在那个 AEM SPA 编辑器 与反应 -进来 反应网络组件 -或者在任何其他反应上下文中,只要您有即时化组件所需的输入.
当前支持/ 导出组件 :
页面作者
- 按钮( V1 )
- 下载( V1)
- 图像 (V2)
- 名单(V2)
- 分隔符 (V1)
- 茶叶( V1)
- 文本( V2)
- 标题(V2)
版式
- 面包屑( V2)
- 语言导航( V1)
- 导航( V1)
抽象
- 抽象组件
- 核心组件模块(界面)
集装箱
对于集装箱(Accordion、Tabs、Carousel、Container),我们不提供该项目的任何执行. 提供网络组件是没有道理的,因为您可以利用正常的核心组件,如Tab容器,并将您的网络组件拖入其中. 相反,我们只为SPA编辑提供它们,引入了依赖性,因此我们把它变成一个 单独项目。 。 。 .
使用量
您可以选择立即导入整个库 OR 单独导入组件 . 后者是有用的,如果您想要启用一些组件,并且您想要保存您的 Javascript 脚印. 另外,如果想要加载所有的核心组件,但是要用反应悬念来懒地加载,则需要单独导入.
导入整个库 :
import * as BaseCoreComponents from "@adobe/aem-core-components-react-base";
const {ButtonV1, ButtonV1Model, ButtonV1IsEmptyFn} = BaseCoreComponents;
单独导入按钮组件 :
import ButtonV1, {ButtonV1Model, ButtonV1IsEmptyFn} from "@adobe/aem-core-components-react-base/dist/authoring/button/v1/ButtonV1";
使用导入代码
现在您已经导入了按钮和按钮V1IsEmptyFn, 您可以在您的项目中使用它们 . 1上的按钮1的属性对应了斯林模型输出器(.model.json)输出.
注:有些例外,有些额外的属性被添加(主要是i18n标签),目前在OOTB sling模型导出中并不存在. 这些项目可以由项目本身加上授权。 如果它们不存在,则会使用默认值(英文).
按键 - 有 TypeScript 的直接即时处理 :
const modelProps:ButtonV1Model = {
text: 'Example Button',
link: '/content/my/awesome/page.html',
icon: 'iconCssCLass'
};
const html:JSX.Element = (<ButtonV1 {...modelProps}/>);
按键 - 温泉编辑器示例 :
MapTo('my-project/wcm/components/button')(ButtonV1, {isEmpty: ButtonV1IsEmptyFn});
关于完整的项目,请访问 github 页面。 。 。 .