Angular Material 指令在小型/移动显示器上隐藏元素

Posted 2023-03-06

【中文标题】Angular Material 指令在小型/移动显示器上隐藏元素

【英文标题】：Angular Material directive to hide element on small/mobile display

【发布时间】：2016-06-06 00:48:42

【问题描述】：

是否有使用某种指令在小型/移动显示器上隐藏元素的“角度材质方式”？已经使用 Angular 和 Angular Material 一段时间了，我认为这应该很简单，但我只是没有找到它。我知道 ng-show / ng-hide 指令，但我不知道我是否可以编写一个以某种方式检查当前显示大小的表达式。

我是否只需要退回到 CSS 中的旧媒体查询？

编辑 - 忘记在我的原始帖子中包含对 Angular Material 的引用...哎呀！

【问题讨论】：

不使用更适合的 CSS 是否有特殊原因？

除非你沿着 JS 的路径去匹配用户代理字符串，否则我会使用 CSS 查询。

你可以使用ng-show。

@Matti，不是一个强有力的理由——只是 Angular 提供了很多开箱即用的样式，因此尝试在实际情况下使用它似乎是合理的，而不是编写我自己的 CSS 规则。我认为这将是 Angular 所涵盖的情况。

“角度方式”的另一种选择是使用 Angular Material 作为 UI 框架 material.angularjs.org/latest/layout/options 但这对于一个简单的任务可能有点矫枉过正

【参考方案1】：

使用 hide-sm css 类。这个类是由角材料提供的

【参考方案2】：

https://material.angularjs.org/latest/layout/introduction 使用隐藏和显示选项取决于断点，例如 hide-md、hide-lg

Angular Material Design - Change flex value with screen size

【讨论】：

完美，谢谢...不知何故错过了该页面 - 可能仍在查看旧版本。

【参考方案3】：

您可以创建一个matchMedia 过滤器。

app.filter("matchMedia", function($window) 
    return function matchMedia (mediaQueryString) 
        return $window.matchMedia(mediaQueryString).matches;
    
);

然后在指令中使用它：

<div ng-if="'(min-width: 400px)' | matchMedia">
    <h1>The viewport is at least 400 pixels wide</h1>
</div>

【讨论】：

聪明的把戏，@georgeawg。我最终使用 max-width: 320px DIV 和 max-width: 766px DIV 来隐藏/显示移动设备上特定类型的触摸屏按钮。谢谢！

【参考方案4】：

我认为最好的方法是使用组件方法并将指令的 js + html + scss 保存在一个文件夹中。使用 scss（或 less 或 sass）来声明您的 css 样式。这样做您可以在指令的 scss 中创建媒体查询，然后在指令的 html 中使用它。然后将每个指令的 scss 部分收集到一个文件中。因此，您将关注点分开。 js和html中的逻辑和表示。让浏览器根据屏幕大小决定是否显示你的指令。

【参考方案5】：

现代浏览器支持matchMedia 函数，可让您从 javascript 进行媒体查询。您可以制作一个使用它的自定义指令。

我建议仅在通过 JavaScript 隐藏内容（可能更多 ng-if 样式而不是 ng-show 样式）允许您在移动浏览器上跳过处理 JavaScript 中不需要的和繁重的内容时这样做。如果它只是一个视觉的东西，使用 CSS。这是完成这项工作的正确工具。