Base UI 激动人心的一年即将到来

Base UI 的故事始于几年前——早于无头 React 组件库开始流行之前——当时我们开始想象一个 Material UI 可以在没有 Material Design 的世界中存在的场景。

我们非常激动地分享这个梦想正在成为现实！今年将看到对 Base UI 的大量投入，我们将扩大团队并努力实现稳定版本（暂定计划于 2024 年末发布），该版本将包含全新的组件、功能和改进。

让我们一起了解一下我们正在准备的一些内容。

更大的组件集

今天的 Base UI 提供了一组适量的组件和 Hook，包括一些稍微复杂的组件，例如 Autocomplete 和 Number Input。但是，我们意识到该软件包仍然缺少开发者为了在实际应用中采用它而需要的许多原始组件。请不要担心，因为我们正在努力发布更多组件，这些组件将随稳定版本一起发布，包括

以及可能更多！我们希望您能参与进来并帮助我们确定优先级，所以请关注未解决的 issue。

改进的自定义 API

目前，Base UI 组件可以使用 slots 和 slotProps 属性进行最大程度的自定义。（在“覆盖组件结构”指南中了解更多信息。）

// Example of the slots prop
<Select slots={{ listbox: 'ol' }} defaultValue="First option">
  <Option value="First option">First option</Option>
  <Option value="Second option">Second option</Option>
</Select>

// Example of the slotProps prop
<Badge slotProps={{ badge: { className: 'my-badge' } }} />

虽然此 API 功能强大，但在某些情况下已被证明不够理想。最值得注意的是，当与 Tailwind CSS 等库一起使用时，它的编写和阅读都过于冗长和复杂。此外，由于 slots 和相应的 slotProps 在 TypeScript 类型方面不相关，因此可能会引入 bug 或导致编译器抱怨有效的代码。

为了解决这些问题，我们正在考虑采用一种新的 API，该 API 将为每个 DOM 节点分配一个离散的子组件——这是许多其他无头组件库偏爱的模式（例如：<Slider.Track />、<Slider.Thumb /> 等）。这种模式有可能从根本上改善样式和结构的自定义体验。

我们仍在充实 API 和实现细节。如果您对此更改有任何疑问或意见，请在 GitHub 上的 RFC 中提出。

我们知道许多项目都依赖于现有的 API，我们想向您保证，我们的首要任务之一是提供平滑的迁移体验。

更全面的动画支持

动画是为任何应用程序增添乐趣的关键元素。我们已经通过发布 CSS Transition 和 CSS Animation 组件，以及 useTransitionTrigger 和 useTransitionStateManager Hook，开始了动画支持方面的工作。它们目前可用于 Popup、Menu 和 Select，并且计划将支持扩展到更多组件，同时添加更多功能。

为了演示效果，这里的 CSS Animation 过渡效果被夸大了。

解决许多 issue

Base UI 努力开箱即用的核心是提供一流的可访问性和用于广泛自定义的直观 API。我们已经标记了在稳定版本发布之前想要解决的几个 issue，这些 issue 涉及键盘导航、更好的 ARIA 支持、焦点样式等领域。

更独立的产品

到目前为止，所有与 Base UI 相关的开发都发生在 Material UI GitHub 仓库中。这在最初很有意义，因为我们当时并不打算让 Base UI 成为独立的产品。由于早期的这个决定，我们看到一些开发者因为明显的与 Material Design 的关联而犹豫尝试它。请放心，Base UI 是一个独立的库，它不包含任何默认样式或主题。

Base UI 不再仅仅是“没有样式的 Material UI”——正如我们在过去几年的开发者趋势中看到的那样，无头组件的增长和采用潜力实际上可能在不久的将来超越 Material UI。为了承认 Base UI 有可能超越 Material UI，我们计划将其移动到其自己的专用 GitHub 仓库，以便与围绕它成长的社区进行更集中的沟通和协作。

帮助我们一起前行

我们很乐意听到您的反馈。分享您的想法和请求的最佳地点是在 GitHub 仓库中。查看现有的 issue 并添加您的想法，如果您没有看到您关心的问题在其他地方得到解决，请随时打开您自己的 issue。

祝您开发愉快！ 👋