2019-06-17 08:58:02 +00:00
|
|
|
# GroupButtonsMenu
|
|
|
|
|
2019-11-20 13:33:07 +00:00
|
|
|
Menu for group actions on a page.
|
|
|
|
|
|
|
|
### Usage
|
2019-06-17 08:58:02 +00:00
|
|
|
|
|
|
|
```js
|
2022-07-22 19:01:25 +00:00
|
|
|
import GroupButtonsMenu from "@docspace/components/group-buttons-menu";
|
2019-06-17 08:58:02 +00:00
|
|
|
```
|
|
|
|
|
2019-11-20 13:33:07 +00:00
|
|
|
```jsx
|
2019-09-09 13:10:39 +00:00
|
|
|
const menuItems = [
|
|
|
|
{
|
|
|
|
label: "Select",
|
|
|
|
isDropdown: true,
|
|
|
|
isSeparator: true,
|
|
|
|
isSelect: true,
|
|
|
|
fontWeight: "bold",
|
|
|
|
children: [
|
|
|
|
<DropDownItem key="aaa" label="aaa" />,
|
|
|
|
<DropDownItem key="bbb" label="bbb" />,
|
2020-10-16 13:16:01 +00:00
|
|
|
<DropDownItem key="ccc" label="ccc" />,
|
2019-09-09 13:10:39 +00:00
|
|
|
],
|
2020-10-16 13:16:01 +00:00
|
|
|
onSelect: (a) => console.log(a),
|
2019-09-09 13:10:39 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
label: "Menu item 1",
|
|
|
|
disabled: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item 1 action"),
|
2019-09-09 13:10:39 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
label: "Menu item 2",
|
|
|
|
disabled: true,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item 2 action"),
|
|
|
|
},
|
2019-09-09 13:10:39 +00:00
|
|
|
];
|
2019-11-20 13:33:07 +00:00
|
|
|
```
|
2019-09-09 13:10:39 +00:00
|
|
|
|
2019-11-20 13:33:07 +00:00
|
|
|
```jsx
|
2019-09-09 13:10:39 +00:00
|
|
|
<GroupButtonsMenu
|
|
|
|
checked={false}
|
|
|
|
menuItems={menuItems}
|
|
|
|
visible={false}
|
|
|
|
moreLabel="More"
|
|
|
|
closeTitle="Close"
|
|
|
|
onClose={() => console.log("Close action")}
|
|
|
|
onChange={() => console.log("Toggle action")}
|
|
|
|
selected={menuItems[0].label}
|
2019-11-20 13:33:07 +00:00
|
|
|
/>
|
2019-06-17 08:58:02 +00:00
|
|
|
```
|
|
|
|
|
2019-11-20 13:33:07 +00:00
|
|
|
### Properties
|
2019-06-17 08:58:02 +00:00
|
|
|
|
2019-11-20 13:33:07 +00:00
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
| ------------ | :--------: | :------: | :----: | :------: | -------------------------------- |
|
|
|
|
| `checked` | `bool` | - | - | `false` | Sets initial value of checkbox |
|
|
|
|
| `selected` | `string` | - | - | `Select` | Selected header value |
|
|
|
|
| `menuItems` | `array` | - | - | - | Button collection |
|
|
|
|
| `visible` | `bool` | - | - | - | Sets menu visibility |
|
|
|
|
| `moreLabel` | `string` | - | - | `More` | Label for more button |
|
|
|
|
| `closeTitle` | `string` | - | - | `Close` | Title for close menu button |
|
|
|
|
| `onClick` | `function` | - | - | - | onClick action on GroupButton`s |
|
|
|
|
| `onClose` | `function` | - | - | - | onClose action if menu closing |
|
|
|
|
| `onChange` | `function` | - | - | - | onChange action on use selecting |
|