Awesome
<p align="center"><img height="200px" src="https://github.com/Liberty-liu/Liberty-liu/assets/21301475/9922bb46-b7a4-48e8-a087-a93ea48b3e32"></p> <h1 align="center">Everright-formEditor</h1>简体中文 | English
Everright-formEditor is a free and open source javascript visual low-code editor. It can create forms with simple operations through the GUI interface. It has a flexible interaction. The PC depends on element-plus while the mobile depends on vant. There is a set of adapters to convert parameters into ones that can be recognized by both element-plus and vant.
<img width="100%" src="https://user-images.githubusercontent.com/21301475/249369687-e79780b5-cdb8-4d2b-bdca-8ff59d9026e2.gif">Features
- 1.Support Chinese and English
- 2.Support Pc and Mobile
- 3.Rich fields and layout containers
- 4.Flexible interaction
- 5.Fields and layout separated
- 6.Fields and layout not separated
- 7.The editor, previewer, and configuration panel can all be used separately
- 8.Logical controller (Visible, Required, Read only)
Docs
Examples
- Editor
layoutType1: Fields and layout not separated
- Editor
layoutType2: Fields and layout separated
- Preview
layoutType1: Fields and layout not separated
- Preview
layoutType2: Fields and layout separated
- Config panel
Various properties for displaying and editing form fields are provided, including basic information, types, layouts, and so on
Screenshot
Logical controller
Fields adaptation
Type | Pc | Mobile |
---|---|---|
Input | :white_check_mark: | :white_check_mark: |
:white_check_mark: | :white_check_mark: | |
ID | :white_check_mark: | :white_check_mark: |
Cellphone | :white_check_mark: | :white_check_mark: |
URL | :white_check_mark: | :white_check_mark: |
Textarea | :white_check_mark: | :white_check_mark: |
Number | :white_check_mark: | :white_check_mark: |
Radio | :white_check_mark: | :white_check_mark: |
Checkbox | :white_check_mark: | :white_check_mark: |
Select | :white_check_mark: | :white_check_mark: |
Time | :white_check_mark: | :white_check_mark: |
Date | :white_check_mark: | :white_check_mark: |
Rate | :white_check_mark: | :white_check_mark: |
Switch | :white_check_mark: | :white_check_mark: |
Slider | :white_check_mark: | :white_check_mark: |
Html | :white_check_mark: | :white_check_mark: |
Cascader | :white_check_mark: | :white_check_mark: |
File | :white_check_mark: | :white_check_mark: |
Signature | :white_check_mark: | :white_check_mark: |
Region | :white_check_mark: | :white_check_mark: |
Containers adaptation
Type | Pc | Mobile |
---|---|---|
Grid | :white_check_mark: | :white_check_mark: |
Table | :white_check_mark: | :x: |
Tabs | :white_check_mark: | :white_check_mark: |
Collapse | :white_check_mark: | :white_check_mark: |
Divider | :white_check_mark: | :white_check_mark: |
Subform | :white_check_mark: | :white_check_mark: |
Logical controller operator
Field | Equal | Not equal | Contains | Not contain | Greater than | Greater than or equal to | Less than | Less than or equal to | Between | Equal to one of | Not equal to one of | Belong to one of | Not belong to one of | Empty | Not empty |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Input | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |||||||||
:white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | ||||||||||
ID number | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |||||||||
Cellphone | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |||||||||
URL | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |||||||||
Textarea | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |||||||||
Number | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | ||||||
Radio | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |||||||||
Checkbox | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |||||||||
Select | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |||||||||
Time | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | ||||||
Date (date) | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | ||||||
Date (datetime) | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | ||||||
Date (dates) | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |||||||||
Date (daterange) | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |||||||||||
Rate | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | ||||||
Switch | :white_check_mark: | :white_check_mark: | |||||||||||||
Slider | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | ||||||||
Html | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |||||||||
Cascader | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |||||||||||
File | :white_check_mark: | :white_check_mark: | |||||||||||||
Signature | :white_check_mark: | :white_check_mark: | |||||||||||||
Region | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | |||||||||
Subform | :white_check_mark: | :white_check_mark: |
Contributors
This repo exists thanks to all the people who contributed.<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Clapping%20Hands.png" alt="Clapping Hands" width="25" height="25" />
<a href="https://github.com/Liberty-liu/Everright-formEditor/graphs/contributors"> <img src="https://contrib.rocks/image?repo=Liberty-liu/Everright-formEditor" /> </a>