Question

我正尝试在组件的HTML文件中应用Coral UI元素，如下所示。

<coral-panelstack class="coral-Well" id="panelListPreselectedItem">
    <coral-panel>Panel 0: This is the content of Panel 1</coral-panel>
    <coral-panel selected>Panel 1: This is the content of Panel 1. There are more Panels defined in the PanelStack !</coral-panel>
    <coral-panel>Panel 2: This is the content of Panel 2</coral-panel>
    <coral-panel>Panel 3: This is the content of Panel 3. You need JavaScript to interact with this component</coral-panel>
    <coral-panel>Panel 4: This is the content of Panel 4</coral-panel>
</coral-panelstack>

但是这会将内容呈现为页面上的纯文本，没有样式。我从这里获取了参考。https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/coralui3/Coral.PanelStack.html

能告诉我如何在html上显示样式的面板类型。

谢谢

Answer 1

您需要加载其他Java脚本库和样式，以便在页面/组件中使用coral ui。

还请注意，对于对话框（对话框在不同的框架中），AEM是开箱即用的，但是对于页面上的组件，您需要导入coralui3 clientlib。您可以通过多种方式进行操作，以下是其中一些：

通过内容政策
将coralui3客户端库配置为已附加的依赖项客户端库
直接在您的html中导入coralui3 clientlib

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"/> <sly data-sly-call="${clientlib.all @ categories='coralui3'}"/>

HTML中的珊瑚UI元素

1 个答案: