Dropdown Menu

General

Dropdown Menu
When there are more than a few options to choose from, you can wrap them in a Dropdown. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.

Click：

hover：

Show Code

import React, { useState } from "react"; 
import DropdownMenu from "pocko-ui/DropdownMenu";
 
const [triggerValue, setTriggerValue] = useState<any>("请选择");
 
return (
  <div className="mt-2">
    <div className="d-flex align-items-center gap-2">
      <span>Click：</span>
 
      <DropdownMenu
        menuItems={[
          {
            label: `下拉文件 <i class="fa-solid fa-caret-down"></i>`,
            value: "下拉文件",
          },
          { label: "打开文件", divided: true, value: "打开文件" },
          { label: "退出", disabled: true, value: "789" },
        ]}
        trigger="click"  // How to trigger
        triggerButton={
          <button className="btn btn-sm btn-primary text-dark" type="button">
            {triggerValue}
          </button>
        }
        placement="bottomLeft"
        onChange={(item: any) => {
          console.log(item);
 
          setTriggerValue(item.value);
        }}
      ></DropdownMenu>
    </div>
 
    <div className="border-bottom my-2"></div>
 
    <div className="d-flex align-items-center">
      <span>hover：</span>
 
      <DropdownMenu
        menuItems={[
          {
            label: `文件1`,
            value: "文件1",
          },
          { label: "文件2", divided: true, value: "文件2" },
          { label: "文件3", disabled: true, value: "文件3" },
        ]}
        trigger="hover"  // How to trigger
        triggerButton={
          <div>
            <i className="fa-solid fa-folder-open"></i>
          </div>
        }
        placement="bottomLeft"
        onChange={(item: any) => {
          console.log(item);
          setTriggerValue(item.value);
        }}
      ></DropdownMenu>
    </div>
  </div>
);

Combine drop-down input

Show Code

import React, { useState } from "react"; 
import DropdownMenu from "pocko-ui/DropdownMenu";
 
const [triggerValue, setTriggerValue] = useState<any>("请选择");
 
return (
  <div className="mt-2">
    <div className="input-group">
      <span className="input-group-text">
        <DropdownMenu
          menuItems={[
            {
              label: `下拉文件 <i class="fa-solid fa-caret-down"></i>`,
              value: "下拉文件",
            },
            { label: "打开文件", divided: true, value: "打开文件" },
            { label: "退出", disabled: true, value: "789" },
          ]}
          trigger="hover" // How to trigger
          triggerButton={<div> {triggerValue}</div>}
          placement="bottomLeft"
          onChange={(item) => {
            console.log(item);
 
            setTriggerValue(item.value);
          }}
        ></DropdownMenu>
      </span>
 
      <input type="text" className="form-control" />
    </div>
  </div>
);

API

Dropdown Menu

import DropdownMenu from "pocko-ui/DropdownMenu";
import 'pocko-ui/DropdownMenu/index.css'

Property	Type	Default	Description	Required
`triggerButton`	React.ReactNode	-	The button or element that triggers the dropdown menu when clicked or hovered.	✔
`menuItems`	MenuItem[]	-	The list of menu items to be displayed in the dropdown. Each item is an object containing `label`, `value`, `disabled`, and optionally `divided` properties.	✔
`onChange`	Function	-	Callback function that is called when a menu item is selected. Receives the selected menu item as an argument.	-
`disabled`	boolean	`false`	Whether the dropdown is disabled, preventing interaction with the dropdown and its trigger.	-
`placement`	"bottomLeft" \| "bottomRight" \| "topLeft" \| "topRight"	`bottomLeft`	Determines the position of the dropdown relative to the trigger button.	-
`trigger`	"hover" \| "click"	`hover`	Defines the trigger action for the dropdown. It can either open on hover or click.	-
`wrapperClassName`	string	-	The class name of the wrapper element around the trigger button.	-
`closeOnOutsideClick`	boolean	`true`	Whether to close the dropdown when clicking outside the dropdown or trigger button.	-

Installation