DocSpace-buildtools/packages/components/drop-down-item
2023-04-04 14:17:19 +05:00
..
drop-down-item.stories.js Web:Common/Client/Components: add PUBLIC_DIR alias 2023-01-27 17:08:30 +03:00
drop-down-item.test.js Web:Common/Client/Components: add PUBLIC_DIR alias 2023-01-27 17:08:30 +03:00
index.js Web:Components Added a toggle button in the context menu and disabled animation in the toggle button 2023-04-04 14:17:19 +05:00
README.md Web:Common/Client/Components: add PUBLIC_DIR alias 2023-01-27 17:08:30 +03:00
styled-drop-down-item.js Web:Client Added live chat toggle 2023-04-03 19:31:16 +05:00

DropDownItem

Is a item of DropDown component

Usage

import DropDownItem from "@docspace/components/drop-down-item";
import NavLogoReactSvgUrl from "PUBLIC_DIR/images/nav.logo.react.svg?url";
<DropDownItem
  isSeparator={false}
  isHeader={false}
  label="Button 1"
  icon={NavLogoReactSvgUrl}
  onClick={() => console.log("Button 1 clicked")}
/>

An item can act as separator, header, or container.

When used as container, it will retain all styling features and positioning. To disable hover effects in container mode, you can use noHover property.

Properties

Props Type Required Values Default Description
className string - - - Accepts class
disabled bool - - false Tells when the dropdown item should display like disabled
icon string - - - Dropdown item icon
id string - - - Accepts id
isHeader bool - - false Tells when the dropdown item should display like header
isSeparator bool - - false Tells when the dropdown item should display like separator
label string - - Dropdown item Dropdown item text
noHover bool - - false Disable default style hover effect
onClick func - - - What the dropdown item will trigger when clicked
style obj, array - - - Accepts css style