专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

全新 无样式 UI 组件库

ins518 2025-01-20 13:53:33 技术文章 21 ℃ 0 评论

Base UI 是由 Radix、Material UI 和 Floating UI 的开发者们创建的一个无样式 unstyled React 组件库，不捆绑 CSS，可以使用 Tailwindcss、CSS Modules、CSS-in-JS 等任何其他样式技术，专注于创建可访问的用户界面，提供了一套完整的开源 UI 组件。

组件使用：

npm i @base-ui-components/react

部分组件预览：

组合自定义 React 组件：

Base UI 提供了 render 属性，允许您将 Base UI 组件与自定义 React 组件组合使用。

<Menu.Trigger render={<MyButton size="md"/>}> Open menu</Menu.Trigger>


除此之外，还可以指定渲染的节点元素：

<Menu.Popup>  <Menu.Item render={<a href="base-ui.com"/>}>Add</Menu.Item></Menu.Popup>

CSS Modules：

CSS-in-JS：

Portals：

Base UI 使用 portals 来渲染弹出组件，例如 Dialog 和 Popover，弹出窗口将始终显示在页面内容之上，而且样式中的任何 z-index 属性都不会与它们冲突。

<body> 
  <div className="Root">{children}</div>
</body>
<style>
    .Root { isolation: isolate; }
</style>

功能和特性：

无样式组件：Base UI 的组件不包含预设样式，不捆绑 CSS，也不强制规定样式解决方案，让您完全控制应用程序的 CSS 层。

兼容性：Base UI 兼容 Tailwind、CSS Modules、纯 CSS、CSS-in-JS 或您偏好的任何其他样式引擎。

可访问性（Accessible）：可访问性是 Base UI 的首要关注点，以确保所有用户都能轻松使用应用，包括但不限于残障用户。

WAI-ARIA 标准：Base UI 组件遵循 WAI-ARIA 设计模式，并在多种平台、设备、浏览器、屏幕阅读器和其他环境中进行测试。

可组合性（Composable）：组件 API 完全开放，您可以直接访问每个节点，轻松添加或移除部分，并以您喜欢的方式包装它们。

焦点管理：Base UI 组件在用户交互后自动管理焦点，一些组件提供 initialFocus 和 finalFocus 等属性，用于配置焦点管理。

《前端资源推荐》收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、转发、关注！！！

GitHub：https://github.com/mui/base-ui

官方文档：https://base-ui.com/

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表