2019-06-25 09:02:44 +00:00
|
|
|
# ContextMenuButton
|
2019-06-24 13:50:54 +00:00
|
|
|
|
2019-06-25 09:02:44 +00:00
|
|
|
ContextMenuButton is used for displaying context menu actions on a list's item
|
2019-06-24 13:50:54 +00:00
|
|
|
|
2019-11-20 11:20:50 +00:00
|
|
|
### Usage
|
2019-06-24 13:50:54 +00:00
|
|
|
|
|
|
|
|
```js
|
2022-07-22 19:01:25 +00:00
|
|
|
import ContextMenuButton from "@docspace/components/context-menu-button";
|
2023-01-16 10:04:26 +00:00
|
|
|
import VerticalDotsReactSvgUrl from "../../../public/images/vertical-dots.react.svg?url";
|
2019-11-20 11:20:50 +00:00
|
|
|
```
|
2019-06-25 09:02:44 +00:00
|
|
|
|
2019-11-20 11:20:50 +00:00
|
|
|
```jsx
|
2019-06-25 09:02:44 +00:00
|
|
|
<ContextMenuButton
|
2023-01-16 10:04:26 +00:00
|
|
|
iconName={VerticalDotsReactSvgUrl}
|
2019-11-20 11:20:50 +00:00
|
|
|
size={16}
|
|
|
|
|
color="#A3A9AE"
|
|
|
|
|
isDisabled={false}
|
|
|
|
|
title="Actions"
|
|
|
|
|
getData={() => [
|
|
|
|
|
{
|
|
|
|
|
key: "key",
|
|
|
|
|
label: "label",
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => alert("label"),
|
|
|
|
|
},
|
2019-11-20 11:20:50 +00:00
|
|
|
]}
|
2019-06-25 09:02:44 +00:00
|
|
|
/>
|
2019-06-24 13:50:54 +00:00
|
|
|
```
|
|
|
|
|
|
2019-11-20 11:20:50 +00:00
|
|
|
### Properties
|
2019-06-25 09:02:44 +00:00
|
|
|
|
2019-11-27 13:33:53 +00:00
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
|
| --------------- | :------------: | :------: | :------------: | :----------------: | ----------------------------------------------------- |
|
|
|
|
|
| `className` | `string` | - | - | - | Accepts class |
|
|
|
|
|
| `clickColor` | `string` | - | - | - | Specifies the icon click color |
|
|
|
|
|
| `color` | `string` | - | - | - | Specifies the icon color |
|
|
|
|
|
| `data` | `array` | - | - | `[ ]` | Array of options for display |
|
|
|
|
|
| `directionX` | `oneOf` | - | `left`,`right` | `left` | What the button will trigger when mouse out of button |
|
|
|
|
|
| `getData` | `func` | ✅ | - | - | Function for converting to inner data |
|
|
|
|
|
| `hoverColor` | `string` | - | - | - | Specifies the icon hover color |
|
|
|
|
|
| `iconClickName` | `string` | - | - | - | Specifies the icon click name |
|
|
|
|
|
| `iconHoverName` | `string` | - | - | - | Specifies the icon hover name |
|
|
|
|
|
| `iconName` | `string` | - | - | `VerticalDotsIcon` | Specifies the icon name |
|
|
|
|
|
| `id` | `string` | - | - | - | Accepts id |
|
|
|
|
|
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
|
|
|
|
|
| `onMouseEnter` | `func` | - | - | - | What the button will trigger when mouse hovered |
|
|
|
|
|
| `onMouseLeave` | `func` | - | - | - | What the button will trigger when mouse leave |
|
|
|
|
|
| `onMouseOut` | `func` | - | - | - | What the button will trigger when mouse out of button |
|
|
|
|
|
| `onMouseOver` | `func` | - | - | - | What the button will trigger when mouse over button |
|
|
|
|
|
| `opened` | `bool` | - | - | `false` | Tells when the button should present a opened state |
|
|
|
|
|
| `size` | `number` | - | - | `16` | Specifies the icon size |
|
|
|
|
|
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
|
|
|
|
| `title` | `string` | - | - | - | Specifies the icon title |
|
