英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

扎格

适用于 React、Vue、Solid 和 Svelte 的可访问组件逻辑。

使用状态机构建对话框、菜单、组合框、日期选择器等，这些状态机处理键盘交互、焦点管理和 ARIA 属性。您控制标记和样式；Zag 处理行为。

文档 · 快速开始 · 更新日志 · Discord

为什么选择 Zag？

• 自带设计。 无头 API 让你可以控制渲染元素和任何样式解决方案。
• 跨框架重用行为。 相同的组件状态机驱动 React、Vue、Solid 和 Svelte，同时也有适用于 Preact 和原生 JavaScript 的适配器。
• 构建可访问的交互。 键盘导航、焦点管理和 ARIA 行为遵循 WAI-ARIA 编写实践。
• 使复杂行为可预测。 状态机描述组件如何响应交互，Playwright 测试检查跨框架的行为。

快速开始

安装组件机器和框架的适配器。对于 React 切换组：

npm install @zag-js/toggle-group @zag-js/react

将机器连接到您的标记上：

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

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

  return (
    <div {...api.getRootProps()}>
      <button {...api.getItemProps({ value: "bold" })} aria-label="Bold">
        B
      </button>
      <button {...api.getItemProps({ value: "italic" })} aria-label="Italic">
        I
      </button>
      <button {...api.getItemProps({ value: "underline" })} aria-label="Underline">
        U
      </button>
    </div>
  )
}

添加你的样式，然后浏览 切换组文档 以查看完整的 API 以及其他框架的示例。

贡献

欢迎提交错误报告、文档改进和新组件的想法。请阅读贡献指南了解本地设置、开发命令以及如何提交更改。

致谢

Zag 源于构建 Chakra UI，并从 Pure UI、Pure UI Control、Material Components Web、Radix UI、XState、Vue、Lit 和 Sonner 中汲取灵感。

许可证

MIT © Chakra 系统公司