CoralUI is a library of web components for creating beautiful experiences. Most components in CoralUI are JavaScript components, which offer more functionality and are often more complex.
It is a set of CSS and JS files designed and built for Adobe Cloud products. Coral UI provides a wide range of html components pre-developed for your website like buttons, navigation bar, tool bar-tables, grid, dialogs etc. which saves your time from developing these components.
Example of Coral UI as Javascript component:
- Components/functionalities like accordion/tabs which we usually/previously would have done using HTML markup with some jQuery plugins to bring out the final outcome as accordion/tabs.
- In Coral UI, the same is exposed to us via tags named , and other related tags for a particular feature.
Example of Coral UI as CSS-only component:
- Dialog fields which are in the form of HTML input tag (say pathbrowser/pathfield), has classes named coral-InputGroup, coral-InputGroup-input(targeting input tag), coral-InputGroup-button(targeting the button with icon -> click of which lets us select a path) which has attributes contributing to the look and feel of the field.
Advantages of Coral UI
- Modular :- All the components are developed as modules,that can be used individually, allowing you to use just what you want.
- Icons:- Coral UI prvides a wide range of icons to choose from and are fully customizable according to customer need. It provides around 400+ icons to choose from.
- Open Development:- It is an open development project means it allows every one inside adobe to contribute.
- XD Approved:- All the designs and components are XD approved.
Example:
Create checkbox group using coral UI in Adobe Experience Manager
Picture: Checkbox Image
Following is code to create checkbox which is shown in picture.
References: Read more at AEMCQ5Tutorials: Create Touch UI Component Using Coral UI AEM
Create Touch UI Component Using Coral UI AEM