Zag

用于可访问JavaScript组件的有限状态机

一次编写，随处使用 🦄：组件交互以框架无关的方式建模。我们为React、Solid或Vue等JS框架提供适配器。
注重无障碍访问 ♿️：Zag在设计时考虑了无障碍性。我们处理了许多与键盘交互、焦点管理、aria角色和属性相关的细节。
无头设计 ✨：机器API完全没有样式，让您可以自由使用任何您喜欢的样式解决方案。
由状态机驱动 🌳：Zag基于状态图的最新理念构建。我们不遵循SCXML规范，但我们创建了一个API，我们认为它将帮助我们更快地构建更复杂的组件。

文档

要查看文档，请访问 zagjs.com/

发布

有关更新日志，请查看 CHANGELOG.md

问题

随着设计系统和组件驱动开发的兴起，在多个框架中不断重复实现常见的组件模式（标签页、菜单、模态框等）。

这些实现在本质上似乎非常相似，差异主要在于框架的响应性和效果系统（例如React.js中的useState、useEffect）。特定框架的解决方案往往随时间增长而变得复杂，并且经常变得难以理解、调试、改进或测试。

解决方案

Zag是一个使用状态机方法实现常见组件模式的JavaScript API。

安装

npm i --save @zag-js/{component}

# 或

yarn add @zag-js/{component}

{component}代表任何组件机器，如对话框（@zag-js/dialog）、工具提示（@zag-js/tooltip）等。

对于特定框架的解决方案，我们提供简单的包装器来帮助您使用组件状态机。

⚛️ @zag-js/react - 用于在React应用中使用机器的React钩子
💚 @zag-js/vue - 用于在Vue应用中使用机器的Vue组合
🎷 @zag-js/solid - 用于在Solid.js应用中使用机器的Solid.js实用工具

使用

import { normalizeProps, useMachine } from "@zag-js/react"
import * as toggle from "@zag-js/toggle-group"
import { useId } from "react"

export function ToggleGroup() {
  const [state, send] = useMachine(toggle.machine({ id: useId() }))
  const api = toggle.connect(state, send, normalizeProps)

  return (
    <div {...api.getRootProps()}>
      <button {...api.getItemProps({ value: "bold" })}>B</button>
      <button {...api.getItemProps({ value: "italic" })}>I</button>
      <button {...api.getItemProps({ value: "underline" })}>U</button>
    </div>
  )
}