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 providesAll
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.<!-- EasyEdit HTML in View mode -->
<div class="easy-edit-wrapper">Click to edit</div>
<!-- EasyEdit HTML in View mode while hovering over it -->
<div class="easy-edit-hover-on easy-edit-wrapper">Click to edit</div>
<!-- EasyEdit HTML in View mode when allowEdit is set to false -->
<div class="easy-edit-not-allowed easy-edit-wrapper">Can't edit me</div>
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.<div class="easy-edit-wrapper">
Click to edit
<div class="easy-edit-view-button-wrapper">
<button class="easy-edit-button" name="edit">Edit</button>
</div>
</div>
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.<!-- EasyEdit HTML in Edit mode -->
<div class="easy-edit-inline-wrapper" tabindex="0">
<div class="easy-edit-component-wrapper">
<input type="text" placeholder="Click to edit" autocomplete="off" value="">
</div>
<div class="easy-edit-button-wrapper">
<button class="easy-edit-button" name="save">Save</button>
<button class="easy-edit-button" name="cancel">Cancel</button>
</div>
<div class="easy-edit-instructions">Click save to see what happens</div>
<div class="easy-edit-validation-error">What just happened?</div>
</div>
Each component is wrapped around a div with the class
easy-edit-component-wrapper.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 instructionsAll buttons ("Save", "Cancel", "Delete and "Edit") have a default class added to them which is
easy-edit-button.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 modified 1mo ago