@aria-ui/要素

一组无风格,可访问 光- DOM- 只有网络组件 用于构建用户界面。 被Radix UI和Ark UI所启发,但作为本地自定义元素被运出,在任何框架——或平面HTML中工作.

播放场 : https://aria-ui.pages.dev/ (中文(简体) )

特征

• 只有轻度DOM. 没有Shadow DOM,所以你的全局风格表,Tailwind课,和选择者喜欢 [aria-selected="true"] 或者说 [data-active] 直接应用到您放入页面的元素.
• 设计上没有风格. 每一个组件舰只0 CSS. 国家通过标准ARIA属性和 data-* 属性可以任意样式.
• 建于WAI-ARIA APG上. 键盘交互、焦点管理和ARIA作用 WAI-ARIA 授权做法指南 模式.
• 可编组部件. 每个组成部分分为重点定制要素(*-root, (中文(简体) ), *-trigger, (中文(简体) ), *-popup, (中文(简体) ), *-positioner, (中文(简体) ), *-item通过共享商店进行交流.
• 框架-不可知论. 直接使用 HTML 中的元素,或以 @aria-ui/cli 用于反应,Vue,Solid,Preact,和斯维尔特.

构成部分

安装

npm install @aria-ui/elements
# or
pnpm add @aria-ui/elements

快开始

登记每个组件,单调:

import { registerElements } from '@aria-ui/elements'

registerElements()

然后在 HTML 中任意使用元素 :

<aria-ui-popover-root>
  <aria-ui-popover-trigger tabindex="0">Open popover</aria-ui-popover-trigger>
  <aria-ui-popover-positioner>
    <aria-ui-popover-popup>
      <p>Hello from a popover!</p>
    </aria-ui-popover-popup>
  </aria-ui-popover-positioner>
</aria-ui-popover-root>

列表框示例

<aria-ui-listbox-root>
  <aria-ui-listbox-item value="apple">Apple</aria-ui-listbox-item>
  <aria-ui-listbox-item value="banana">Banana</aria-ui-listbox-item>
  <aria-ui-listbox-item value="cherry">Cherry</aria-ui-listbox-item>
</aria-ui-listbox-root>

const listbox = document.querySelector('aria-ui-listbox-root')!
listbox.addEventListener('valueChange', (event) => {
  console.log('Selected:', event.detail)
})

菜单示例

<aria-ui-menu-root>
  <aria-ui-menu-trigger tabindex="0">Actions</aria-ui-menu-trigger>
  <aria-ui-menu-positioner>
    <aria-ui-menu-popup>
      <aria-ui-menu-item value="cut">Cut</aria-ui-menu-item>
      <aria-ui-menu-item value="copy">Copy</aria-ui-menu-item>
      <aria-ui-menu-item value="paste">Paste</aria-ui-menu-item>
    </aria-ui-menu-popup>
  </aria-ui-menu-positioner>
</aria-ui-menu-root>

可动摇树的子路径导入

每个组件也会在自己的子路径下被发布,因此您只能注册您需要的部件:

import { registerListboxRootElement, registerListboxItemElement } from '@aria-ui/elements/listbox'

registerListboxRootElement()
registerListboxItemElement()

可用的切入点 :

• @aria-ui/elements - 完全捆绑加起来 registerElements()
• @aria-ui/elements/listbox
• @aria-ui/elements/menu
• @aria-ui/elements/popover
• @aria-ui/elements/tooltip
• @aria-ui/elements/overlay ——共享覆盖原始

设置道具

每个道具都可以同时作为HTML属性和JS属性提供. 复杂值(阵列、对象、, null)作为JSON存储:

<!-- Via attributes -->
<aria-ui-listbox-root multiple values='["apple","banana"]'>
  <aria-ui-listbox-item value="apple">Apple</aria-ui-listbox-item>
  <aria-ui-listbox-item value="banana">Banana</aria-ui-listbox-item>
</aria-ui-listbox-root>

// Via JS properties
const listbox = document.querySelector('aria-ui-listbox-root')!
listbox.multiple = true
listbox.values = ['apple', 'banana']

样式

部件通过标准无障碍属性和少数特性暴露其状态 data-* 属性 :

有 Tailwind 的示例 :

<aria-ui-listbox-item
  value="apple"
  class="block px-3 py-2 cursor-pointer hover:bg-blue-50 aria-selected:bg-blue-100 data-active:outline-2 data-active:outline-blue-500"
>
  Apple
</aria-ui-listbox-item>

活动

组件发送标准DOM事件,其有效载荷在 detail 属性 :

valueChange 编号 : valuesChange 可取消——拨打 event.preventDefault() 以控制模式运行列表框.

与框架一起使用

对于回放、Vue、Solid、Preact和Svelte,您可以使用 @aria-ui/cli,它处理属性/属性映射,并将 DOM 事件转换为平面框架回调.

许可证

麻省理工学院