mantine-select-stepper
基于 Mantine 的优雅选择步进器 React 组件
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：mantine-select-stepper。 它的用途是：基于 Mantine 的优雅选择步进器 React 组件 完整的 Skill 内容见：https://321skill.com/skills/mantine-select-stepper/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我正在用Mantine开发一个语言选择器，希望用户能通过左右滑动或点击箭头来切换语言，并且有平滑的过渡动画。’，它会建议你安装并使用 `@gfazioli/mantine-select-stepper` 组件，并提供一个包含 `data` 选项数组和配置了 `loop`（循环）属性的基础代码示例，快速实现你的需求。
介绍
Mantine SelectStepper 是一个专为 React 应用设计的 UI 组件，它解决了在有限空间内进行列表项选择时，传统下拉框或单选按钮交互不够直观、移动端体验不佳的问题。它通过步进器（Stepper）的形式，允许用户通过点击左右箭头按钮或使用滑动手势，在选项之间优雅地导航和选择。
使用方式非常简单，开发者只需通过 npm 安装该组件包，并引入其样式文件，即可像使用普通 Mantine 组件一样，通过 data 属性传入选项数组来渲染一个功能完整的步进选择器。组件提供了丰富的 Props 用于定制外观、行为和响应式布局。
这个组件非常适合前端开发者和全栈开发者，尤其是那些正在使用 Mantine 9.x 和 React 19 技术栈构建现代化 Web 应用，并希望提升表单或设置项选择交互体验的团队。对于需要为移动端提供良好触摸支持，或希望界面具有流畅动画效果的项目尤为合适。
需要注意的是，该组件强依赖于 Mantine 9.x 版本，如果你的项目使用的是更旧版本的 Mantine 或 React，可能需要先升级框架。此外，虽然组件本身功能完善，但在需要高度定制化选择逻辑或与复杂表单状态深度集成的场景下，可能需要进行额外的开发工作。
核心特点
与普通的 Mantine Select 组件相比，它提供了独特的步进式导航交互和流畅的动画；与其他独立步进器组件相比，它深度集成 Mantine 的 Styles API 和响应式系统，并原生支持触摸滑动手势和完整的键盘导航，提供了更丰富的控制方法（如 Imperative API）和视觉变体（如渐变按钮）。
注意事项
不适合需要一次性展示所有选项供快速筛选，或选项数量非常庞大（如成百上千条）的场景。
常见问题
这个组件支持 React 18 吗？
不支持，它需要 React 19 和 Mantine 9.x。
如何自定义左右箭头的图标？
可以通过 `previousIcon` 和 `nextIcon` 属性传入自定义的 React 节点来替换默认图标。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/mantine-select-stepper/raw/index.md 读取 mantine-select-stepper 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/mantine-select-stepper/raw/index.md（查看排版版本）