Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

How to use coral ui in making simple form component ?

Avatar

Level 2

I have started with Coral UI and have gone through its documentation. However, I am unable to find the starting point.

I have also tried making custom component and pasting coral UI markups given in documentation. Its not showing up properly. For example, I have used following code in my custom component html script:

<table class="coral-Table coral-Table--hover">

  <thead class="coral-Table-Head">

    <tr class="coral-Table-row">

        <th class="coral-Table-headerCell">FirstName</th>

            <th class="coral-Table-headerCell">LastName</th>

            <th class="coral-Table-headerCell">PhoneNo</th>

        </tr>

    </thead>

    <tbody class="coral-Table-body">

    <tr class="coral-Table-row">

        <td class="coral-Table-cell">Rishabh</td>

            <td class="coral-Table-cell">Krishan</td>

            <td class="coral-Table-cell">9454117031</td>

        </tr>

        <tr class="coral-Table-row">

        <td class="coral-Table-cell">Krishna</td>

            <td class="coral-Table-cell">Kumar</td>

            <td class="coral-Table-cell">9545675429</td>

        </tr>

    </tbody>

</table>

only table is displayed but no hovering. Please Help.

6 Replies

Avatar

Level 10

Coral API is not meant to go into Production. Its meant for Author and to build out component dialogs or AEM UI.  So Coral API is not meant to build a custom component that is rendered in an AEM web page.

Avatar

Level 1
can you please send me a sample code for whole component built in Coral UI

Avatar

Level 10

To build out custom components - you can use a lib such as Bootstrap.

Avatar

Community Advisor

Why a custom component ? What is the use case ?

Avatar

Community Advisor

Hi,

Rishabh Coral/Granite framework is created for AEM UI. In case if you want to create an utility page/landing page then you can use those frameworks but for your own website or customer facing, it is not recommended.

The reason for not working coral UI in custom components is, the supporting JS/CSS won't be available or loaded.



Arun Patidar