rsuite Grid 栅格 `hidden` 属性详解：基于断点控制列的显示与隐藏

前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载hidden是 rsuite 24 列响应式栅格系统Grid/Row/Col中用于控制列在不同屏幕尺寸下显示或隐藏的核心属性。本文围绕 docs/pages/components/grid/fragments/hidden.md 中的完整示例展开结合 Col 组件源码 与 栅格样式源码讲解hidden的布尔值与响应式对象两种写法、底层 CSS 断点机制、与span等属性的协同用法以及新旧两套 API 的迁移方式。读完你可以直接在项目里实现移动端隐藏侧栏、桌面端展示这类典型响应式布局。一、最小可用示例按断点隐藏列hidden.md提供了一个可直接运行的最小示例在一个流体栅格Grid fluid内放置两列其中一列在超小屏xs时隐藏另一列则采用span{{ xs: 24, md: 12 }}的响应式宽度import { Grid, Row, Col, Center } from rsuite; const DecorativeBox ({ children, ...rest }) ( Center bgvar(--rs-placeholder) p{20} my{6} roundedlg {...rest} {children} /Center ); const App () ( Grid fluid Row Col span{{ md: 12 }} hidden{{ xs: true }} DecorativeBoxhidden{{ xs: true }}/DecorativeBox /Col Col span{{ xs: 24, md: 12 }} DecorativeBoxspan{{ xs: 24, md: 12 }}/DecorativeBox /Col /Row /Grid ); ReactDOM.render(App /, document.getElementById(root));代码要点hidden{{ xs: true }}表示仅在xs超小屏断点隐藏该列。由于栅格默认每行 12 列在Row不传columns时第一列在md及以上占据 6 列第二列也占据 6 列两列并排而在xs屏幕下第一列被隐藏第二列独占整行xs: 24。DecorativeBox只是演示用的装饰盒用于视觉化列宽并非栅格 API 的一部分实际使用时替换为你的业务内容即可。该示例的完整上下文可参考栅格组件总文档 docs/pages/components/grid/en-US/index.md中文版见 docs/pages/components/grid/zh-CN/index.md。二、hidden的两种取值形式在 ColProps 类型定义 中hidden的类型为hidden?: boolean | ResponsiveValueboolean;ResponsiveValue的定义见 docs/pages/_common/types/responsive-value.md如下type ResponsiveValueT { xs?: T; // Extra small devices (portrait phones, 576px) sm?: T; // Small devices (landscape phones, ≥576px) md?: T; // Medium devices (tablets, ≥768px) lg?: T; // Large devices (desktops, ≥992px) xl?: T; // Extra large devices (large desktops, ≥1200px) xxl?: T; // Extra extra large devices (larger desktops, ≥1400px) };2.1 布尔值形式作用于 xs直接传入boolean时按 Col.tsx 的 resolve 逻辑该值会被视为作用于xs断点Col hidden…/Col {/* 等价于 hidden{{ xs: true }} */} Col hidden{false}…/Col {/* 等价于 hidden{{ xs: false }} */}2.2 响应式对象形式作用于多个断点传入对象时每个断点键的值独立生效未声明的断点不受影响不会被隐藏Col hidden{{ xs: true, md: true }}…/Col {/* xs 与 md 隐藏sm/lg/xl/xxl 正常显示 */} Col hidden{{ xs: true }}…/Col {/* 仅 xs 隐藏 */}从源码实现看Col.tsx 中的处理逻辑 会遍历BREAKPOINTS常量数组[xs, sm, md, lg, xl, xxl]定义见 src/internals/constants/index.ts只为显式出现的键生成对应类名未声明的断点不会生成任何隐藏样式因此默认保持可见。三、底层原理hidden是如何变成 CSS 的hidden不依赖 JavaScript 运行时判断而是通过生成语义化 CSS 类名 媒体查询实现这也是其零运行时开销的原因。3.1 类名生成规则在 Col.tsx 的 addResponsiveClasses 中hidden走的是特殊分支——它不生成rs-col-*前缀而是使用全局根前缀生成rs-hidden-{size}类const classKey type hidden ? rootPrefix(hidden-${size}) // 例如 rs-hidden-xs : prefix(${size}-${type span ? : type -}${value});对应的测试用例src/Grid/test/Col.spec.tsx验证了这一点render( Col span{{ md: 6 }} hidden{{ xs: true, md: true }} Col /Col ); expect(screen.getByText(Col)).to.have.class(rs-hidden-xs); expect(screen.getByText(Col)).to.have.class(rs-col-md-6); expect(screen.getByText(Col)).to.have.class(rs-hidden-md);即hidden{{ xs: true, md: true }}会同时挂上rs-hidden-xs和rs-hidden-md两个类。3.2 样式定义display: none隐藏样式在 src/Grid/styles/_mixin.scss 中定义// Hidden styles mixin hidden($size) { .rs-hidden-#{$size} { display: none; } }3.3 断点媒体查询区间每个rs-hidden-{size}类只在其对应断点区间内生效完整的媒体查询定义在 src/Grid/styles/index.scssmedia (max-width: (vars.$screen-sm - 1)) { include mixin.hidden(xs); } media (min-width: vars.$screen-sm) and (max-width: (vars.$screen-md - 1)) { include mixin.hidden(sm); } media (min-width: vars.$screen-md) and (max-width: (vars.$screen-lg - 1)) { include mixin.hidden(md); } media (min-width: vars.$screen-lg) and (max-width: (vars.$screen-xl - 1)) { include mixin.hidden(lg); } media (min-width: vars.$screen-xl) and (max-width: (vars.$screen-xxl - 1)) { include mixin.hidden(xl); } media (min-width: vars.$screen-xxl) { include mixin.hidden(xxl); }断点像素值定义在 src/styles/_variables.scss整理如下断点媒体查询区间典型设备xs 576px竖屏手机portrait phonessm≥ 576px 且 768px横屏手机landscape phonesmd≥ 768px 且 992px平板tabletslg≥ 992px 且 1200px桌面desktopsxl≥ 1200px 且 1400px大桌面large desktopsxxl≥ 1400px超大桌面larger desktops注意到xs是唯一使用max-width的断点其余断点均为min-width加max-width的双端区间xxl只有min-width。这意味着rs-hidden-xs只在小于 576px 时生效而rs-hidden-md只在 768px 至 991px 区间生效——超过该区间类名仍在但样式失效列恢复显示。这一机制保证了只隐藏指定断点、其余断点不受影响的语义。四、hidden与span、offset等属性的协同hidden与span、offset、push、pull、order一样都支持响应式对象语法可以自由组合。参考 hidden 示例中hidden{{ xs: true }}与span{{ md: 12 }}的组合以及响应式演示 docs/pages/components/grid/examples/responsive.tsx 中的用法常见的组合模式有模式一小屏隐藏、大屏显示移动端精简侧栏/辅助信息Row Col xs{24} md{16} DecorativeBox主内容区/DecorativeBox /Col Col xs{24} md{8} hidden{{ xs: true }} DecorativeBox侧栏仅 ≥md 显示/DecorativeBox /Col /Row模式二窄屏隐藏装饰列宽屏恢复 12 列均分Row Col span{{ md: 12 }} hidden{{ xs: true }} DecorativeBox隐藏列/DecorativeBox /Col Col span{{ xs: 24, md: 12 }} DecorativeBox主列/DecorativeBox /Col /Row在xs下主列占满 24 列在md及以上隐藏列恢复显示两列各占 12 列。模式三多断点分段控制Col span{{ xs: 24, sm: 12, lg: 6 }} hidden{{ sm: true, lg: true }} DecorativeBox仅在 xs 与 md 区间显示/DecorativeBox /Col这里列在xs显示占满整行、sm隐藏、md显示、lg与xl/xxl隐藏——借助断点区间的双端媒体查询可以精确控制哪一段屏幕宽度下出现。注意与span的配合隐藏一个列后同行其余列的span总和会自动决定其换行行为。rsuite 栅格默认每行 12 列当列span与offset之和超过 12或通过columns调整后的总数时多余列会折行到下一行见总文档中的 Multiple Rows 一节 docs/pages/components/grid/en-US/index.md。因此设计隐藏逻辑时要同步考虑隐藏后剩余列是否仍能按预期铺满整行。五、新旧 API 对比xsHidden等旧属性的迁移在 DeprecatedColProps 类型定义 中旧版按断点拆分的属性xsHidden、smHidden、mdHidden、lgHidden、xlHidden、xxlHidden等已被标记为deprecated官方注释明确建议迁移到新的响应式对象语法例如/** deprecated Use hidden{{ xs: true }} instead */ xsHidden?: boolean;旧写法Col xsHidden smHidden mdHidden lgHidden xlHidden xxlHidden…/Col新写法等价Col hidden{{ xs: true, sm: true, md: true, lg: true, xl: true, xxl: true }}…/Col对应旧写法的测试见 src/Grid/test/Col.spec.tsx它断言xsHidden到xxlHidden会依次生成rs-hidden-xs至rs-hidden-xxl六个类。需要说明的是从源码看旧属性目前仍被兼容处理在 Col.tsx 的 legacy 分支 中${size}Hidden这类键仍会被读取并转换成hidden-{size}类只是官方类型标注为弃用新代码应优先使用对象语法。六、实现要点与源码位置速查关注点说明源码位置hidden类型定义boolean \| ResponsiveValuebooleansrc/Grid/Col.tsx#L29类名生成逻辑hidden走rootPrefix生成rs-hidden-{size}src/Grid/Col.tsx#L57-L75单值/对象解析单值作用于xs对象逐断点处理src/Grid/Col.tsx#L78-L109隐藏样式.rs-hidden-{size} { display: none; }src/Grid/styles/_mixin.scss#L106-L110断点媒体查询六个断点的生效区间src/Grid/styles/index.scss#L89-L115断点像素值576/768/992/1200/1400src/styles/_variables.scss#L27-L47断点常量xs至xxl六个键src/internals/constants/index.ts#L2行为测试新旧格式hidden的类名断言src/Grid/test/Col.spec.tsx#L86-L150七、实战建议优先使用响应式对象语法。hidden{{ md: true }}比旧式mdHidden更直观、易维护也便于与span、offset等属性统一书写风格。默认隐藏用hidden兜底布局宽度交给span。例如移动端只显示主内容时不必同时写两套span分支直接给辅助列加hidden{{ xs: true }}即可。牢记断点区间是互斥的双端区间。hidden{{ md: true }}只在 768px–991px 生效不要在lg屏幕上期待它继续隐藏如需覆盖更大范围请显式声明多个断点。渲染与视觉分离。hidden仅改变视觉呈现display: none列仍保留在 DOM 中利于表单校验、可访问性信息等场景若需要真正从 DOM 移除应自行做条件渲染。本文所依据的完整示例位于 docs/pages/components/grid/fragments/hidden.md栅格组件全部属性Grid的as/fluid、Row的gutter/align/justify、Col的span/offset/push/pull/order/hidden见 docs/pages/components/grid/en-US/index.md。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐Ant Design Table 列隐藏hidden详解从静态隐藏到动态控制列显示Ant Design Table 列隐藏hidden详解从静态隐藏到动态控制列显示 导读 在 Ant Design 的 Table 组件中 column前端UI组件设计系统rsuite Grid 栅格 Row 的 justify 属性详解列的水平分布与响应式布局rsuite Grid 栅格 Row 的 justify 属性详解列的水平分布与响应式布局 导读 本文聚焦 rsuite 组件库 Grid 栅格体系中 Row前端UI组件rsuite Grid 栅格系统实战从 24 列基础布局到响应式断点rsuite Grid 栅格系统实战从 24 列基础布局到响应式断点 导读 rsuite 的 Grid 组件提供了一套基于 24 列栅格 的响应式布局系统由前端UI组件上一篇86Box完整指南如何在现代电脑上体验复古PC的终极方案下一篇Gas Town用户访谈10位资深用户的使用经验分享创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考