可导航容器

NavigableContainer 是一个 React 组件，用于渲染可通过键盘导航的容器。只有可聚焦的元素才能被导航到。它目前始终是一个 div。

NavigableContainer 导出为两个组件：NavigableMenu 和 TabbableContainer。NavigableContainer 本身不导出。NavigableMenu 和 TabbableContainer 具有下面列出的 props。任何其他 props 都将透传给 div。

Props

这些是 NavigableMenu 和 TabbableContainer 的 props。任何特定于某个组件的 props 都标有适当的标签。

cycle: boolean

一个布尔值，指示组件是否应从末尾循环回到开头，反之亦然。

• Required: No
• default: true

eventToOffset: ( event: KeyboardEvent ) => -1 | 0 | 1 | undefined

(仅限 TabbableContainer)
根据事件获取偏移量。

• Required: No

onKeyDown: ( event: KeyboardEvent ) => void

在 keydown 事件时调用的回调函数。

• Required: No

onNavigate: ( index: number, focusable: HTMLElement ) => void

当菜单导航到其子项之一时调用的回调函数，将索引和子项作为参数传递

• Required: No

orientation: ‘vertical’ | ‘horizontal’ | ‘both’

(仅限 NavigableMenu)
菜单的方向。可以是“vertical”、“horizontal”或“both”。

• Required: No
• Default: "vertical"

Components

NavigableMenu

NavigableMenu 允许通过方向键在组件上下（或左右）移动。未处理 tab 键。使用 orientation prop 来确定使用的方向键是垂直、水平还是两者兼有。

NavigableMenu 默认具有 menu 角色，因此，为了按预期工作，该组件期望其子元素具有以下角色之一：'menuitem' | 'menuitemradio' | 'menuitemcheckbox'。

TabbableContainer

TabbableContainer 仅使用 tab 键进行导航。每个预期的选项卡停止点必须具有 tabIndex 0。

Usage

import {
    NavigableMenu,
    TabbableContainer,
    Button,
} from '@wordpress/components';

function onNavigate( index, target ) {
    console.log( `Navigates to ${ index }`, target );
}

const MyNavigableContainer = () => (
    <div>
        <span>可导航菜单：</span>
        <NavigableMenu onNavigate={ onNavigate } orientation="horizontal">
            <Button variant="secondary">Item 1</Button>
            <Button variant="secondary">Item 2</Button>
            <Button variant="secondary">Item 3</Button>
        </NavigableMenu>

        <span>可选项卡容器：</span>
        <TabbableContainer onNavigate={ onNavigate }>
            <Button variant="secondary" tabIndex="0">
                Section 1
            </Button>
            <Button variant="secondary" tabIndex="0">
                Section 2
            </Button>
            <Button variant="secondary" tabIndex="0">
                Section 3
            </Button>
            <Button variant="secondary" tabIndex="0">
                Section 4
            </Button>
        </TabbableContainer>
    </div>
);