@ cycomdatas/ headwindui
由Tailwind CSS,无头UI,和Motion所建的React UI组件库. WCAG 2.1 AA 符合规定.
安装
npm install @cycomdatasystems/headwindui
同伴依赖关系
这些包是 所需经费 并且必须安装在消耗性应用程序中:
npm install react react-dom @headlessui/react @heroicons/react @tanstack/react-table motion tailwindcss
| 软件包 | 版本 | 用于 |
|---|---|---|
react | >=18 | 所有组件 |
react-dom | >=18 | 所有组件 |
@headlessui/react | ^2.0 | 复选框、 Combobox、 Drawer、 菜单、 Modal、 选择等 |
@heroicons/react | ^2.0 | Banner, BottomSheet, Chip, Combobox, DatePicker, 绘图器, 表格 |
@tanstack/react-table | ^8.0 | 图表 |
motion | >=11 | 所有动画组件 |
tailwindcss | ^4.0 | 所有组件( 样式) |
可选同伴依赖关系
只有当您使用所列特定组件时,才需要这些组件:
# For HWDatePicker
npm install date-fns react-day-picker
# For HWToast / hwToast
npm install react-hot-toast
| 软件包 | 版本 | 用于 |
|---|---|---|
date-fns | ^3.0 || ^4.0 | 日期选择器 |
react-day-picker | ^9.0 | 日期选择器 |
react-hot-toast | ^2.4 | 土司 |
使用量
import { HWButton, HWModal, hwToast } from "@cycomdatasystems/headwindui";
import "@cycomdatasystems/headwindui/styles.css";
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
styles.css需要导入. 它包含@theme登记所有hw-*设计代号(bg-hw-primary, (中文(简体) ),text-hw-surface, (中文(简体) ),text-hw-danger, (中文(简体) ),rounded-hw-md, (中文(简体) ),outline-hw-focus-ring等)加上他们的.dark超载 没有它,每个HW组件都会使无样式——按钮没有背景,输入没有边框,需要的域星号是看不见的. 添加尾风 v4@source指向软件包的指示 没有 替换此导入 :@source仅控制类字符串扫描,它不注册设计符.
主题( 光 / 暗 / 系统)
将您的应用程序包入 <HWThemeProvider> 减少 <HWThemeToggle> 随处取取开关. 钩子 useTheme() 曝光情况 { mode, resolved, setMode }。 。 。 .
import { HWThemeProvider, HWThemeToggle } from "@cycomdatasystems/headwindui";
export function App() {
return (
<HWThemeProvider>
<HWThemeToggle />
{/* …rest of your app… */}
</HWThemeProvider>
);
}
为了防止在第一幅画上闪出错误的主题,请将这个脚本插入 <head> 在此之前 反应挂载 :
<script>
(function () {
try {
var s = localStorage.getItem('headwind_theme') || 'system';
var dark = s === 'dark' || (s === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
if (dark) document.documentElement.classList.add('dark');
document.documentElement.setAttribute('data-theme', s);
} catch (e) {}
})();
</script>
用于AI工具
充分利用指南AI_AGENT_GUIDE.md和紧凑的构成部分选择表COMPONENT_INDEX.yaml)在已公布的软件包内起航,因此在消耗性应用中运行的AI编码代理可以读取准确的,版本固定的从 node_modules 没有克隆这个回转。 通过软件包的子路径输出解决它们:
require.resolve("@cycomdatasystems/headwindui/agent-guide"); // → dist/AI_AGENT_GUIDE.md
require.resolve("@cycomdatasystems/headwindui/manifest"); // → dist/manifest/COMPONENT_INDEX.yaml
名单上印有 _packageVersion 在顶端,当缓存副本相对于已安装的版本而言已经停止时,工具可以检测.
发展
# Install dependencies
npm install
# Start Storybook
npm run storybook
# Run tests
npm test
# Build the library
npm run build
命名公约
所有导出组件都使用 HW 前缀 :
- 组件 :
HWButton, (中文(简体) ),HWModal - 子组件 :
HWModal.Title, (中文(简体) ),HWMenu.Item - 道具 :
HWButtonProps, (中文(简体) ),HWModalProps - 必需的 API :
hwToast.success()
许可证
麻省理工学院