DocSpace-client/packages/shared/components/drop-down-item
2024-01-10 11:01:43 +03:00
..
DropDownItem.styled.ts Merge branch 'develop' into feature/components-typescript 2023-12-19 10:40:56 +03:00
DropDownItem.test.tsx Shared:Components:DropDown: rewrite to typescript 2023-12-12 16:29:58 +03:00
DropDownItem.tsx Shared:Tests:Unit: add i18 mock, fix warnings 2023-12-29 16:06:40 +03:00
DropDownItem.types.tsx Merge branch 'develop' into feature/components-typescript 2023-12-19 10:40:56 +03:00
index.tsx Shared:Components:DropDown: rewrite to typescript 2023-12-12 16:29:58 +03:00
README.md Client: fix wrong import - export for shared components 2024-01-10 11:01:43 +03:00

DropDownItem

Is a item of DropDown component

Usage

import { DropDownItem } from "@docspace/shared/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