用途
该技能提供 MUI(Material UI)核心组件的模式与最佳实践参考,面向使用 React 与 MUI 构建界面的开发者,帮助快速查阅常用组件的标准写法与常见配置。
主要能力
资料按组件类别组织,包含以下内容:
- 输入组件:TextField(含多行/textarea、InputAdornment、inputProps)、Autocomplete(静态选项、多选 Chip、异步/服务端选项)、Select(含多选与 Checkbox)、Checkbox/Radio/Switch、Slider 与 Rating。
- 展示组件:Typography、Chip、Avatar 与 AvatarGroup、Badge、Tooltip、Alert、Table。
- 导航组件:AppBar、Drawer(临时与常驻)、Tabs、Menu、Breadcrumbs 与 Pagination。
- 反馈组件:Dialog、Snackbar、Progress(CircularProgress、LinearProgress)、Backdrop、Skeleton。
- 布局:Card 与 Paper、List。
每个组件均给出导入语句与 JSX 示例,展示常用属性(如 variant、size、fullWidth、error、helperText、renderInput、renderTags、anchorOrigin、transformOrigin 等)及典型组合方式。
使用方式
资料以代码片段形式呈现,开发者可按需复制对应组件的导入与 JSX 结构,替换其中的变量与回调(如 value、onChange、options 等)以适配自身项目。示例中涉及 React 状态(如 useState)与路由组件(如 RouterLink)的用法,需在相应环境中使用。
适用场景
适用于使用 MUI 构建 React 应用界面的场景,包括表单输入、数据展示、导航菜单、弹窗提示、加载状态与卡片布局等常见 UI 需求。
限制
资料未提供安装命令、版本要求、主题定制、性能优化或无障碍完整指南等信息;部分示例(如 List 组件)在资料末尾被截断,未完整呈现。具体 API 细节与最新用法请以 MUI 官方文档为准。