InlineEdit is a wrapper component for switching between viewing and editing data.
Use this component when:
- you need to switch between view-only and text editing without reloading the page (for example, edit the title, description or tag);
- data in the interface is placed tightly, you need to save space;
- transferring data to the system is not the main task of the interface (for example, additional information and notes in cards).
The component consists of:
- wrapper over an input;
- trigger (it can be any necessary component - text or tag, for example);
- input of any type.
Note that the example below is just an example. It's not a default variant. Any control component can be used as a trigger - a button, an icon, text with an icon.
The color of the placeholder is the same as a regular input has -
--text-placeholder. Text and icon has one active zone.
- The user has clicked a trigger that opens an Input.
- Input immediately receives focus.
- The user enters data. Either saves the data, or using the cancel button /
Esckey returns from edit mode to view mode.
- When focus is lost (for example, the user is distracted by another screen),
onBlurpersists the entered value.
Below you can see an example of how such a component works with one of the possible triggers.
|Normal||The color of the placeholder is the same as a regular input has -
|Hover||Cursor changes to
|Focus||Show the input you need for data entry (normal, textarea, select, color-picker, time-picker, etc.).|
|Entered data||Text color is
|Entered data with hover||Cursor changes to
The transition between the wrapped trigger and the input can be done with an
In view-mode, set the text size to the same size as the edit input you selected.
For example, if the heading you need to edit has 24px font-size, then it should also be 24px when you enter edit mode.