How to Work with Combo Box Elements in Wireframing
Help|Tutorials|Tips and Tricks|Diagramming|Wireframing|
9 October 2024 |
Dusan Rodina - softwareideas.net
In this tutorial, we will guide you through working with Combo Box elements while creating wireframes for your User Interface designs in Software Ideas Modeler. We'll go over how to insert the Combo Box, customize its appearance, add a dropdown, and configure other settings to fit your UI diagram needs.
Step 1: Inserting the Combo Box Element in Your Wireframe
- Navigate to the toolbox on the left.
- Under the User Interface section, locate the Combo Box element.
- Drag and drop the Combo Box onto your canvas.
- You can freely adjust the size of the Combo Box by using the sizing grips at the edges. Simply click and drag to resize it according to your diagram's design.
Step 2: Adding a Dropdown to the Combo Box
- With the Combo Box selected, open the Properties sidebar.
- Look for the Show Drop Down checkbox and check it. This will make the dropdown list visible under the Combo Box.
- To customize the items in the dropdown, double-click inside the dropdown area.
- A text box will appear—here, you can enter the items. Each line in the text box corresponds to a separate item in the dropdown.
Add items to UI Combo Box element
Step 3: Adjusting the Dropdown's Position and Size
You can further customize the position and size of the dropdown using orange diamond grips:
- Position Grip: Allows you to move the dropdown list relative to the Combo Box.
- Size Grip: Enables you to resize the dropdown list.
This flexibility lets you place the dropdown exactly where you want it, even extending it farther from the Combo Box if needed.
Step 4: Using Connector Lines to Enhance Wireframe Interpretation
If you'd like to visually indicate the association between the Combo Box and its dropdown, you can enable connector lines.
- Go to the Style sidebar, and in the Label Connector group, check the option labeled Show label connector.
- This will display a line connecting the Combo Box and its dropdown, making it easier to interpret the UI diagram.
Step 5: Handling Multiple Instances of Combo Box Elements
When using multiple instances of the same Combo Box across different diagrams, you can customize their appearances separately. For instance, you can choose to show the dropdown for one Combo Box while hiding it for another. This setting is unique to each instance, meaning it won’t affect other instances of the same Combo Box element in your project.
New Comment