ドック

Dock は、メニューアイテムで構成されるナビゲーションコンポーネントです。

インポート#


import { Dock } from 'primereact/dock';
         

基本#

メニューは、model としてメニューアイテムのコレクションを必要とします。デフォルトの場所は bottom で、position プロパティで定義すると他の辺も使用できます。


<Dock model={items} position="{position}" />
 

高度#

さまざまなコンポーネントを使用した macOS の実装例です。

金 13:07

<Tooltip className="dark-tooltip" target=".dock-advanced .p-dock-action" my="center+15 bottom-15" at="center top" showDelay={150} />
<Menubar model={menubarItems} start={start} end={end} />
<div className="dock-window dock-advanced">
    <Toast ref={toast} />
    <Toast ref={toast2} position="top-center" />
    <Dock model={dockItems} />
    <Dialog visible={displayTerminal} breakpoints={{ '960px': '50vw', '600px': '75vw' }} style={{ width: '30vw' }} onHide={() => setDisplayTerminal(false)} maximizable blockScroll={false}>
        <Terminal welcomeMessage="Welcome to PrimeReact (cmd: 'date', 'greet {0}', 'random' and 'clear')" prompt="primereact $" />
    </Dialog>
    <Dialog visible={displayFinder} breakpoints={{ '960px': '50vw', '600px': '75vw' }} style={{ width: '30vw', height: '18rem' }} onHide={() => setDisplayFinder(false)} maximizable blockScroll={false}>
        <Tree value={nodes} />
    </Dialog>
    <Galleria ref={galleria} value={images} responsiveOptions={responsiveOptions} numVisible={2} style={{ width: '400px' }}
        circular fullScreen showThumbnails={false} showItemNavigators item={itemTemplate} />
</div>
 

アクセシビリティ#

スクリーンリーダー

Dock コンポーネントは、menu ロールと aria-orientation を使用し、メニューを記述する値は aria-labelledby または aria-label プロパティで提供できます。各リストアイテムには presentation ロールがありますが、アンカー要素にはアイテムのラベルを参照する aria-label と、アイテムが無効になっている場合に定義される aria-disabled を持つ menuitem ロールがあります。

キーボードサポート

キー機能
tabフォーカスがメニューに移動した場合、最初のアイテムにフォーカスを追加します。フォーカスが既にメニュー内にある場合、フォーカスはページタブシーケンスの次のフォーカス可能なアイテムに移動します。
shift + tabフォーカスがメニューに移動した場合、最後のアイテムにフォーカスを追加します。フォーカスが既にメニュー内にある場合、フォーカスはページタブシーケンスの前のフォーカス可能なアイテムに移動します。
enterフォーカスされているメニューアイテムをアクティブにします。
スペースフォーカスされているメニューアイテムをアクティブにします。
下矢印垂直レイアウトでフォーカスを次のメニューアイテムに移動します。
上矢印垂直レイアウトでフォーカスを前のメニューアイテムに移動します。
home水平レイアウトでフォーカスを最初のメニューアイテムに移動します。
end水平レイアウトでフォーカスを最後のメニューアイテムに移動します。
          PrimeReact 10.8.3 by PrimeTek