REACT DIGITAL GARDEN
What is new in My Digital Garden Last Month — (in Mar 2022)
Every month I give updates in my digital garden. In March, I focused mainly on smart layout concepts. It can be used for NodeCode Development
Smart Layout
Here you will find a quick demonstration. This is a sample Smart Layout application. I used Smart Layout capability for NoCode development.
SmartLayout allows users to define dynamic layouts and components within them. You can;
- add columns and rows layout container,
- aligning and ordering components
GitHub Explorer — (SubTree)
Here you will find a quick demonstration. This is a sample GitHub Explorer — (SubTree) application.
With this feature, it is possible to focus on the desired folder in GitHub Repository and show only the contents of the relevant folder.
Smart Layout With Text
Here you will find a quick demonstration. This is a sample Smart Layout with Text application. I used Smart Layout capability for NoCode development.
SmartLayout allows users to define dynamic layouts and components within them. You can;
- add columns and rows layout container,
- aligning and ordering components
- adding TextInput and update TextContent
Smart Layout TreeView
Here you will find a quick demonstration. This is a sample Smart Layout Tree View application. I used Smart Layout capability for NoCode development.
It allows users to see SmartLayout hierarchical component and container structure in TreeView.
Smart Layout Meta Display
Here you will find a quick demonstration. This is a sample Smart Layout Meta Display application. I used Smart Layout capability for NoCode development.
In this application you can export the Layout Meta-Model and use anywhere you want.
Smart Layout Selection
Here you will find a quick demonstration. This is a sample Smart Layout Selection application. I used Smart Layout capability for NoCode development.
It allows users to select any element on SmartLayout Canvas or on Component Tree. The selected one appears differently from the other components. (*selected comp displays with red border)
Tab Visibility Optimization
Here you will find a quick demonstration. This is a sample Re-Render (Tab Visibility Optimization) application.
When the browser's tab changes or detects tab visibility and stops Animation, unwanted requests, or UI updates. So it improves your pages performance.
Smart Layout Dnd
Here you will find a quick demonstration. This is a sample Smart Layout Dnd (Drag and Drop) application. I used Smart Layout capability for NoCode development.
It allows users to design components with drag & drop.
- In Design Mode, Choose Toolbar Tab;
- Select a Component and Drag to any Container in SmartLayout Canvas.
- When the component is dropped, the container detects the dropped component and adds to itself.
- Then you can also see in Layout Tree hierarchy,
- Then you can select and edit the component or layout properties.
Smart Layout Compound Comps
Here you will find a quick demonstration. This is a sample Smart Layout Compound Components application. I used Smart Layout capability for NoCode development.
It allows users to define compound components in toolbar. For example;
- a Row Container which holds two Column Containers
So developers can use Smart Layout with a Container which holds other containers. It helps users to design the shortest path. With compound component 3 steps will become 1 step.
Smart Layout Dnd Highlights
Here you will find a quick demonstration. This is a sample Smart Layout Drag and Drop application. I used Smart Layout capability for NoCode development.
SmartLayout helps drag-drop operation with highlighting drop zones. When dropped, the layout highlights possible containers with green color.
Let’s continue reading 😃
You can find similar samples and writings at this link. If you like this story. Please 👏👏 and share
