ContextMenu

ContextMenuは、ターゲットの右クリック時にオーバーレイメニューを表示します。

インポート#


import { ContextMenu } from 'primereact/contextmenu';
         

基本#

ContextMenuは、modelとしてメニュー項目のコレクションを必要とし、メニューを表示するために、ターゲットの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 global model={items} breakpoint="767px" />
 

テンプレート#

ContextMenuは、項目インスタンスを受け取り、要素を返す項目の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.nameエイミー・エルスナー
      管理者
    • user.nameアンナ・ファリ
      メンバー
    • user.nameアシヤ・ジャバヤント
      メンバー
    • user.nameベルナルド・ドミニク
      ゲスト
    • user.nameエルウィン・シャービル
      メンバー
    
<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#

    DataTableにはContextMenuの組み込みサポートがあり、例についてはコンテキストメニューのデモを参照してください。

    アクセシビリティ#

    スクリーンリーダー

    ContextMenuコンポーネントは、aria-orientationが "vertical" に設定されたmenubarロールを使用し、メニューを説明する値は、aria-labelledbyまたはaria-labelプロパティで提供できます。各リスト項目には presentationロールがあり、アンカー要素には、項目のラベルを参照するaria-labelと、項目が無効になっている場合に定義されるaria-disabledを持つmenuitemロールがあります。ContextMenu内のサブメニューは menuロールを使用し、aria-labelledbyはサブメニューのルートメニュー項目のラベルのIDとして定義されます。さらに、サブメニューを開くメニュー項目には、項目とサブメニュー間の関係を定義するために、aria-haspopup、aria-expanded、およびaria-controlsがあります。

    キーボードサポート

    キー機能
    tabメニューにフォーカスがある場合、コンテキストメニューを閉じ、ページシーケンス内の次のフォーカス可能な要素にフォーカスを移動します。
    enterメニュー項目にサブメニューがある場合は、サブメニューの表示を切り替え、それ以外の場合はメニュー項目をアクティブ化し、開いているすべてのオーバーレイを閉じます。
    spaceメニュー項目にサブメニューがある場合は、サブメニューの表示を切り替え、それ以外の場合はメニュー項目をアクティブ化し、開いているすべてのオーバーレイを閉じます。
    escapeコンテキストメニューを閉じます。
    下矢印フォーカスがメニュー内にない状態でメニューが開いている場合は、最初の項目にフォーカスを追加します。項目がすでにフォーカスされている場合は、サブメニュー内の次のメニュー項目にフォーカスを移動します。
    上矢印フォーカスがメニュー内にない状態でメニューが開いている場合は、最後の項目にフォーカスを追加します。項目がすでにフォーカスされている場合は、サブメニュー内の次のメニュー項目にフォーカスを移動します。
    右矢印利用可能なサブメニューがある場合は開き、最初の項目にフォーカスを移動します。
    左矢印サブメニューを閉じ、閉じたサブメニューのルート項目にフォーカスを移動します。
    homeサブメニュー内の最初のメニュー項目にフォーカスを移動します。
    endサブメニュー内の最後のメニュー項目にフォーカスを移動します。
                    PrimeReact 10.8.3 by PrimeTek