An upcoming nightly build will introduce a new Perspective Navigation component; the Horizontal Menu. This component allows you to build a menu structure that occupies a large amount of horizontal space and a small amount of vertical space in the interface. The menu starts with a list of root-level menu items that make up the main display area of the component. If there are more menu items than can display within the width of the component, arrow buttons will be presented to allow you to scroll the control to the left and right to display any hidden menu items. The control can also be disabled as a whole.
Each menu item can be configured with a target that will serve as either a link to a view that should be shown (i.e. “/some-view”), or a link to an external web page (i.e. “http://www.google.com/”). They can also be given a list of child menu items that will show temporarily in a popup as the user is interacting with them. Additionally, menu items can be labeled, disabled, and be given an icon to show to the left of their label.
Main Component Config:
enabled: (boolean) The enabled state of the component.
items: (Menu Item Config) The root-level menu items to display.
style: (Component Style Config) Any styling to apply to the component.
Menu Item Config:
enabled: (boolean) The enabled state of the menu item.
items: (Menu Item Config) If provided, the child-level menu items to display when clicked.
target: (string) If provided, the action to be taken when clicked. If a view should be shown, an example target would be “/some-view”. If an external web page should be shown, an example target would be “http://www.google.com/”.
label: (string) The label of the menu item.
icon: (object) If provided, the icon to be shown to the left of the label.
icon.path: (string) The path to the icon repository and icon in the repo to be shown. If using the built-in Material icon repo, an example path would be “material/link”.
icon.color: (string) A hex version of the color that the icon should be made. If a gray color is desired, and example would be “#6C6C6C”.
Give it a whirl and please respond to this thread if you have any questions or comments!
not sure if I am missing a setting, but if the array of sub items is greater than the height of the display then the list appears in the middle of the window and horizontally rather than vertically.
I cant post the actual link but here is a quick example I created, its just using the default component with the link to google item duplicated multiple times, so here the config is no different to default, I have spent a few hours yesterday trying various adjustments. For reference I would expect it to act as the vertical menu does, where it gains a scroll bar if it goes out of the container. where we are listing machines/lines some cases we have around 30 items, so for now have moved to the vertical menu bar.
Hi @Rhys_m, in an upcoming nightly, you’ll be able to apply style to each individual menu item, if desired. I will update this thread when that update gets into a nightly.
After holding down the scroll buttons and having them disappear at the end of the menu, whatever button was underneath them often gets incidentally clicked (which is especially a problem on mobile where the scroll buttons are more likely to be used). Even if the onItemClicked event doesn’t fire, the button gets selected making it look like it did.
Would it be possible to get click protection when the scroll buttons disappear? I’ve worked around the issue for now by making dummy spacer buttons, but they take up real estate even when the scroll bars aren’t needed.
I am now on a nightly 8.0.8 snapshot (b2020010702). I can’t replicate the issue anymore on desktop, but on mobile (specifically, Chrome’s developer mode), I still get the accidental click when scrolling all the way to one end or the other (and the occasional context menu pop-up when the menu scrolls for long enough, though I’m not sure if that can be addressed).
I’ve made a workaround by having dummy items appear that eat the click whenever the menu gets long enough, which has solved an additional problem where the item underneath the scroll arrow buttons is highlighted after the scroll button disappears, making it look as if the item has been pressed even if it hasn’t (which, in my use case, can be scary).
Is it possible to control the visible prop or display prop of an item? It would be nice to bind these to security zone/role or whatever? am I missing something?
@wking: There is no such prop right now. As a workaround, you could generate the items/paths at View startUp, and wrap the user’s permissions into the logic.
