Aem HTML中的Coral UI元素

我正在尝试在我的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>

面板0：这是面板1的内容
面板1：这是面板1的内容。PanelStack中定义了更多面板！
面板2：这是面板2的内容
面板3：这是面板3的内容。您需要JavaScript与该组件交互
面板4：这是面板4的内容

但这会将内容呈现为页面上的纯文本，没有样式。我从这里取了参考资料

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

---

谢谢

为了在页面/组件中使用coral ui，您需要加载额外的java脚本库和样式

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

通过内容策略

将coralui3客户端库配置为已连接的依赖项 客户端库

直接在html中导入coralui3 clientlib