MenuTrigger
A menu trigger is a wrapper around the menu together with a trigger element. A menu displays a list of options and actions which a user can choose from.
| Install | yarn add @diallink-corp/convergo-react-menu |
|---|---|
| Version | 4.1.2 |
| Usage | import {MenuTrigger} from '@diallink-corp/convergo-react-menu' |
Example
A menu can be rendered by using the MenuTrigger component, in combination with the Menu component.
function Example() {
const handleAction = (action) => {
alert(action);
}
return (
<MenuTrigger>
<Button>Actions</Button>
<Menu onAction={(action) => handleAction(action)}>
<Item key='reply' textValue='Reply'>
<Icon name='PencilIcon' variant='outline' />
<Text>Reply</Text>
</Item>
<MenuDialogTrigger isUnavailable>
<Item key='replyAll' textValue='Reply all'>
<Icon name='BoltIcon' variant='solid' />
<Text>Reply All</Text>
</Item>
<Dialog>
<Header>
<Heading>Upgrad required to unlock this feature</Heading>
</Header>
<Content>
<Paragraph>
Please upgrade your plan to unlock this feature.
Lorem ipsum dolorem sit amet. Lorem ipsum dolorem
sit amet. Lorem ipsum dolorem sit amet. Lorem ipsum
dolorem sit amet. Lorem ipsum dolorem sit amet. Lorem
ipsum dolorem sit amet.
</Paragraph>
</Content>
</Dialog>
</MenuDialogTrigger>
<Item key='delete' textValue='Delete'>
<Icon name='XMarkIcon' variant='outline' />
<Text>Delete</Text>
</Item>
</Menu>
</MenuTrigger>
)
}function Example() {
const handleAction = (action) => {
alert(action);
};
return (
<MenuTrigger>
<Button>Actions</Button>
<Menu onAction={(action) => handleAction(action)}>
<Item key="reply" textValue="Reply">
<Icon name="PencilIcon" variant="outline" />
<Text>Reply</Text>
</Item>
<MenuDialogTrigger isUnavailable>
<Item key="replyAll" textValue="Reply all">
<Icon name="BoltIcon" variant="solid" />
<Text>Reply All</Text>
</Item>
<Dialog>
<Header>
<Heading>
Upgrad required to unlock this feature
</Heading>
</Header>
<Content>
<Paragraph>
Please upgrade your plan to unlock this
feature. Lorem ipsum dolorem sit amet. Lorem
ipsum dolorem sit amet. Lorem ipsum dolorem
sit amet. Lorem ipsum dolorem sit amet.
Lorem ipsum dolorem sit amet. Lorem ipsum
dolorem sit amet.
</Paragraph>
</Content>
</Dialog>
</MenuDialogTrigger>
<Item key="delete" textValue="Delete">
<Icon name="XMarkIcon" variant="outline" />
<Text>Delete</Text>
</Item>
</Menu>
</MenuTrigger>
);
}
function Example() {
const handleAction = (
action
) => {
alert(action);
};
return (
<MenuTrigger>
<Button>
Actions
</Button>
<Menu
onAction={(
action
) =>
handleAction(
action
)}
>
<Item
key="reply"
textValue="Reply"
>
<Icon
name="PencilIcon"
variant="outline"
/>
<Text>
Reply
</Text>
</Item>
<MenuDialogTrigger
isUnavailable
>
<Item
key="replyAll"
textValue="Reply all"
>
<Icon
name="BoltIcon"
variant="solid"
/>
<Text>
Reply All
</Text>
</Item>
<Dialog>
<Header>
<Heading>
Upgrad
required
to unlock
this
feature
</Heading>
</Header>
<Content>
<Paragraph>
Please
upgrade
your plan
to unlock
this
feature.
Lorem
ipsum
dolorem
sit amet.
Lorem
ipsum
dolorem
sit amet.
Lorem
ipsum
dolorem
sit amet.
Lorem
ipsum
dolorem
sit amet.
Lorem
ipsum
dolorem
sit amet.
Lorem
ipsum
dolorem
sit amet.
</Paragraph>
</Content>
</Dialog>
</MenuDialogTrigger>
<Item
key="delete"
textValue="Delete"
>
<Icon
name="XMarkIcon"
variant="outline"
/>
<Text>
Delete
</Text>
</Item>
</Menu>
</MenuTrigger>
);
}
Menu Sections
The menu supports splitting its content into sections. Each section can have a title and a list of items.
<MenuTrigger direction="start" align="start">
<Button>Actions</Button>
<Menu>
<Section title='Replying'>
<Item key='reply' textValue='Reply'>
<Icon name='PencilIcon' variant='outline' />
<Text>Reply</Text>
</Item>
<Item key='replyAll' textValue='Reply All'>
<Icon name='BoltIcon' variant='solid' />
<Text>Reply All</Text>
</Item>
</Section>
<Section title='Other'>
<Item key='delete' textValue='Delete'>
<Icon name='XMarkIcon' variant='outline' />
<Text>Delete</Text>
</Item>
</Section>
</Menu>
</MenuTrigger><MenuTrigger direction="start" align="start">
<Button>Actions</Button>
<Menu>
<Section title='Replying'>
<Item key='reply' textValue='Reply'>
<Icon name='PencilIcon' variant='outline' />
<Text>Reply</Text>
</Item>
<Item key='replyAll' textValue='Reply All'>
<Icon name='BoltIcon' variant='solid' />
<Text>Reply All</Text>
</Item>
</Section>
<Section title='Other'>
<Item key='delete' textValue='Delete'>
<Icon name='XMarkIcon' variant='outline' />
<Text>Delete</Text>
</Item>
</Section>
</Menu>
</MenuTrigger><MenuTrigger
direction="start"
align="start"
>
<Button>
Actions
</Button>
<Menu>
<Section title="Replying">
<Item
key="reply"
textValue="Reply"
>
<Icon
name="PencilIcon"
variant="outline"
/>
<Text>
Reply
</Text>
</Item>
<Item
key="replyAll"
textValue="Reply All"
>
<Icon
name="BoltIcon"
variant="solid"
/>
<Text>
Reply All
</Text>
</Item>
</Section>
<Section title="Other">
<Item
key="delete"
textValue="Delete"
>
<Icon
name="XMarkIcon"
variant="outline"
/>
<Text>
Delete
</Text>
</Item>
</Section>
</Menu>
</MenuTrigger>Menu Alignment
The menu is by default aligned to the bottom of the trigger component. If the content of the menu does not
have enough space to the bottom, the menu will automatically open to the top. However, this behaviour can be
controlled directly with the direction and align prop.
<MenuTrigger direction="start" align="start">
<Button>Actions</Button>
<Menu>
<Section title='Replying'>
<Item key='reply' textValue='Reply'>
<Icon name='PencilIcon' variant='outline' />
<Text>Reply</Text>
</Item>
<Item key='replyAll' textValue='Reply All'>
<Icon name='BoltIcon' variant='solid' />
<Text>Reply All</Text>
</Item>
</Section>
<Section title='Other'>
<Item key='delete' textValue='Delete'>
<Icon name='XMarkIcon' variant='outline' />
<Text>Delete</Text>
</Item>
</Section>
</Menu>
</MenuTrigger><MenuTrigger direction="start" align="start">
<Button>Actions</Button>
<Menu>
<Section title='Replying'>
<Item key='reply' textValue='Reply'>
<Icon name='PencilIcon' variant='outline' />
<Text>Reply</Text>
</Item>
<Item key='replyAll' textValue='Reply All'>
<Icon name='BoltIcon' variant='solid' />
<Text>Reply All</Text>
</Item>
</Section>
<Section title='Other'>
<Item key='delete' textValue='Delete'>
<Icon name='XMarkIcon' variant='outline' />
<Text>Delete</Text>
</Item>
</Section>
</Menu>
</MenuTrigger><MenuTrigger
direction="start"
align="start"
>
<Button>
Actions
</Button>
<Menu>
<Section title="Replying">
<Item
key="reply"
textValue="Reply"
>
<Icon
name="PencilIcon"
variant="outline"
/>
<Text>
Reply
</Text>
</Item>
<Item
key="replyAll"
textValue="Reply All"
>
<Icon
name="BoltIcon"
variant="solid"
/>
<Text>
Reply All
</Text>
</Item>
</Section>
<Section title="Other">
<Item
key="delete"
textValue="Delete"
>
<Icon
name="XMarkIcon"
variant="outline"
/>
<Text>
Delete
</Text>
</Item>
</Section>
</Menu>
</MenuTrigger>