ng-popupmenu

A lightweight and customizable popup menu with toggle component.

Inputs

| Input | Type | Default | Description | |-----------------|----------------------------------------------------------------|---------|-------------| | iconUrl | string \| null | null | URL of the SVG icon used for the toggle button. If not provided, a default icon is used. | | position | 'top-left' \| 'top-right' \| 'bottom-right' \| 'bottom-left' | 'top' | Position of the opened poopup, relative to the toggle. | | minHeight | string | '50px' | Minimum height of the opend popup. |

Outputs

| Output | Type | Description | |----------|-----------|-------------| | toggled | boolean | Emits the current open/close state of the popup whenever it changes. |

Content

The component supports content projection via default <ng-content> slot.

Styling

The component exposes CSS variables for customization.

Override them in your global styles:

:root {
  --primary-900: black;
  --primary-500: darkslategrey;
  --primary-100: whitesmoke;
  --neutral-500: lightgrey;
  --neutral-100: white;
}

Usage example

The following example shows how to use the component.

<my-app>
   ...
   <ant-popupmenu iconUrl="..." position="top-right" minHeight="50px">
      <div>
         <!-- content -->
      </div>
   </ant-popupmenu>
   ...
</my-app>