mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-21 21:47:17 +00:00
131 lines
8.1 KiB
Markdown
131 lines
8.1 KiB
Markdown
---
|
||
id: popover-menu
|
||
title: Popover Menu
|
||
---
|
||
|
||
The **Popover Menu** is a UI component that lets you show a contextual menu or extra options when a user clicks or hovers on the button. Unlike a regular menu, the popover menu appears as a floating panel that’s anchored to the trigger element.
|
||
|
||
**Why use it?**
|
||
- To provide a compact set of actions tied to a button, icon, or card.
|
||
- To display contextual options related to a selected record, row, or item.
|
||
- Improves user experience with a lightweight, floating menu instead of cluttered buttons.
|
||
|
||
## Menu
|
||
|
||
| Property | Value | Description |
|
||
| ---------------- | ------------------- | --------------------------------------------------------------------------------------- |
|
||
| **Button label** | String | The text displayed on the menu trigger button. |
|
||
| **Button type** | Primary / Outline | Defines the visual style of the trigger button. |
|
||
| **Show menu** | On hover / On click | Controls how the menu opens. |
|
||
|
||
## Options
|
||
|
||
Allows you to add options to the **Popover Menu** component field. You can click on **+ Add new option** and add options manually or enable **Dynamic options** and enter the options using code.
|
||
|
||
### Example Code for Dynamic Options
|
||
```js
|
||
{{
|
||
[
|
||
{
|
||
"label":"option1",
|
||
"description":"",
|
||
"value":"1",
|
||
"icon":"IconBolt",
|
||
"iconVisibility":true,
|
||
"disable":false,
|
||
"visible":true
|
||
},
|
||
{
|
||
"label":"option2",
|
||
"description":"",
|
||
"value":"2",
|
||
"icon":"IconBulb",
|
||
"iconVisibility":false,
|
||
"disable":true,
|
||
"visible":true
|
||
},
|
||
{
|
||
"label":"option3",
|
||
"description":"This is an option",
|
||
"value":"3",
|
||
"icon":"IconTag",
|
||
"iconVisibility":false,
|
||
"disable":false,
|
||
"visible":true
|
||
}
|
||
]
|
||
}}
|
||
```
|
||
|
||
**Options Loading State** allows you to add a loading state to the dynamically generated options. You can enable or disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression.
|
||
|
||
|
||
## Events
|
||
|
||
| <div style={{ width:"135px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
|
||
| :------------------------------------------ | :--------------------------------------------------------- |
|
||
| On select | Triggers whenever an option is selected. |
|
||
|
||
:::info
|
||
Check [Action Reference](/docs/actions/run-query) docs to get detailed information about all the **Actions**.
|
||
:::
|
||
|
||
## Component Specific Actions (CSA)
|
||
|
||
The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use a RunJS query.
|
||
|
||
| <div style={{ width:"100px"}}> **Action** </div> | **Description** | **RunJS Query** |
|
||
|:-----------|:----------------|:----------------|
|
||
| setVisibility( ) | Sets the visibility of the component. | `components.popovermenu1.setVisibility()` |
|
||
| setLoading( ) | Sets the loading state of the component. | `components.popovermenu1.setLoading()` |
|
||
| setDisable( ) | Disables the component. | `components.popovermenu1.setDisable()` |
|
||
|
||
## Exposed Variables
|
||
|
||
| <div style={{ width:"100px"}}> Variable </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{width: "200px"}}> How To Access </div> |
|
||
| :--------------------------------------------- | :------------------------------------------------ | :-------------------------------------------------- |
|
||
| label | Holds the label name of the component. | `{{components.popovermenu1.label}}` |
|
||
| options | Holds all the option values of the component in array form. | `{{components.popovermenu1.options}}` |
|
||
| lastClickedOption | Holds the value of the last clicked option. | `{{components.popovermenu1.lastClickedOption}}` |
|
||
| isLoading | Indicates if the component is loading. | `{{components.popovermenu1.isLoading}}` |
|
||
| isVisible | Indicates if the component is visible. | `{{components.popovermenu1.isVisible}}` |
|
||
| isDisabled | Indicates if the component is disabled. | `{{components.popovermenu1.isDisabled}}` |
|
||
|
||
## Additional Actions
|
||
|
||
| <div style={{ width:"100px"}}> Action </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Configuration Options </div> |
|
||
| :------------------------------------------- | :-------------------------------------------------| :---------------------------------------------------------- |
|
||
| Loading state | Enables a loading spinner, often used with `isLoading` to indicate progress. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
| Visibility | Controls component visibility. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
| Disable | Enables or disables the component. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
| Tooltip | Provides additional information on hover. Set a string value for display. | String (e.g., `Select an option.` ). |
|
||
|
||
## Devices
|
||
|
||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Expected Value </div> |
|
||
| :--------------------------------------------- | :------------------------------------------------ | :----------------------------------------------------|
|
||
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
|
||
## Styles
|
||
|
||
### Menu
|
||
|
||
| **Property** | **Description** | **Configuration Options** |
|
||
| ----------------- | --------------------------------------------------------- | ------------------------------------------- |
|
||
| **Background** | Sets the background color of the popover menu. | Color picker / HEX / RGBA / Custom Themes |
|
||
| **Text** | Defines the text color of labels inside the menu. | Color picker / HEX / RGBA / Custom Themes |
|
||
| **Border** | Customizes the border color of the menu container. | Color picker / HEX / RGBA / Custom Themes |
|
||
| **Loader** | Sets the color of the loader. | Color picker / HEX / RGBA / Custom Themes |
|
||
| **Icon** | Allows you to select an icon for the trigger button. | Select icon, enable/disable icon visibility |
|
||
| **Icon color** | Adjusts the icon color and its alignment (left or right). | Color picker / Alignment options |
|
||
| **Border Radius** | Rounds the corners of the menu container. | Pixel values / Predefined radius options |
|
||
| **Box shadow** | Adds shadow effects to the menu for depth. | Color picker / HEX / RGBA / Custom Themes |
|
||
|
||
### Options
|
||
|
||
| **Property** | **Description** | **Configuration Options** |
|
||
| --------------- | ------------------------------------------------ | ----------------------------------------- |
|
||
| **Label** | Sets the color for the display text for the menu option. | Color picker / HEX / RGBA / Custom Themes |
|
||
| **Icon color** | Sets the color of the option’s icon. | Color picker / HEX / RGBA / Custom Themes |
|
||
| **Description** | Sets the color for the optional helper text shown under the main label. | Color picker / HEX / RGBA / Custom Themes |
|