EverrightAbout the editor
The constituent region of the editor
1.Fields panel
The field panel provides two ways to add fields: clicking (the form canvas will automatically scroll to the bottom) and dragging (to generate a row or column). Once a field is added to the canvas, it will be automatically selected, and the configuration panel will display all the properties of the field, allowing users to easily change these properties, such as field name, field type, options, etc. Additionally, other properties, such as validation rules, default values, and layouts, can also be set for the field in the properties panel.
2.Form canvas
The form canvas is the main workspace of Everright-formEditor and provides an intuitive way to build and design forms. In the form canvas, interactive operations such as drag-and-drop and click can be used to easily add, delete, and move form fields.
3.properties panel
The configuration area for field properties is a region used to adjust the properties of a field. When a field is added or selected in a form, its properties are displayed in the properties panel, allowing users to easily modify and configure these properties. This includes general options (such as field name, field type, required), validation options (such as minimum and maximum values), and layout options (such as field width, label position, margin). Using the properties panel, users can quickly set and change various properties of fields.
4.Breadcrumb
Although the tree structure is not currently displayed, users can use breadcrumbs to locate the current field and select its parent. By clicking on the parent field in the breadcrumbs, users can select the entire block or group to view its properties and make changes.
5.Selection
Selection is a very important concept in Everright-formEditor. When a field is selected, it is highlighted on the canvas panel.
Selection provides the following features:
Move, copy, delete, resize, select parent, group, and ungroup (in a table container, there are also insert row/column or merge cells and split cells).
6.Operation area
The operation area provides some common function buttons, including clear, save, preview, and multilingual buttons. It can also accept slots for custom buttons or additional functionalities.