当前位置：首页 > news >正文

corvu：SolidJS终极UI原语库——解锁无障碍设计与高度定制化开发新体验

news 2026/8/14 20:36:24

corvu：SolidJS终极UI原语库——解锁无障碍设计与高度定制化开发新体验

【免费下载链接】corvu🐦‍⬛ Unstyled, accessible and customizable UI primitives for SolidJS项目地址: https://gitcode.com/gh_mirrors/co/corvu

corvu是一个专为SolidJS打造的无样式、无障碍且高度可定制的UI原语库，它为开发者提供了构建现代Web应用所需的核心组件基础。无论是初学者还是资深开发者，都能通过corvu快速实现符合WCAG标准的界面，同时保持设计的灵活性和代码的简洁性。

为什么选择corvu？三大核心优势解析

🚀 开箱即用的无障碍支持

在Web开发中，无障碍设计往往被忽视或难以实现。corvu从底层架构上就融入了无障碍理念，所有组件都遵循WCAG标准，确保键盘导航、屏幕阅读器兼容和焦点管理等关键功能无需额外配置。

例如，packages/dialog/src/Root.tsx组件内置了ARIA属性和焦点陷阱逻辑，让开发者无需深入了解无障碍细节就能创建符合标准的模态框。

🎨 完全无样式，高度定制自由

与传统UI库不同，corvu不提供预设样式，而是专注于组件的行为逻辑。这意味着你可以完全控制组件的外观，轻松集成到任何设计系统中。无论是使用Tailwind、CSS模块还是其他样式方案，corvu都能无缝配合。

🔄 专为SolidJS优化的响应式设计

corvu充分利用SolidJS的响应式特性，组件状态管理高效且直观。通过packages/utils/src/create/controllableSignal.ts等工具，实现了组件内部状态与外部控制的完美平衡，让复杂交互变得简单。

核心组件展示：从基础到高级

日期选择变得简单：Calendar组件

corvu的日历组件提供了完整的日期选择功能，支持单日期、日期范围选择，以及禁用特定日期等高级特性。其模块化设计允许你只导入需要的部分，减小应用体积。

模态交互新体验：Dialog组件

对话框是Web应用中不可或缺的组件，corvu的Dialog组件不仅包含基本的显示/隐藏功能，还支持嵌套对话框、键盘快捷键关闭和背景点击关闭等实用特性。

灵活布局解决方案：Resizable组件

在构建复杂布局时，可调整大小的面板非常实用。corvu的Resizable组件支持水平和垂直方向的调整，还提供了碰撞检测和最小尺寸限制等高级功能。

快速开始：5分钟上手corvu

1️⃣ 安装corvu

首先，通过npm或pnpm安装corvu：

git clone https://gitcode.com/gh_mirrors/co/corvu cd corvu pnpm install

2️⃣ 导入并使用组件

以Accordion组件为例，只需几行代码即可实现一个功能完善的手风琴组件：

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@corvu/accordion'; function MyAccordion() { return ( <Accordion type="single" collapsible> <AccordionItem value="item-1"> <AccordionTrigger>第一部分</AccordionTrigger> <AccordionContent>这是第一部分的内容</AccordionContent> </AccordionItem> <AccordionItem value="item-2"> <AccordionTrigger>第二部分</AccordionTrigger> <AccordionContent>这是第二部分的内容</AccordionContent> </AccordionItem> </Accordion> ); }

3️⃣ 添加自定义样式

由于corvu组件是无样式的，你可以根据需要添加自定义CSS：

.accordion-trigger { padding: 0.5rem 1rem; background: #f5f5f5; border: 1px solid #e5e5e5; cursor: pointer; } .accordion-content { padding: 1rem; border: 1px solid #e5e5e5; border-top: none; }