Webrix.js - 构建交互式 React 应用的基石

在过去的三年里，我一直与一支优秀的 UI 开发团队合作开发 Amdocs 的一款旗舰产品，在此过程中，我们面临了很多挑战。

为了解决这些挑战，我们开发了一系列 React 组件和钩子，每个组件和钩子都致力于解决一个 UI 挑战。

最近，我们决定将这些组件和钩子作为开源库发布，名为webrix.js。

与其他许多提供功能齐全、品牌化终端用户组件的组件库不同，我们决定另辟蹊径，开发一套小型、单一用途、无品牌化的组件。这让您可以更自由地开发自己的组件库，并打造最符合您领域需求的UX。

以下是 Webrix.js 中的一些组件：

活动

该<Movable/>组件可用于创建可移动元素，并可根据需要添加约束。我们用它<Movable/>来创建滑块、调整大小器、可移动模态框、滚动条手柄等元素。点击此处查看更多<Movable/>示例。

可调整大小

该<Resizable/>组件可用于创建可调整大小的元素，并可选择添加约束。我们用它<Resizable/>来创建可调整大小的模态框、图像编辑工具和可调整大小的布局。点击此处查看更多<Resizable/>示例。

可弹出

该<Poppable/>组件可用于创建“弹出”于屏幕之外的元素。我们用它<Poppable/>来创建弹出窗口、菜单、工具提示、下拉菜单等等。它<Poppable/>内置了溢出避免机制和动态 z-index 计算。点击此处查看更多<Poppable/>示例。

可滚动

该<Scrollable/>组件可用于创建带有可滚动内容和完全可自定义滚动条的元素。这些元素的行为与原生可滚动元素完全相同，因此使用起来非常简单，无需任何 CSS 技巧。点击此处查看更多<Scrollable/>示例。

可折叠的

该<Collapsible/>组件允许您折叠/展开任意内容高度的元素，并为其应用流畅的过渡效果。仅使用 CSS 很难实现这一点，因此我们结合使用了 JS 和 CSS 来解决这个问题（我们将在文档中进一步讨论该解决方案）。点击此处查看更多<Collapsible/>示例。

这些只是 Webrix.js 中部分可用组件。

由于这些组件已被 Amdocs 的一些产品所使用，因此它们经过了现场测试，并已达到一定的成熟度。

我邀请您访问我们的文档，并查看一些使用 Webrix.js 创建的示例。

另外，在 GitHub 上给我们的项目点个星标也会对我们帮助很大！😁