2. UI Design: Adding Components and Layout
Effective UI design is crucial for a great user experience. Thunkable makes it easy to add and arrange components visually.
2.1. Adding Basic UI Components
In the Design Tab, drag components from the "Components" panel onto your screen. Common components include:
- Button: For user interaction.
- Label: To display text.
- Image: To show pictures.
- Text Input: To get user input.
- Switch: For toggling options.
Once a component is on the screen, select it to view and modify its properties in the "Properties" panel.
2.2. Arranging Components with Layouts
Layout components help you organize other components neatly. Key layout types:
- Column: Arranges components vertically.
- Row: Arranges components horizontally.
- Container: Groups components together.
- Space: Adds empty space between components.
Drag a layout component onto your screen, then drag other UI components inside it. Use the properties panel to adjust alignment, spacing, and distribution within layouts.
2.3. Customizing Component Properties
Select any component and use the Properties Panel to customize its appearance and behavior. Examples:
- Text: Change button or label text.
- Color: Set background or text color.
- Font Size: Adjust text size.
- Width/Height: Set dimensions (e.g., 'Fill parent', 'Fit contents', or specific pixels/%).
- Border Radius: Round corners.
Experiment with different properties to achieve your desired look and feel.