There are two modes, read for displaying the value, and edit for enabling control component.
In edit mode, control can be any component, recommended ones are shown in common examples.
Action are default buttons shown in edit mode for save and cancel. It is displayed by default but it can also be hidden. The save and cancel function can be triggered using other components, checkout this example.
Used when there is adjacent component that should be pushed when actions appear.
It can also be used with width="fluid"
to fill space.
Applies popover to actions. Actions will be absolute positions.
Example below shows actionLayout='none'
with custom button inside control for saving.
For more specific use case checkout using custom read and edit component.
The placement of the save and cancel buttons can be controlled in the same way Popover directions are handled. The most common examples are right bottom and bottom left.
In InlineEdit component, there is a default placeholder text is Enter value
. You can override this using placeholder
prop.
This placeholder is both used in the read component and the edit component.
Decorations are used to draw attention to users for click action and when there are too many items fighting for attention, it becomes a distraction - when page has multiple Inline Edit components, be conservative of the decorations.
When the InlineEdit component is lower than tertiary action, do not use decorations.
You can add custom content and complex control for the InlineEdit.