Dropdown Button

<DropdownButton /> Component

The DropdownButton is designed to create a dropdown button with customizable content and behaviors. It's built on top of the popular BasicDropdown component and supports dynamic button configurations, including the ability to use a custom button component. It manages its own internal state and handles various events related to dropdown interactions. It allows for customization of the button's appearance and behavior, including support for loading states, disabled states, and custom icons or images.

Usage

<DropdownButton>
    <div class="next-dd-menu">
        <div class="p-1">
            {{#each-in this.items as |item|}}
                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.handleClick item)}}>
                    {{item.title}}
                </a>
            {{/each-in}}
        </div>
    </div>
</DropdownButton>

Properties

Property	Type	Description
type	String	Specifies the type of button. Defaults to 'default'.
buttonSize	String	Determines the size of the button. Defaults to 'md'.
buttonComponentArgs	Object	Arguments passed to the custom button component, if one is used.
dropdownId	String	ID for the dropdown component.
wrapperClass	String	CSS class for the dropdown wrapper.
renderInPlace	Boolean	If true, the dropdown will render in place rather than as a separate node.
horizontalPosition	String	Horizontal positioning of the dropdown.
verticalPosition	String	Vertical positioning of the dropdown.
calculatePosition	Function	Function to calculate the dropdown's position.
defaultClass	String	Default CSS class for the dropdown.
matchTriggerWidth	Boolean	If true, the dropdown will match the width of the trigger button.
onOpen	Function	Function called when the dropdown is opened.
onClose	Function	Function called when the dropdown is closed.
buttonComponent	Component	A custom component to use for the button. If not provided, a default <Button /> component is used.
text	String	Text to display on the button.
buttonClass	String	CSS class for the button.
buttonWrapperClass	String	CSS class for the button wrapper.
active	Boolean	If true, the button is considered active.
isLoading	Boolean	If true, the button displays a loading state.
disabled	Boolean	If true, the button is disabled.
textClass	String	CSS class for the text within the button.
helpText	String	Text to display in a tooltip when hovering over the button.
tooltipPlacement	String	Placement of the tooltip relative to the button.
img	String	URL of an image to display on the button.
imgClass	String	CSS class for the image.
alt	String	Alt text for the image.
icon	String	Icon to display on the button.
iconPrefix	String	Prefix for the icon, useful for specifying icon sets.
iconSize	Number	Size of the icon.
iconClass	String	CSS class for the icon.

Events

Event	Description
onRegisterAPI()	Calls the registerAPI function provided in the arguments, if it exists.
onTriggerInsert()	Calls the onTriggerInsert function provided in the arguments, if it exists. Sets _onTriggerInsertFired to true. If renderInPlace is true or _onInsertFired is false, it also calls onInsert.
onButtonInsert()	Calls the onButtonInsert function provided in the arguments, if it exists. Sets _onButtonInsertFired to true.
onInsert()	Calls the onInsert function provided in the arguments, if it exists.