We often need to select multiple people and tags in the selection of people and tags. Multi selection dropdown is a control to meet this requirement. In this tutorial, we will learn how to make it.
Features to be Realized
1. Multiple options can be selected when clicking the options in the dropdown list.
2. When clicking the close button next to the option, hide the option and uncheck the list.
3. Click dropdown box to collapse / expand the list panel and change the arrow direction.
How to Realize these Features
1. Create two repeaters, one representing the dropdown list and one representing the selected options. When an option in the dropdown list is selected, a new row is added to represent the selected option.
2. When the close button of the option is clicked, the row of the option is deleted and the corresponding row in the dropdown list is unselected.
3. When the input box is clicked, toggle the show / hide drop-down list, and toggle the state of the arrow dynamic panel.
Preview the completed prototype for this tutorial
1. Drag a label and a rectangle into the canvas. The label is named please select.
Set Selected Options
1. Set the right padding of the rectangle to 24.
2. Set Fit to Text Width.
3. Delete all table rows.
4. Drag a delete icon to the top of rectangle and set it when loaded, move it to the right of rectangle -17.
Set Dropdown List
1. Double click the repeater of the dropdown, select the rectangle and name it name.
2. Sets its MouseOver and Selected style. Add a column in the data table called Selected. And set it to - 1 (as unselected list).
4.Double click to enter the repeater and select the rectangle. Set the action of clicking / tap. Switch item The value of Item.Selected to -1/1. That is [[item. Selected * - 1]].
5. If the current list item is selected, add a row to the repeater of the selected items.
6. If the current list item is not selected, delete the row with the same name in the repeater of the selected item.
Sets The Arrow States and The Show / Hide of The Dropdown List
Group the rectangular background, arrow, and selected items, set the display / hiding of the dropdown list, and set the arrow dynamic panel to the next state.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.