上下文菜单

ContextMenu 组件在目标元素的右键单击时显示一个覆盖菜单。

导入#


import { ContextMenu } from 'primereact/contextmenu';
         

基本用法#

ContextMenu 需要一个菜单项集合作为其模型，并且需要使用目标的 onContextMenu 事件显式调用 show 方法来显示菜单。

Logo

<ContextMenu model={items} ref={cm} breakpoint="767px" />
<img src="/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current.show(e)} />
 

文档#

设置全局属性会将上下文菜单附加到文档。

在此页面的任意位置右键单击以查看全局 ContextMenu。


<ContextMenu global model={items} breakpoint="767px" />
 

模板#

ContextMenu 提供使用 items 的 template 属性进行项目自定义，该属性接收项目实例并返回一个元素。

    
<div className="card flex md:justify-content-center">
    <ul className="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
        {products.map((product) => (
            <li
                key={product.id}
                className={`p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 ${selectedId === product.id && 'border-primary'}`}
                onContextMenu={(e) => onRightClick(e, product.id)}
            >
                <div className="flex flex-wrap p-2 align-items-center gap-3">
                    <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={`/images/product/${product.image}`} alt="product.name" />
                    <div className="flex-1 flex flex-column gap-1">
                        <span className="font-bold">{product.name}</span>
                        <div className="flex align-items-center gap-2">
                            <i className="pi pi-tag text-sm"></i>
                            <span>{product.category}</span>
                        </div>
                    </div>
                    <span className="font-bold text-900 ml-5">{product.price}</span>
                </div>
            </li>
        ))}
    </ul>
    <ContextMenu model={items} ref={cm} breakpoint="767px" onHide={() => setSelectedId(undefined)} />
</div>
 

    命令#

    command 属性定义当项目被点击或按键事件激活时要运行的回调函数。

    • user.nameAmy Elsner
      管理员
    • user.nameAnna Fali
      成员
    • user.nameAsiya Javayant
      成员
    • user.nameBernardo Dominic
      访客
    • user.nameElwin Sharvill
      成员
    
<ul className="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
    {users.map((user) => (
        <li
            key={user.id}
            className={`p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between ${selectedUser?.id === user.id && 'border-primary'}`}
            onContextMenu={(event) => onRightClick(event, user)}
        >
            <div className="flex align-items-center gap-2">
                <img alt="user.name" src={`https://primefaces.org/cdn/primereact/images/avatar/${user.image}`} style={{ width: '32px' }} />
                <span className="font-bold">{user.name}</span>
            </div>
            <Tag value={user.role} severity={getBadge(user)} />
        </li>
    ))}
</ul>
<ContextMenu ref={cm} model={items} onHide={() => setSelectedUser(undefined)} />
<Toast ref={toast} />
 

    路由#

    带有导航的项目使用 command 和 url 属性定义，以便能够使用路由器链接组件、外部链接或编程式导航。

    logo
    
<span className="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" onContextMenu={(event) => onRightClick(event)} aria-haspopup="true">
    <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" height="40"></img>
</span>
<ContextMenu model={items} ref={cm} /> 

    数据表格#

    DataTable 内置了对 ContextMenu 的支持，有关示例，请参见上下文菜单演示。

    辅助功能#

    屏幕阅读器

    ContextMenu 组件使用 menubar 角色，aria-orientation 设置为 “vertical”，并且可以使用 aria-labelledby 或 aria-label 属性提供描述菜单的值。每个列表项都有一个 presentation 角色，而锚元素具有 menuitem 角色，其中 aria-label 指的是项目的标签，如果该项目被禁用，则定义 aria-disabled。ContextMenu 中的子菜单使用 menu 角色，其中 aria-labelledby 定义为子菜单根菜单项标签的 id。此外，打开子菜单的菜单项具有 aria-haspopup、aria-expanded 和 aria-controls 来定义项目和子菜单之间的关系。

    键盘支持

    按键功能
    tab当焦点在菜单中时，关闭上下文菜单并将焦点移动到页面序列中的下一个可聚焦元素。
    enter如果菜单项有子菜单，则切换子菜单的可见性，否则激活菜单项并关闭所有打开的覆盖层。
    space如果菜单项有子菜单，则切换子菜单的可见性，否则激活菜单项并关闭所有打开的覆盖层。
    escape关闭上下文菜单。
    下箭头如果焦点不在菜单内且菜单已打开，则将焦点添加到第一个项目。如果项目已聚焦，则将焦点移动到子菜单中的下一个菜单项。
    上箭头如果焦点不在菜单内且菜单已打开，则将焦点添加到最后一个项目。如果项目已聚焦，则将焦点移动到子菜单中的下一个菜单项。
    右箭头如果存在子菜单，则打开子菜单并将焦点移动到第一个项目。
    左箭头关闭子菜单并将焦点移动到关闭的子菜单的根项目。
    home将焦点移动到子菜单中的第一个菜单项。
    end将焦点移动到子菜单中的最后一个菜单项。
                    PrimeReact 10.9.1 由PrimeTek