Contextual menu

Contextual menu is used to provide a list of actions and links that can be used to perform an action or navigate.

Code


                                                        
                                                        
                                                            <PyxisContextualMenu
                                                            data-testid="contextual-menu-parent"
                                                        >
                                                            <PyxisButton left-icon-class="fas fa-gear" />
                                                            <template #content>
                                                                <PyxisContextualMenuSection 
                                                                    title="Manage" 
                                                                    description="To share datas or save them in your storage, you can download files, here:"
                                                                    data-testid="contextual-menu-manage-section"
                                                                >  
                                                                    <PyxisContextualMenuItem 
                                                                        left-icon-class="far fa-pen-to-square" 
                                                                        label="Rename"
                                                                        @click="handleClick()"
                                                                        data-testid="contextual-menu-rename-item"
                                                                    />
                                                                </PyxisContextualMenuSection>
                                                            </template>
                                                        </PyxisContextualMenu>

Example of a regular Contextual Menu component

Props

The Contextual Menu component supports the following Props:

Name	Type	Default	Required
dataTestid	string	undefined	true
openOn	'hover'\|'click'	'click'	false
autoDirection	boolean	true	false
disabled	boolean	false	false
direction	top-left\|top-center\|top-right\|center-left\|center-right\|bottom-left\|bottom-center\|bottom-right	'bottom-left'	false

The Contextual Menu Section component supports the following Props:

Name	Type	Default	Required
dataTestid	string	undefined	true
title	string	undefined	true
description	string	undefined	false
disabled	boolean	false	false
disabledReason	string	undefined	false
ariaLabelDisabledTooltip	string	undefined	false

The Contextual Menu Item component supports the following Props:

Name	Type	Default	Required
dataTestid	string	undefined	true
label	string	undefined	true
leftIconClass	string	''	false
disabled	boolean	false	false
isDangerItem	boolean	false	false
disabledReason	string	undefined	false
ariaLabelDisabledTooltip	string	undefined	false

Events

The interactions on the Contextual Menu Item component are handled by the following Events

@click : This event is triggered when the Item is clicked

Slots

The Contextual Menu component offers the following slots for managing its template content:

v-slot:default : This slot is used to define the element that triggers the display of the Contextual Menu when clicked or hovered over.

v-slot:content : This slot is used to render the content of the Contextual Menu.

Exposed Functions

The Contextual Menu component offers the following exposed functions:

openContextualMenu() : force Contextual Menu opening from parent component

closeContextualMenu() : force Contextual Menu closing from parent component