Dock

Dock 是一个由菜单项组成的导航组件。

导入#


import { Dock } from 'primereact/dock';

基础#

菜单需要一个菜单项集合作为其模型。默认位置是底部，当使用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 角色，而锚元素有一个 menuitem 角色，其中 aria-label 指的是项目的标签，如果该项目被禁用，则定义 aria-disabled。

键盘支持

按键	功能
tab	如果焦点移入菜单，则将焦点添加到第一个项目。如果焦点已在菜单内，则焦点移动到页面 tab 顺序中的下一个可聚焦项目。
shift + tab	如果焦点移入菜单，则将焦点添加到最后一个项目。如果焦点已在菜单内，则焦点移动到页面 tab 顺序中的上一个可聚焦项目。
enter	激活聚焦的菜单项。
空格	激活聚焦的菜单项。
下箭头	将焦点移动到垂直布局中的下一个菜单项。
上箭头	将焦点移动到垂直布局中的上一个菜单项。
home	将焦点移动到水平布局中的第一个菜单项。
end	将焦点移动到水平布局中的最后一个菜单项。