SuperAPI AI 工具集

mantine-developing

前端与建站

查看项目

更新于 10-16 00:29

技能介绍

用途:帮助开发者使用 Mantine 组件库构建 React 界面,覆盖组件使用、Styles API 样式定制、@mantine/form 表单处理、主题配置与无障碍校验。不适用于基础 React 开发、非 Mantine 的 UI 库(如 Material UI、Chakra)、纯 HTML/CSS,以及 Mantine v6 及更早版本。

主要能力:从 @mantine/core 导入 Button、TextInput、Select、Modal 等组件,从 @mantine/hooks 使用 useDisclosure、useToggle,从 @mantine/form 使用 useForm。Styles API 支持四种定制方式:classNames 属性(推荐配合 CSS Modules)、styles 内联样式、CSS 变量、data 属性表示状态;选择器名称需查阅各组件文档的 Styles API 章节。表单方面,useForm 提供 initialValues、validate、validateInputOnChange,以及 getInputProps、onSubmit、setFieldValue、reset、validate 等方法,复选框需传 { type: 'checkbox' }。多态组件可通过 component 属性改变底层元素,注意 ref 类型随之变化。主题通过 MantineProvider 与 createTheme 配置 primaryColor、colors、components.defaultProps;暗色模式使用 useMantineColorScheme 与 light-dark() CSS 函数。

使用方式:按导入组件、使用组件、用 Styles API 定制、校验无障碍的步骤进行。图标按钮需加 aria-label,Modal 使用 closeButtonLabel,Accordion.Control 用 order 设置标题层级,并测试键盘导航。

常见陷阱:避免嵌套交互元素、禁用按钮上的 Tooltip 需用 data-disabled 加 preventDefault、ActionIcon.Group 不可用 div 包裹、Flex 中 AspectRatio 需显式宽度、区分 Select(必须从列表选择)与 Autocomplete(可自由输入)。

限制:仅覆盖 Mantine v7+;最新文档可通过 Context7 或 https://mantine.dev/llms.txt 获取;详细组件模式见 REFERENCE.md;可配合 mantine-ui-expert 智能体使用,常规任务建议 model="haiku"。