Styling
To ensure that the library will not style any other elements on a page, all CSS classes are prefixed with`easy-edit-`
. If would like to style all EasyEdit
components then you could overwrite all the default classes that the library provides
Viewing
All EasyEdit
components are wrapped around a div with the class easy-edit-wrapper
in it. If the component's allowEdit
prop is set to false, then class easy-edit-not-allowed
is added to the wrapper div which just changes the mouse cursor to 🚫 (not allowed). In case of hovering over it, the class easy-edit-hover-on
is appended to it which changes the cursor to 👆 (pointer) and applies an italic style to the placeholder/value.
Viewing with Edit button
When the hideEditButton
prop is set to false
, the "Edit" button is visible while the component is in its View state wrapped in a div with the easy-edit-view-button-wrapper
css class in it.
Editing
Things become a bit more complicated in edit mode. As before, all EasyEdit
components are wrapped around a div with the class easy-edit-inline-wrapper
in it but this time, we have a few more containers.
Component
Each component is wrapped around a div with the class easy-edit-component-wrapper
.
Instructions
If provided, a div with the class easy-edit-instructions
will be generated and placed within the main container. In not then no div container will be generated for instructions
Buttons
All buttons ("Save", "Cancel", "Delete and "Edit") have a default class added to them which is easy-edit-button
.
Validating
If validation fails on an EasyEdit
component, then a validation message is shown back to the user which is wrapped around a div with the class easy-edit-validation-error
. By default, the styling that's applied to the component just changes the font colour to red.
Last updated