Rule List API

This component is using ShadowDOM.

API Reference e-rulelist-group

HTML Attributes API

Name Description Type Required Default value
closed Set the group to open or closed boolean false
readonly Removes the actions from the header and the footer boolean false

JavaScript API

Name Type Description Arguments
closed Set the rulelist group to closed.

Slots

Using slots in Shadow DOM allows developers to create customizable web components by defining insertion points within a component's template. Slots enable dynamic content insertion, providing flexibility for users to inject content into predefined areas of a component. They serve as placeholders that can be filled with different elements based on the context or user preferences, enhancing reusability and maintainability of web components.
Most of the slots are using a flex display by default, with a small gap between elements. You can easily override this behaviour by wrapping the contents of your slot in a <div> element.
Name Description
header This slot is for the header.
header-action This slot is for the actions of the header.
feedback This slot should contain feedbacks like notification, illustrated message or a spinner.
items This slot should contain only e-rulelist-item and e-rulelist-group components.
footer This slot is for the footer.
footer-action This slot is for the action of the footer.


API Reference e-rulelist-item

HTML Attributes API

Name Description Type Required Default value
open Set the group to open or closed boolean false
readonly Removes the actions from the summary boolean false

JavaScript API

Name Type Description Arguments
open Set the rulelist-item open.

Slots

Using slots in Shadow DOM allows developers to create customizable web components by defining insertion points within a component's template. Slots enable dynamic content insertion, providing flexibility for users to inject content into predefined areas of a component. They serve as placeholders that can be filled with different elements based on the context or user preferences, enhancing reusability and maintainability of web components.
Most of the slots are using a flex display by default, with a small gap between elements. You can easily override this behaviour by wrapping the contents of your slot in a <div> element.
Name Description
open This slot is for replace the default edit button and remove it funcionality as well.
close This slot is for replace the default close button and remove it funcionality as well.
summary This slot is for the rulelist-item's summary.
summary-action This slot is for the rulelist-item summary-actions, but not override the default open and close icons.
summary-action-default This slot overrides the default open and close icons. Leave it empty to remove the default open/close button.
header This slot is for the rulelist-item header.
content This slot contains the items that is in editing status.
footer-action This slot is for the actions in the footer section of the rulelist-item.
relation This slot should contains the relation between items.

Events

Event Description Returns
open Fires when a rulelist-item is opened (click on edit button).
close Fires when a rulelist-item is closed (click on close button).