amis 辅助类 Visibility 完全指南用 visible / invisible 控制元素显示与隐藏【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis导读本文聚焦 amis 前端低代码框架中由 helper 工具类 提供的visible与invisible两个显示/隐藏辅助类介绍其用法、与display类在布局行为上的本质差异以及如何结合m:/pc:设备前缀实现手机端与桌面端的差异化显示。读完本文你将掌握在 amis 页面中通过className一行配置即可精确控制元素显隐的实战能力并理解其底层 SCSS 生成机制。一、认识 visible 与 invisible在 amis 的辅助类体系中Visibility显示与隐藏提供了两个互为对偶的工具类定义位于 packages/amis-ui/scss/helper/layout/_visibility.mdClassPropertiesvisiblevisibility: visible;invisiblevisibility: hidden;visible元素正常显示参与页面布局invisible元素被隐藏但仍然占据原有的布局空间只是视觉上不可见。两者的实现来自同一个 SCSS mixin。在 packages/amis-ui/scss/helper/layout/_visibility.scss 中mixin make-visibility($prefix: .) { #{$prefix}visible { visibility: visible; } #{$prefix}invisible { visibility: hidden; } }mixin 接受一个$prefix参数默认以.为前缀生成普通类传入设备前缀时则生成带响应式前缀的类见下文第四节。二、使用方式一行 className 控制显隐在 amis 页面中几乎所有组件都支持通过className属性挂载辅助类。例如隐藏一个文本{ type: tpl, className: invisible, tpl: 这段文字会被隐藏但依然占据布局空间 }也可以作用在容器级组件上隐藏整块区域{ type: container, className: invisible, body: [ { type: tpl, tpl: 容器内的所有内容都不会被看到 } ] }需要重新显示时直接移除invisible类或显式添加visible类覆盖即可。三、与 display 系的区别空间是否保留这是选择显隐方案时最关键的一个决策点行为invisiblevisibilityhiddendisplay:none视觉隐藏✅ 隐藏✅ 隐藏保留布局空间✅ 保留❌ 完全移除是否触发重排❌ 仅重绘✅ 触发重排当希望元素消失但布局不抖动例如占位、过渡动画前的隐藏态时优先使用invisible当希望元素从文档流中彻底移除后续元素上移补位时应使用 amis 的hidden类对应display: none。在 packages/amis-ui/scss/_utilities.scss 中还可以看到show类同样使用visibility: visible与visible语义一致属于历史遗留的同义工具类而invisible2packages/amis-ui/scss/_utilities.scss则与invisible等价均为visibility: hidden。需要留意invisible只是隐藏元素其内部的input等可聚焦控件依然存在于文档中若同时需要阻止交互应结合disabled属性或交互层面的状态配置使用。四、响应式设计m: 与 pc: 设备前缀visible/invisible支持 amis 的响应式辅助类机制可通过添加设备前缀分别针对「手机端」或「PC 端」设置样式无前缀作用于所有视图模式移动端 PC 端m:前缀仅作用于手机端pc:前缀仅作用于桌面端。例如「只在 PC 端隐藏某块内容」{ type: tpl, className: pc:invisible, tpl: 这段文字只在 PC 端隐藏移动端正常显示 }对应「只在手机端显示」{ type: tpl, className: m:visible, tpl: 这段文字只在手机端显示 }从源码看响应式变体的生成逻辑位于 _visibility.scss遍历$devices配置的设备列表逐个通过media-device混入生成带设备前缀的类include make-visibility(); each $deivce in map-keys($devices) { include media-device($deivce) { include make-visibility(. selector-escape($deivce :)); } }其中media-device混入packages/amis-ui/scss/_mixins.scss根据设备名查表得到对应的媒体查询条件mixin media-device($name, $devices: $devices) { $n: map-get($devices, $name); media #{$n} { content; } }这样最终会生成类似.m:visible、.pc:invisible的响应式类在对应媒体查询区间内生效。更完整的响应式机制说明见 响应式设计文档。五、状态前缀不支持与hover:、active:、focus:、disabled:等状态前缀不同visible/invisible不支持状态前缀即不能写出hover:invisible这类用法。原因在于visibility的隐藏语义通常是一次性、确定性的布局决策很少与交互状态联动而状态化的显隐一般由组件自身的disabled、条件渲染等机制承担。如果你确实存在「悬停时隐藏/显示元素」这类需求可以在 amis 的 GitHub 仓库中提交 issue 反馈。六、最佳实践小结隐藏但占位→ 用invisible布局不抖动彻底移出文档流→ 用hiddendisplay:none后续元素自动补位端侧差异化→ 组合设备前缀m:visible/pc:invisible一条类名搞定响应式显隐交互态显隐→ 走状态前缀如hover:或组件条件渲染因为 Visibility 类本身不支持状态前缀。通过合理选用visible/invisible及设备前缀可以在不改动业务逻辑的前提下用最少的配置实现跨端、可预期的显隐控制这正是 amis 辅助类体系的实用价值所在。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
amis 辅助类 Visibility 完全指南：用 visible / invisible 控制元素显示与隐藏
amis 辅助类 Visibility 完全指南用 visible / invisible 控制元素显示与隐藏【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis导读本文聚焦 amis 前端低代码框架中由 helper 工具类 提供的visible与invisible两个显示/隐藏辅助类介绍其用法、与display类在布局行为上的本质差异以及如何结合m:/pc:设备前缀实现手机端与桌面端的差异化显示。读完本文你将掌握在 amis 页面中通过className一行配置即可精确控制元素显隐的实战能力并理解其底层 SCSS 生成机制。一、认识 visible 与 invisible在 amis 的辅助类体系中Visibility显示与隐藏提供了两个互为对偶的工具类定义位于 packages/amis-ui/scss/helper/layout/_visibility.mdClassPropertiesvisiblevisibility: visible;invisiblevisibility: hidden;visible元素正常显示参与页面布局invisible元素被隐藏但仍然占据原有的布局空间只是视觉上不可见。两者的实现来自同一个 SCSS mixin。在 packages/amis-ui/scss/helper/layout/_visibility.scss 中mixin make-visibility($prefix: .) { #{$prefix}visible { visibility: visible; } #{$prefix}invisible { visibility: hidden; } }mixin 接受一个$prefix参数默认以.为前缀生成普通类传入设备前缀时则生成带响应式前缀的类见下文第四节。二、使用方式一行 className 控制显隐在 amis 页面中几乎所有组件都支持通过className属性挂载辅助类。例如隐藏一个文本{ type: tpl, className: invisible, tpl: 这段文字会被隐藏但依然占据布局空间 }也可以作用在容器级组件上隐藏整块区域{ type: container, className: invisible, body: [ { type: tpl, tpl: 容器内的所有内容都不会被看到 } ] }需要重新显示时直接移除invisible类或显式添加visible类覆盖即可。三、与 display 系的区别空间是否保留这是选择显隐方案时最关键的一个决策点行为invisiblevisibilityhiddendisplay:none视觉隐藏✅ 隐藏✅ 隐藏保留布局空间✅ 保留❌ 完全移除是否触发重排❌ 仅重绘✅ 触发重排当希望元素消失但布局不抖动例如占位、过渡动画前的隐藏态时优先使用invisible当希望元素从文档流中彻底移除后续元素上移补位时应使用 amis 的hidden类对应display: none。在 packages/amis-ui/scss/_utilities.scss 中还可以看到show类同样使用visibility: visible与visible语义一致属于历史遗留的同义工具类而invisible2packages/amis-ui/scss/_utilities.scss则与invisible等价均为visibility: hidden。需要留意invisible只是隐藏元素其内部的input等可聚焦控件依然存在于文档中若同时需要阻止交互应结合disabled属性或交互层面的状态配置使用。四、响应式设计m: 与 pc: 设备前缀visible/invisible支持 amis 的响应式辅助类机制可通过添加设备前缀分别针对「手机端」或「PC 端」设置样式无前缀作用于所有视图模式移动端 PC 端m:前缀仅作用于手机端pc:前缀仅作用于桌面端。例如「只在 PC 端隐藏某块内容」{ type: tpl, className: pc:invisible, tpl: 这段文字只在 PC 端隐藏移动端正常显示 }对应「只在手机端显示」{ type: tpl, className: m:visible, tpl: 这段文字只在手机端显示 }从源码看响应式变体的生成逻辑位于 _visibility.scss遍历$devices配置的设备列表逐个通过media-device混入生成带设备前缀的类include make-visibility(); each $deivce in map-keys($devices) { include media-device($deivce) { include make-visibility(. selector-escape($deivce :)); } }其中media-device混入packages/amis-ui/scss/_mixins.scss根据设备名查表得到对应的媒体查询条件mixin media-device($name, $devices: $devices) { $n: map-get($devices, $name); media #{$n} { content; } }这样最终会生成类似.m:visible、.pc:invisible的响应式类在对应媒体查询区间内生效。更完整的响应式机制说明见 响应式设计文档。五、状态前缀不支持与hover:、active:、focus:、disabled:等状态前缀不同visible/invisible不支持状态前缀即不能写出hover:invisible这类用法。原因在于visibility的隐藏语义通常是一次性、确定性的布局决策很少与交互状态联动而状态化的显隐一般由组件自身的disabled、条件渲染等机制承担。如果你确实存在「悬停时隐藏/显示元素」这类需求可以在 amis 的 GitHub 仓库中提交 issue 反馈。六、最佳实践小结隐藏但占位→ 用invisible布局不抖动彻底移出文档流→ 用hiddendisplay:none后续元素自动补位端侧差异化→ 组合设备前缀m:visible/pc:invisible一条类名搞定响应式显隐交互态显隐→ 走状态前缀如hover:或组件条件渲染因为 Visibility 类本身不支持状态前缀。通过合理选用visible/invisible及设备前缀可以在不改动业务逻辑的前提下用最少的配置实现跨端、可预期的显隐控制这正是 amis 辅助类体系的实用价值所在。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
