Gopx Dropdown
Beautifully designed dropdown menu components for GOPX WEBUI (opens in a new tab) with Tailwind CSS and Framer Motion. Copy, paste, and customize to enhance your web projects effortlessly.
Dropdown Menus GOPX Animated framer-motion
Installation
Run the following command:
npx gopx-webui add dropdownProps
DropdownButton
| Prop | Type | Required | Description |
|---|---|---|---|
value | string | number | Yes | The current value displayed in the dropdown button. If no value is set, the placeholder will be shown. |
placeholder | string | Yes | The placeholder text displayed when there is no value. |
onClick | function | Yes | A function that is called when the button is clicked. |
isOpen | boolean | Yes | A flag indicating whether the dropdown is currently open or closed. |
DropdownItem
| Prop | Type | Required | Description |
|---|---|---|---|
option | T | Yes | The option object that represents the dropdown item. |
onClick | function | Yes | A function that is called when the dropdown item is clicked. |
children | React.ReactNode | Yes | The content to be displayed inside the dropdown item. |
DropdownMenu
| Prop | Type | Required | Description |
|---|---|---|---|
children | React.ReactNode | Yes | The content to be displayed inside the dropdown menu. This can include any valid React nodes, such as DropdownItem components or other elements. |
Dropdown
| Prop | Type | Required | Description |
|---|---|---|---|
value | T | Yes | The currently selected value of the dropdown. This should match one of the options in the options array. |
onChange | (value: T) => void | Yes | A function that is called when an option is selected. It receives the selected value as an argument. |
options | T[] | Yes | An array of options available for selection in the dropdown. |
renderOption | (option: T) => React.ReactNode | No | An optional function that allows for custom rendering of each dropdown option. If not provided, the option will be displayed as is. |
placeholder | string | No | An optional placeholder text displayed when no option is selected. Defaults to "Select an option". |
className | string | No | An optional additional CSS class for styling the dropdown component. |