How to use coral ui in making simple form component ?

Avatar

Avatar
Validate 1
Level 2
rishabhkrishan
Level 2

Likes

5 likes

Total Posts

17 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 2
rishabhkrishan
Level 2

Likes

5 likes

Total Posts

17 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
rishabhkrishan
Level 2

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
Coach
MVP
Arun_Patidar
MVP

Likes

1,442 likes

Total Posts

3,322 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,442 likes

Total Posts

3,322 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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
Give Back 5
Employee
rmahendra
Employee

Likes

26 likes

Total Posts

39 posts

Correct reply

14 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Boost 5
Boost 3
View profile

Avatar
Give Back 5
Employee
rmahendra
Employee

Likes

26 likes

Total Posts

39 posts

Correct reply

14 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Boost 5
Boost 3
View profile
rmahendra
Employee

12-12-2018

Have you checked Documentation | CoralUI  ?

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,049 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,049 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

12-12-2018

Why a custom component ? What is the use case ?

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

12-12-2018

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

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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.