Layouts
With the use of a graphical user interface (GUI), you can effortlessly create layouts based on CSS. Additionally, you have the flexibility to tailor attributes based on screen size, allowing you to implement layouts that adapt to a variety of screen sizes and devices.
Create Node
| Button | Description | Shortcut |
|---|---|---|
| Select Parent Node | Ctrl + ↑ | Meta + ↑ | |
| Add Node Down | Enter | |
| Add Node Up | ||
| Add Child Node(Into Node) | Ctrl + Enter | |
| Add Parent Node | ||
| Remove Node | Delete | Backspace | |
| Remove Parent Node | ||
| Copy Node | Ctrl + C | Meta + C | |
| Copy & Remove Node | Ctrl + X | Meta + X | |
| Paste Node | Ctrl + V | Meta + V | |
| Add Widget | ||
| Remove Widget | ||
| Add Marker(Comment) | ||
| Remove Marker |
Config Node
| Field | Value | Description |
|---|---|---|
| type | 'stack' | 'grid' | flex or grid |
| direction | 'vertical' | 'horizontal' | flex-direction |
| columns | number | grid golumn length |
| gap | px | node spacing |
| mainAxis | 'start' | 'center' | 'end' | 'between' | align-items |
| crossAxis | 'start' | 'center' | 'end' | 'between' | justify-content |
| hidden | boolean | display hidden |
| width | px | width |
| height | px | height |
| maxWidth | px | max-width |
| padding | px | padding |
| transparent | boolean | background white |
| position | 'relative' | 'absolute' | 'sticky' | 'fixed' | position |
| inset | px | left, top, right, bottom |
Responsive Field
The responsive layout feature involves configuring node properties differently for two screen sizes: large and small screens.
For instance, the button's properties are defined from 0px up to the specified breakpoint, while the button's properties span from the breakpoint to the maximum screen size.
Widgets
Clicking this button displays the widget configuration window, where you can input the widget's name, description, HTML, and CSS.
| Button | Description |
|---|---|
| Add Widget Groups (Enter the group name to differentiate) | |
| Add Widget | |
| Open widget settings window (Enter the widget name, description, html, css) | |
| Display widgets as thumbnails | |
| Display widgets as list | |
| Display CSS code for widgets | |
| Save the widget model to include the widgets in the widget list of the page configuration mode. |
Utils
| Button | Description |
|---|---|
When using iframe, emit message the page model to the parent window. {
type: 'saveProject',
pages: [...],
widgetGroups: [...]
}
| |
| Load the pageModel(=data.json) to make it available for use in the editor. | |
| Adjusts the horizontal size of the canvas area. | |
| Displays a padding area for convenient editing. It does not affect the actual pageModel. | |
| Displays a border for convenient editing. It does not affect the actual pageModel. To remove the border when downloading HTML, long-press the HTML button and uncheck 'Show outline. | |
| Displays a hidden area for convenient editing. It does not affect the actual pageModel. | |
| Displays a marker for convenient editing. It does not affect the actual pageModel. | |
| You can download the HTML. Long-press to access the settings. | |
| You can download the pageModel(json). | |
| You can display the widgets used on the page. |