toeverything
New Menu Component - Design Guideline
Description
The "menu" component needs to have the following:
Items
1.Base list items:
It should support the option to show or hide the following attributes:
- Drag indicator on the left
- Left icon
- Text information
- Right icon
- Secondary arrow on the right
It should be able to display different states:
- Default
- Hover
- Selected: Requires two styles, one associated with the right icon.
- Disabled
Size information:
2. Title list item
The title column defaults to uppercase text.
The title column has:
- Left icon (usually for returning)
- Text (default is uppercase)
- Action button: the action button has a hover state.
Size info:
3. Divider
0.5px, default is dividerColor.
4. delete list item
Typically, the delete button should be at the bottom of the list, separated by a divider above it. The hover state for the delete button is red.
Size info:
5. Search Item
The style of the search item is relatively independent. Typically, the search item appears at the top of the list, separated by a divider:
Size info
6. Input Item
It's basically consistent with the search item. Typically, the input item appears at the top of the list, separated by a divider.
And input item need support tooltips，only when hover:
Size info:
Layout
the layout of menu:
and the submenu:
the mini width of menu is 180px
== Check the the figma link ==
