Answer the question
In order to leave comments, you need to log in
How to combine checkbox, expand/collapse and dropdown menu in list item?
I am developing a web application. In terms of design, I adhere to the Material Design concept from Google as much as possible. The interface will be focused on all types of devices: phones, tablets, desktops.
One of the functions of the application is a list of tasks with subtasks. For each task, you need to be able to:
1. put a mark on completion
2. collapse / expand subtasks
3. perform a set of additional actions hidden under the drop-down menu (opened by clicking on the icon to the right of the task name)
Classically, such a structure is displayed in the form of a tree
: In this case, this option is not suitable, because it: 1) does not agree well with Material Design, 2) involves the use of a mouse.
As controls for list itemsThe official guideline offers the following options:
Everywhere we see only 2 possible options : primary action on the left - let it be a checkbox for completing the task and secondary action on the right - expand/collapse OR an additional action button. Question: what is the right way to place all 3 controls at the same time
in terms of usability ?
Answer the question
In order to leave comments, you need to log in
Maybe try using something similar to self-learning sites like Udemy or Coursera?
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question