2.0 KiB
2.0 KiB
GroupButtonsMenu
Menu for group actions on a page.
Usage
import GroupButtonsMenu from "@docspace/components/group-buttons-menu";
const menuItems = [
{
label: "Select",
isDropdown: true,
isSeparator: true,
isSelect: true,
fontWeight: "bold",
children: [
<DropDownItem key="aaa" label="aaa" />,
<DropDownItem key="bbb" label="bbb" />,
<DropDownItem key="ccc" label="ccc" />,
],
onSelect: (a) => console.log(a),
},
{
label: "Menu item 1",
disabled: false,
onClick: () => console.log("Menu item 1 action"),
},
{
label: "Menu item 2",
disabled: true,
onClick: () => console.log("Menu item 2 action"),
},
];
<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}
/>
Properties
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 |