40 lines
2.2 KiB
Markdown
40 lines
2.2 KiB
Markdown
# DropDownItem
|
|
|
|
Is a item of DropDown component
|
|
|
|
### Usage
|
|
|
|
```js
|
|
import DropDownItem from "@docspace/components/drop-down-item";
|
|
import NavLogoReactSvgUrl from "PUBLIC_DIR/images/nav.logo.react.svg?url";
|
|
```
|
|
|
|
```jsx
|
|
<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 |
|