How to use coral ui in making simple form component ?

Avatar

Avatar

rishabhkrishan

Avatar

rishabhkrishan

rishabhkrishan

12-12-2018

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.

Accepted Solutions (0)

Answers (5)

Answers (5)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

13-12-2018

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.

Avatar

Avatar

rmahendra

Employee

Avatar

rmahendra

Employee

rmahendra
Employee

12-12-2018

Have you checked Documentation | CoralUI  ?

Avatar

Avatar

Veena_Vikram

MVP

Avatar

Veena_Vikram

MVP

Veena_Vikram
MVP

12-12-2018

Why a custom component ? What is the use case ?

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

12-12-2018

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

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

12-12-2018

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.