Skip to main content

Menu

📘 Developer Guide

With the Menu Brick, you are able to open a menu anywhere on your dashboard.

🔁 Example

Designer

Runtime

⚙️ Configuration Properties

Key Label Description Default Value
xPosition The x-Position of the Menu Defines the horizontal positioning of the menu

before | after		 -
yPosition The y-Position of the Menu Defines the vertical positioning of the menu

above | below		 -
gap The gap between menu and target element Accepts a number, translated to pixel

number		 -

🛠️ Usage

Designer

Use the configurators in the right side nav to set up you menu.

⌨️ Programmatical Data

How to open a Menu at a target element

Imagine you are using a Action Button, which will fire an Event on click. This event contains a HTMLElement reference under the property target. Emit an event from the Button and listen to that in the Menu.

Button-Script

// 🧨 Emit an event on the fyzScope, passing through the actionData.target of the buttonClick Event
fyzScope.event.emit({ name: "openMenu", value: actionData.target });

Menu-Script

// 📤 Open the Menu with help of the target emitted by the button script
fyzBrick.cRef.open(actionData)
How to open a Menu at a specified position

This will let you open a menu anywhere specified, no need of targets

// 📤 Open the menu at the specified position
// First param is x, second param is y
// If the optional xPosition and yPosition are specified, these will get prioritized over the Menu-Config positions
fyzBrick.cRef.openAt(100, 200, { xPosition: 'after', yPosition: 'below' })
No Comments
Back to top