游标聚焦

实现了游标 tabindex 方法的工具组件，用于管理项目间的焦点切换。

View code

Tab to focus

info

了解更多关于游标 tabindex 的信息，请参阅组合组件内的键盘导航

结构

导入所有部件并将它们组合在一起。

vue

<script setup>
import { RovingFocusGroup, RovingFocusItem } from 'reka-ui'
</script>

<template>
  <RovingFocusGroup>
    <RovingFocusItem />
  </RovingFocusGroup>
</template>

API 参考

Group (组)

包含游标聚焦的所有部件

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`currentTabStopId`		`string \| null` The controlled value of the current stop item. Can be binded as `v-model`.
`defaultCurrentTabStopId`		`string` The value of the current stop item. Use when you do not need to control the state of the stop item.
`dir`		`'ltr' \| 'rtl'` The direction of navigation between items.
`loop`	`false`	`boolean` Whether keyboard navigation should loop around
`orientation`		`'vertical' \| 'horizontal'` The orientation of the group. Mainly so arrow navigation is done accordingly (left & right vs. up & down)
`preventScrollOnEntryFocus`	`false`	`boolean` When `true`, will prevent scrolling to the focus item when focused.

Emit	Payload
`entryFocus`	`[event: Event]` Event handler called when container is being focused. Can be prevented.
`update:currentTabStopId`	`[value: string \| null]`

Methods	Type
`getItems`	`(includeDisabledItem?: boolean) => { ref: HTMLElement; value?: any; }[]`

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal" \| "undefined"`

Item (项目)

将继承游标 tabindex 的项目

Prop	Default	Type
`active`		`boolean` When `true`, item will be initially focused.
`allowShiftKey`		`boolean` When `true`, shift + arrow key will allow focusing on next/previous item.
`as`	`'span'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`focusable`	`true`	`boolean` When `false`, item will not be focusable.
`tabStopId`		`string`

Data Attribute	Value
`[data-active]`	非激活状态时存在
`[data-disabled]`	不可聚焦时存在
`[data-orientation]`	`"vertical" \| "horizontal" \| "undefined"`

示例

垂直方向 (Vertical orientation)

vue

<template>
  <RovingFocusGroup :orientation="'vertical'">
    …
  </RovingFocusGroup>
</template>

循环 (Loop)

使用 loop 属性可启用从最后一项循环回第一项，反之亦然。

vue

<template>
  <RovingFocusGroup loop>
    …
  </RovingFocusGroup>
</template>

初始焦点项 (Initial focus item)

将 active 属性设置给项目以使其成为初始焦点项。

vue

<template>
  <RovingFocusGroup>
    <RovingFocusItem>1</RovingFocusItem>
    <RovingFocusItem active>2</RovingFocusItem>
    <RovingFocusItem>3</RovingFocusItem>
  </RovingFocusGroup>
</template>

不可聚焦项 (Unfocusable item)

将 focusable 属性设置为 false 可防止项目被聚焦。

vue

<template>
  <RovingFocusGroup>
    <RovingFocusItem>1</RovingFocusItem>
    <RovingFocusItem :focusable="false">2</RovingFocusItem>
    <RovingFocusItem>3</RovingFocusItem>
  </RovingFocusGroup>
</template>

无障碍性

遵循组合组件内的键盘导航规范。

键盘交互

Key	Description
`ArrowDown`	将焦点移动到组中的下一个游标聚焦项目。
`ArrowRight`	将焦点移动到组中的下一个游标聚焦项目。
`ArrowUp`	将焦点移动到组中的上一个游标聚焦项目。
`ArrowLeft`	将焦点移动到组中的上一个游标聚焦项目。
`SpaceEnter`	触发游标聚焦项目的点击事件。

游标聚焦 ​

结构 ​

API 参考 ​

Group (组) ​

Item (项目) ​

示例 ​

垂直方向 (Vertical orientation) ​

循环 (Loop) ​

初始焦点项 (Initial focus item) ​

不可聚焦项 (Unfocusable item) ​

无障碍性 ​

键盘交互 ​