Coral UI Element In HTML

user_2560981 0
Viewed 870

I am trying to apply Coral UI elements in my HTML file of component as below.

<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>

But this render the content as plain text on page with no style. I took the reference from here.https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/coralui3/Coral.PanelStack.html

Can you please tell me how Can I display the panel type of style on html.

Thanks

aem
1 Answers

You need to load additional java script libraries and styles in order to use coral ui in your pages/components.

Note also that AEM does it out of the box for dialogs (dialogs are in different frame), but for components on page you need to import coralui3 clientlib. You can do it in many ways, here are some of them:

  1. via content policies
  2. configure coralui3 client lib as dependency to already attached clientlibs
  3. import coralui3 clientlib directly in your html

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

user_63248760
Related