Photo by Eddie Kopp on Unsplash

REACT DIGITAL GARDEN

What is new in My Digital Garden Last Month — (in Mar 2022)

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
Smart Layout Basic

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store