Mantine 7.16.0 版本发布：全新交互组件与功能增强

Mantine 是一个基于 React 的现代化 UI 组件库，专注于提供高质量、可访问且开发者友好的组件和工具。在最新的 7.16.0 版本中，Mantine 团队带来了多个令人兴奋的新功能和改进，包括全新的滚动监听钩子、目录组件、输入框清除按钮等，进一步丰富了开发者的工具箱。

滚动监听与目录组件

新版本引入了 use-scroll-spy 钩子，这是一个强大的工具，可以跟踪页面滚动位置并返回当前视口中的元素索引。这个功能特别适合实现类似文档目录的交互效果，比如 Mantine 官网右侧的导航栏。

const spy = useScrollSpy({
  selector: '#mdx :is(h1, h2, h3, h4, h5, h6)',
});

基于这个钩子，Mantine 还新增了 TableOfContents 组件，它封装了滚动监听功能，可以轻松创建美观的目录导航。开发者可以通过简单的配置实现复杂的滚动交互效果，而无需处理底层细节。

输入框增强

新版本为 Input 组件添加了 ClearButton 子组件，使得创建可清除内容的输入框变得更加简单。这个按钮会自动继承输入框的尺寸，确保视觉一致性。

<Input
  value={value}
  rightSection={value !== '' ? <Input.ClearButton onClick={clearValue} /> : undefined}
/>

弹出框覆盖层

Popover 及其衍生组件现在支持 withOverlay 属性，可以添加模糊背景覆盖层，增强视觉焦点效果。这个功能特别适合创建模态对话框或强调重要内容。

<Popover withOverlay overlayProps={{ blur: '8px' }}>
  {/* 内容 */}
</Popover>

轮播图容器查询

Carousel 组件现在支持容器查询（Container Queries），这意味着响应式行为不再依赖于视口尺寸，而是基于容器本身的宽度。这一改进使得轮播图在复杂布局中的表现更加灵活可靠。

<Carousel
  type="container"
  slideSize={{ base: '100%', '300px': '50%', '500px': '33.333333%' }}
/>

表单与交互增强

RangeSlider 组件新增了 restrictToMarks 属性，可以将滑块值限制在预设的标记点上，提供更精确的控制。Pagination 组件则新增了 withPages 属性，允许隐藏页码按钮，仅保留前后导航按钮。

在表单处理方面，useForm 钩子新增了 touchTrigger 选项，可以更精细地控制字段的"已触摸"状态判定逻辑，支持"值变化"或"获得焦点"两种触发方式。

总结

Mantine 7.16.0 版本通过引入这些新功能和改进，进一步提升了开发体验和用户交互质量。从滚动监听、目录导航到输入框增强和容器查询支持，这些更新都体现了 Mantine 团队对开发者需求的深入理解和对现代 Web 开发趋势的把握。

这些新特性不仅提高了开发效率，也为创建更丰富、更专业的用户界面提供了更多可能性。无论是构建文档网站、数据密集型应用还是交互式界面，Mantine 7.16.0 都能提供强大的支持。