Drag-and-Drop Components

Learn how to use the drag-and-drop interface to build your applications in Wayvo.

Drag-and-Drop Components

The drag-and-drop interface in Wayvo allows you to build your application's user interface quickly and intuitively. Here's how you can make the most of this feature.

Adding Components to the Canvas

1. Open the Component Library

   • Access the component library from the left sidebar of the workspace.

2. Browse Components

   • Use the search bar or browse through categories to find the components you need.
   • Categories include forms, buttons, charts, tables, and more.

3. Drag and Drop

   • Click and hold the component you want to add.
   • Drag it onto the canvas and release it to place it.

Arranging Components

1. Move Components

   • Click and drag components around the canvas to reposition them.
   • Use the grid layout to align components precisely.

2. Resize Components

   • Click on a component's edge or corner and drag to resize it.
   • Adjust the size to fit your design requirements.

3. Layering Components

   • Use the right-click menu to bring components to the front or send them to the back.
   • Manage the stacking order to ensure components are layered correctly.

Customizing Components

1. Select a Component

   • Click on a component to open the properties panel.

2. Configure Properties

   • Adjust properties such as size, color, text, and behavior in the properties panel.
   • Use the data binding options to connect components to data sources.

3. Add Event Handlers

   • Define actions in response to user interactions (e.g., clicks, hovers).
   • Use the event handler section in the properties panel to set up these interactions.

Grouping and Ungrouping Components

1. Group Components

   • Select multiple components by holding down the Shift key and clicking on each one.
   • Right-click and choose "Group" to group them together.

2. Ungroup Components

   • Select a group of components.
   • Right-click and choose "Ungroup" to separate them.

Using Pre-Built Layouts

1. Access Layout Templates

   • Open the layout templates from the component library.

2. Apply a Layout

   • Drag a layout template onto the canvas to quickly set up a pre-defined layout.
   • Customize the layout by adding, removing, or rearranging components.

Best Practices for Using Drag-and-Drop Components

1. Plan Your Layout

   • Before adding components, plan your layout to ensure a logical and user-friendly design.
   • Consider the flow of information and user interactions.

2. Use Consistent Styles

   • Maintain consistent styles for similar components to create a cohesive look.
   • Use the properties panel to apply consistent color schemes, fonts, and sizes.

3. Test Regularly

   • Regularly test your design in preview mode to ensure everything works as expected.
   • Make adjustments as needed based on user feedback and testing results.

Next Steps

With your components in place, you can start connecting them to data sources and adding functionality. Explore our guides on Data Binding and Management and Workflow Automation to enhance your application's capabilities.

For more advanced customization options, check out our Advanced Features section.