@aria-ui/用户
用于在顶部建立可访问的 Web 组件的可重复使用的钩子和辅助工具 @aria-ui/core。 。 。 .
这个软件包提供了组件 @aria-ui/elements 使用内部——ARIA属性反射,采集导航,指针/键盘交互,存在和过渡跟踪等等. 您可以使用它来编写遵循相同模式的自定义元素 .
安装
npm install @aria-ui/core @aria-ui/utils
# or
pnpm add @aria-ui/core @aria-ui/utils
API 概览
ARIA 反射钩
每个钩子订阅一个取出器,并将结果写入主机元素上相应的ARIA属性. 它们是微小的效果, 但使用它们保持你的设置功能 声明和一致.
| 钩子 | 反映于 |
|---|---|
useAriaDisabled(host, get) | aria-disabled |
useAriaExpanded(host, get) | aria-expanded |
useAriaSelected(host, get) | aria-selected |
useAriaControls(host, get) | aria-controls |
useAriaDescribedBy(host, get) | aria-describedby |
useAriaMultiselectable(host, get) | aria-multiselectable |
useAriaOrientation(host, get) | aria-orientation |
useAriaActivedescendant(host, get) | aria-activedescendant |
useAriaHasPopup(host, get) | aria-haspopup |
加低级助手 getAriaHasPopup(element) 财务报告和审定财务报表 setAriaHasPopup(element, value)。 。 。 .
import { useAriaDisabled, useAriaExpanded } from '@aria-ui/utils'
function setupTrigger(host, props) {
useAriaDisabled(host, () => props.disabled.get())
useAriaExpanded(host, () => props.open.get())
}
收款
收藏助手允许您构建复合部件——列表框,菜单,组合框——其中母元素协调了一组项目元素.
| 导出 | 说明 |
|---|---|
Collection | 按键的一组命令项 value按DOM位置排序. |
getCollectionItemValue(element) | 读取 value 收集项目. |
createCollectionStore() | 创建仓库 getCollection(), (中文(简体) ), getHighlightedValue(), (中文(简体) ), setHighlightedValue(), (中文(简体) ), first()等 (中文(简体) ). 被设计成嵌入到您自己的仓库中. |
setupCollectionItem(host, props, getStore, getVisible?) | 在其母收藏库中注册项目元素 。 登记、身份证分配和 data-active 属性. |
handleCollectionNavigation(event, collection, getHighlighted, setHighlighted, orientation, loop?) | 进程a keydown arowUp/Down/Left/Right/Home/End 并更新突出显示值的事件。 回返 true 如果事件被处理. |
指针和键盘交互
| 钩子 | 说明 |
|---|---|
useEventListener(host, type, listener, options?) | 添加一个 DOM 事件倾听器, 当主机断开时会自动删除 . |
useGlobalEventListener(host, type, listener) | 添加一个 window 事件倾听器绑定在主机连接的生命周期上,在主机之间被复制. |
usePress(host, onPress) | 为鼠标、触摸和键盘(Enter/Space)激活而起火的统一压力处理器. |
useHover(host, { openDelay, closeDelay, onOpen, onClose }) | 以可配置的开放/接近的延迟进行 Hover 跟踪 。 被流行乐和工具提示所使用. |
usePresence(host, present) | 跟踪主机是否出现在 DOM 中, 带有用于卸载后激活行为的钩子. |
useTransitionStatus(host, present) | 轨迹 CSS 过渡状态'entering', (中文(简体) ), 'entered', (中文(简体) ), 'exiting', (中文(简体) ), 'exited')用于动画叠加. |
useDisabledMountTransitionStyle(host) | 在初始挂载时禁用 CSS 转换, 以避免在第一个涂料上闪出 . |
createDelayedToggle({ openDelay, closeDelay }) | 独立延迟打开/关闭状态机器. |
身份和属性
| 钩子 | 说明 |
|---|---|
useElementId(host) | 指定一个稳定,独特的 id 如果主机元素还没有一个的话。 返回代码 。 用于 aria-activedescendant 财务报告和审定财务报表 aria-controls。 。 。 . |
useAttribute(host, name, get) | 反映任意 HTML 属性的值. |
useDataState(host, get) | 反映状态字符串到 data-state。 。 。 . |
特性检测
| 导出 | 说明 |
|---|---|
FeatureDetection | 公共特征检测助手. |
FeatureDetectionInternals | 内部特征检测助手. |
再出口
为了方便,这个包裹也再出口 getNearestOverflowAncestor 从 @zag-js/dom-query。 。 。 .
示例:一个最小列表框项目
import {
defineCustomElement,
defineProps,
onMount,
type HostElement,
type State,
} from '@aria-ui/core'
import { setupCollectionItem, useAriaSelected, useEventListener } from '@aria-ui/utils'
import { MyListboxContext } from './my-listbox-context'
interface ItemProps {
value: string
}
const itemProps = defineProps<ItemProps>({
value: { default: '', attribute: 'value', type: 'string' },
})
function setupItem(host: HostElement, props: State<ItemProps>) {
onMount(host, () => {
host.role = 'option'
})
const getStore = MyListboxContext.consume(host)
setupCollectionItem(host, props, getStore)
useAriaSelected(host, () => {
return getStore()?.selectedValues.get().includes(props.value.get()) ?? false
})
useEventListener(host, 'click', () => {
getStore()?.toggle(props.value.get())
})
}
export class MyItemElement extends defineCustomElement(setupItem, itemProps) {}
许可证
麻省理工学院