Ecl Webcomponents playground

Use the editor to insert the content you want. To include Ecl components, click on the Ecl button in the toolbar or click on the paragraph symbol appearing on the left, find the desired component and click on its icon, a popover with a form where you can edit all the available attributes will appear, once you click on the green tick the element will be inserted in the editor
For simple components you will see in the editor something that will look like the real component, but it's just a mock of it, the styles are coming from the main Ecl css that has been included in this page for this purpose.

Ecl components can have a hierarchical structure, in these case after submitting the parent form, the Ui will help you identifying the component in the editor. You can start creating children by clicking on the right button in the toolbar and submitting the related form.
Children components usually expect content to be inserted, you can start typing it right after submitting the form. You can also insert Ecl components as content of another, unrelated Ecl component, in specific cases. In the page header you can insert the breadcrumb as its content, for example.
Navigating inside children components can be done via the keyboard arrows, when components do not have any content they might not be selectable with the mouse, the plugin is currently taking over the behaviour of the arrow up to simplify traversing the Ecl components structure. This might not work properly in certain situations.

  • If the component supports the content inserted by the user you can type in the editor right after submitting the form
  • To move out of the component press enter
  • If the component has children, once the parent has been created you can start inserting the fist child
  • to move out a children component editing click enter, you can then insert another child
  • components can be edited, to change any of the attributes click on the toolbar button relative to the component you want to edit and submit the form with the updated values.

PREVIEW