前端UI组件【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址https://gitcode.com/gh_mirrors/re/react-admin点击查看免费下载react-admin 基于 Material-UI 构建其自定义布局能力高度依赖 Material-UI 提供的三个布局组件Box、Stack与Grid。无论是设计表单页、列表页的侧边栏Aside还是拼装仪表盘Dashboard的卡片区这三个组件几乎无处不在。本指南以 docs/BoxStackGrid.md 为骨架结合仓库内 ra-ui-materialui、examples 等源码与示例系统讲解三者的核心用法、常用属性与最佳实践。读完你将掌握用Box快速施加内联样式、用Stack高效排列纵向/横向元素、用Grid构建响应式 12 列网格布局并学会在 react-admin 场景中正确地组合它们。说明本文所述三个组件均来自mui/materialreact-admin 的所有组件如表单输入框、字段、按钮也都支持sx属性因此本文的布局技巧可直接套用到 react-admin 的任意页面。一、Box一切 CSS 工具属性的通用包装器Box是 Material-UI 中最常用的组件之一它的定位是wrapper component for most of the CSS utility needs——充当几乎所有 CSS 工具属性的包装容器。默认情况下它渲染为一个div元素。1.1 通过sx属性快速样式化Box接受完整的 sx 属性使其样式书写极为简洁import { Box } from mui/material; const MyComponent () ( Box sx{{ width: 300, height: 300, bgcolor: primary.main, :hover: { backgroundColor: primary.dark, opacity: [0.9, 0.8, 0.7], }, }} // ... /Box );注意上例中几个sx的进阶用法bgcolor: primary.main直接引用主题调色板theme.palette中的颜色:hover书写伪类选择器实现悬停效果opacity: [0.9, 0.8, 0.7]传入数组表示不同断点下的响应式取值。关于sx的完整语法——包括简写属性如m代表margin、px代表左右padding、主题感知取值等可参阅仓库文档 docs/SX.md。常用的简写包括m/mt/mr/mb/ml/mx/mymargin 系列p/pt/pr/pb/pl/px/pypadding 系列bgcolorbackgroundColor1.2 用component渲染任意元素Box不仅限于渲染div通过component属性可以渲染任意 React 组件或原生元素。例如渲染一个带样式的spanexport default function BoxComponent() { return ( Box componentspan sx{{ p: 2, border: 1px dashed grey }} ButtonSave/Button /Box ); }这一特性在 react-admin 源码中也有直接体现。例如 packages/ra-ui-materialui/src/layout/LinearProgress.tsx 在加载进度条尚未显示时用Box componentspan渲染一个占位元素以避免视觉跳动return oneSecondHasPassed ? ( StyledProgress className{className} {...rest} / ) : ( Box componentspan sx{{ my: 1, height: 4, display: block, }} / );1.3 关键实践优先用sx而非Box包裹在 react-admin 中几乎所有组件NumberField、TextInput、Button等都直接支持sx属性。因此当需要调整某个元素自身的间距或样式时应直接使用该元素的sx属性而不是额外包一层Box// 推荐直接使用 sx NumberField sourcetotal options{{ style: currency, currency: USD }} sx{{ fontWeight: bold }} / // 不推荐额外包裹 Box Box fontWeightbold NumberField sourcetotal options{{ style: currency, currency: USD }} / /BoxTip如果你需要借助Box上的display: flex或display: grid来布局优先改用专用的Stack与Grid组件——它们在语义和性能上都更合适。1.4 仓库实例表单中的Box布局在 examples/simple/src/posts/PostEdit.tsx 中示例应用用Box配合 FlexBox 属性组织表单输入项const SanitizedBox ({ fullWidth, ...props }: BoxProps { fullWidth?: boolean }) Box {...props} /; // 在表单中使用 SanitizedBox displayflex flexDirectioncolumn width100% justifyContentspace-between fullWidth TextInput InputProps{{ disabled: true }} sourceid / TextInput sourcetitle validate{required()} resettable / /SanitizedBox这里把displayflex、flexDirectioncolumn等直接作为Box的属性传入Box 会把它们转译为 CSS。注意示例中的SanitizedBox仅是为了过滤掉 react-admin 表单透传的非 DOM 属性如fullWidth在普通场景下直接使用Box即可。此外examples/simple/src/users/Aside.tsx 的注释代码展示了一个典型的响应式Box写法可用它替换手写 styled 组件Box sx{{ width: { sm: 200, md: 0 }, margin: { sm: 1em, md: 0 }, overflowX: { md: hidden }, }} 即通过给同一属性传入按断点sm/md取值的对象实现窄屏显示、宽屏隐藏的侧边栏效果。二、Stack纵向/横向一维布局容器Stack用于把子元素按**垂直column或水平row**方向排列是最贴合元素列表/工具栏/操作按钮组等一维布局场景的容器。Stack内部渲染一个display: flex的div任何 React 元素都可以作为其子节点包括嵌套的Stack本身。2.1 基础用法与spacing用spacing控制子元素之间的间距。间距值可以是任意数字含小数也可以是字符串该值会被内部通过theme.spacing()辅助函数转换为具体的 CSS 值如spacing{2}对应theme.spacing(2)即两倍基础间距单位import { Stack } from mui/material; const Items () ( Stack spacing{2} ItemItem 1/Item ItemItem 2/Item ItemItem 3/Item /Stack );2.2direction与 FlexBox 属性Stack默认按**纵向column**排列。通过directionrow可切换为横向排列同时它也接受全部 FlexBox 属性作为 props方便直接写出居中、两端对齐等布局Stack directionrow justifyContentcenter alignItemscenter spacing{2} Stack directionrow spacing{2} ItemItem 1/Item ItemItem 2/Item ItemItem 3/Item /Stack2.3divider在子元素之间插入分隔线divider属性接收一个 React 元素会在每个相邻子元素之间自动插入该元素非常适合列表项之间的分隔线import { Stack } from mui/material; export const DividerStack () ( div Stack directionrow divider{ Box componenthr sx{{ border: (theme) 1px solid ${theme.palette.mode dark ? #262B32 : #fff}, }} / } spacing{2} ItemItem 1/Item ItemItem 2/Item ItemItem 3/Item /Stack /div );上例的分隔线还根据主题模式theme.palette.mode是dark还是light动态选择颜色展示出sx接收回调函数访问主题的能力。2.4 仓库实例CRM 示例中的Stack组合examples/crm/src/activity/ActivityLog.tsx 展示了Stack的嵌套与间距组合用于构建活动日志时间线Stack mt{0.5} {Array.from({ length: 5 }).map((_, index) ( Stack spacing{2} sx{{ mt: 1 }} key{index} Stack directionrow spacing{2} // ...而 examples/crm/src/activity/ActivityLogContactCreated.tsx 则用一行代码实现头像 文本的经典横排布局ListItem disableGutters Stack directionrow spacing{1} alignItemscenter width100% Avatar width{20} height{20} record{contact} / {/* ... */}可以看到directionrowspacingalignItemscenter的组合几乎是 react-admin 自定义行布局的标准范式。三、Grid响应式 12 列栅格布局Grid是用于二维网格布局的容器组件基于12 列栅格系统与 CSS Grid 语义类似但由组件封装管理。3.1 基本用法containeritemxs使用Grid container定义网格容器内部的Grid item通过断点属性如xs、sm、md声明占据的列数import Grid from mui/material/Grid; export const BasicGrid () ( Box sx{{ flexGrow: 1 }} Grid container spacing{2} Grid item xs{8} Itemxs8/Item /Grid Grid item xs{4} Itemxs4/Item /Grid Grid item xs{4} Itemxs4/Item /Grid Grid item xs{8} Itemxs8/Item /Grid /Grid /Box );3.2 断点与覆盖规则列宽是1 到 12 之间的整数表示该元素占据的列数在所有断点下均适用。给某个断点赋的值会默认应用于所有比它更宽的断点除非被更宽断点的值覆盖。例如xs{12}表示无论视口多大元素都占满整行。组件可以同时声明多个断点的宽度更大断点的值会覆盖更小断点的值从而在不同屏幕宽度下改变布局。例如xs{12} sm{6}当视口宽度达到 600px 及以上时占 6 列半屏更小的视口则占满全部 12 列Grid item xs{12} sm{6}3.3 间距控制spacing、rowSpacing与columnSpacingspacing控制子元素间距取值可为任意正数含小数或字符串同样经由theme.spacing()转换Grid container spacing{2}如需分别控制行、列间距可用rowSpacing与columnSpacing二者分别对应 CSS Grid 的row-gap与column-gapGrid container rowSpacing{1} columnSpacing{{ xs: 1, sm: 2, md: 3 }} Grid item xs{6} Item1/Item /Grid Grid item xs{6} Item2/Item /Grid Grid item xs{6} Item3/Item /Grid Grid item xs{6} Item4/Item /Grid /Grid注意columnSpacing也可以传入按断点取值的对象实现响应式列间距。3.4 自动布局Auto-layout省略xs等属性的数值、直接写Grid item xs即可让所有此类元素均分剩余空间。此时若某个元素指定了固定宽度如xs{6}其余元素会自动围绕它重新分配剩余空间Grid container spacing{3} Grid item xs Itemxs/Item /Grid Grid item xs{6} Itemxs6/Item /Grid Grid item xs Itemxs/Item /Grid /Grid3.5 断点化属性与自定义列数Grid 的属性值可以按当前激活的断点切换且columns允许自定义总列数默认 12从而构建非常灵活的响应式布局Grid container spacing{{ xs: 2, md: 3 }} columns{{ xs: 4, sm: 8, md: 12 }} {Array.from(Array(6)).map((_, index) ( Grid item xs{2} sm{4} md{4} key{index} Itemxs2/Item /Grid ))} /Grid上例中窄屏时总列数为 4、每个元素占 2 列一行 2 个平板断点总列数变为 8、每个元素占 4 列桌面断点恢复 12 列、每个元素占 4 列一行 3 个——仅靠断点对象便实现了三档响应式布局。支持响应式取值的属性即可以传断点 → 值对象包括columnscolumnSpacingdirectionrowSpacingspacing3.6 仓库实例Dashboard 与详情页的 Grid 用法examples/crm/src/dashboard/Dashboard.tsx 使用Grid构建仪表盘的三栏布局配合Stack组织各卡片内容Grid container spacing{2} mt{1} rowGap{4} Grid item xs{12} md{3} Stack gap{4} {/* 左侧栏卡片 */} /Stack /Grid Grid item xs{12} md{6} Stack gap{4} {/* 中间主区卡片 */} /Stack /Grid Grid item xs{12} md{3} TasksList / /Grid /Grid这段代码非常典型移动端三个区块各占满整行xs{12}桌面端按 3 / 6 / 3 比例并排md响应式布局一次成型。在 examples/demo/src/invoices/InvoiceShow.tsx 中还可以看到Grid用于表单/详情卡片内部的信息分栏CardContent Grid container spacing{2} Grid size{{ xs: 6 }} {/* 左半部分字段 */} /Grid {/* 右半部分字段 */} /Grid /CardContent四、三者对比与选型建议组件布局维度默认渲染核心属性适用场景Box一维/二维均可纯 CSS 包装divsx、component给任意元素/原生标签快速施加样式或作为无语义布局容器Stack一维flex row/columndisplay:flex的divdirection、spacing、divider及全部 FlexBox 属性按钮组、操作栏、列表项、头像文本等线性排列Grid二维12 列栅格栅格容器container/item、断点列宽、spacing、columns仪表盘多栏布局、响应式表单分区、卡片网格选型时可以遵循以下三条简单规则只是给单个元素加样式→ 直接使用该元素react-admin 组件或 MUI 组件的sx属性不要套Box需要纵向/横向线性排列一组元素→ 使用Stack配合direction与spacing需要多栏、多行且响应式的栅格布局→ 使用Grid containerGrid item通过断点属性xs/sm/md控制列宽。五、在 react-admin 场景中的组合实战把三者组合起来可以快速拼出 react-admin 中常见的页面头部 主内容 侧边栏布局。下面是一个综合示例仅展示布局结构import { Box, Stack, Grid } from mui/material; import { List, Datagrid, TextField, EditButton } from react-admin; const PostList () ( List aside{PostAside /} Datagrid TextField sourceid / TextField sourcetitle / EditButton / /Datagrid /List ); // 侧边栏窄屏隐藏宽屏固定宽度参考 Aside 的 sx 响应式写法 const PostAside () ( Box sx{{ width: { sm: 200, md: 300 }, ml: { sm: 1 }, display: { xs: none, sm: block }, }} Stack spacing{1} Box sx{{ p: 2, bgcolor: grey.100 }}统计数据/Box Box sx{{ p: 2, bgcolor: grey.100 }}热门标签/Box /Stack /Box );这里Stack负责纵向堆叠侧边栏中的信息卡片Box负责卡片自身的样式与响应式显隐二者互补协作。六、小结与延伸阅读Box是 CSS 工具属性包装器接受完整sx可用component渲染任意元素给 react-admin/MUI 元素调样式时优先用其自身的sx。Stack是一维 flex 布局容器direction控制方向、spacing控制间距、divider自动插入分隔线适合所有线性排列场景。Grid是 12 列响应式栅格断点属性从大到小覆盖、spacing/rowSpacing/columnSpacing控制间距、columns可自定义总列数适合仪表盘与多栏页面。三者均已大量应用于本仓库的 examples/simple、examples/crm、examples/demo 示例以及 packages/ra-ui-materialui 的组件内部实现中可直接查阅源码加深理解。相关的进一步资料sx 属性完整文档了解sx的全部语法、简写属性与主题感知取值Theming 文档了解如何自定义主题与断点Layout 文档了解 react-admin 全局布局组件的自定义方式更多用法可查阅 Material-UI 官方 Box、Stack、Grid 组件文档mui/material依赖即为 Material-UI仓库根目录 package.json 中可确认其依赖版本。赞分享前端UI组件【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址https://gitcode.com/gh_mirrors/re/react-admin点击查看免费下载相关推荐Reflex 布局组件完全指南Box、Stack、Flex、Grid 与 Container 的选型与实战Reflex 布局组件完全指南Box、Stack、Flex、Grid 与 Container 的选型与实战 导读 在 Reflex 中页面布局由一组声明式布后端前端Web框架跨平台资源下载神器res-downloader一键获取视频号、抖音、快手无水印资源跨平台资源下载神器res downloader一键获取视频号、抖音、快手无水印资源 你是否经常需要从视频号、抖音、快手等平台下载无水印视频或者需要批量保存小桌面应用网络音视频React-Grid-布局安装与配置完全指南React Grid 布局安装与配置完全指南 项目基础介绍与编程语言 React Grid Layout 是一个专为React设计的网格布局系统它具备自动排列前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考