CSS可见性

有一些CSS类可以用于常用功能。

类名 说明
disabled 游标更改为“disable”，不透明度设置为较低值。
hidden 将display设置为none。与下面的类相比 - hidden类意味着元素不会显示并且不会占用布局中的空间。
invisible 将visibility设置为hidden。与上面的类相比，invisible类意味着元素不会显示，但它仍然占用布局空间。
transparent 背景颜色是透明的。
dimmed 在您的元素上应用深色透明覆盖层。不要使用在已经有:after伪元素的元素。
light-dimmed 在您的元素上应用白色透明覆盖层。不要使用在已经有:after伪元素的元素。
highlight-and-fade 添加一个黄色的背景色，并在显示元素时将其淡化。
ellipsis 截取文本并在没有足够的可用空间时显示省略号。
ellipsis-2-lines 当两行中没有足够的可用空间时，截断文本并显示省略号（仅适用于Webkit浏览器）。
ellipsis-3-lines 当三行中没有足够的可用空间时，截断文本并显示省略号（仅适用于Webkit浏览器）。
z-top 将元素定位在任何其他组件的顶部，但位于Popovers、提示框、通知框之后。
z-max 将元素定位在任何其他组件（包括Drawer，Modals，Notifications，Layout header/footer…）之上

窗口宽度相关

首先，我们来定义一个小的、中等的、大的窗口是什么意思：

窗口大小 前缀 宽度阈值，以像素为单位
特小 xs 最大576px
小 sm 最大768px
中等 md 最大992px
大 lg 最大1200px
特大号 xl 大于1200px

窗口宽度相关的CSS类。

类名 说明
xs 仅在特小窗口上显示
sm 仅在小窗口上显示
md 仅在中等大小的窗口上显示
lg 仅在大窗口上显示
xl 仅在特大窗口上显示

如果它低于其中一个尺寸并且大于其中一个尺寸, 您仍然可以显示某些DOM元素或组件。 只需附加来自“低于”和“大于”的前缀lt- 或 gt-。例如：lt-md（仅在xs和sm上显示），lt-xl（仅在xs，sm，md和lg窗口中显示），gt-md（大于中等窗口的显示：lg和xl）。

注意
对于内置块，您可以和可见性类inline结合使用。
例子：<span class ="gt-sm inline">&nbsp;这里是这个长句的结尾。</span>

平台相关

可见：

类名 说明
desktop-only 仅在桌面上可见
mobile-only 仅在移动设备上可见
cordova-only 仅在Cordova上包装的Apps可见
electron-only 仅在Electron包装的应用上可见
touch-only 仅在具有触摸功能的平台上可见
mat-only 仅可见于Quasar Material主题
ios-only 仅可见于Quasar iOS主题
platform-ios-only 仅在iOS平台上可见
platform-android-only 仅在Android平台上可见
within-iframe-only 仅当整个网站在IFRAME标记下时才可见

隐藏：

类名 说明
desktop-hide 在桌面上隐藏
mobile-hide 在手机上隐藏
cordova-hide 在Cordova上包装的Apps隐藏
electron-hide 在Electron包装的应用隐藏
touch-hide 在支持触摸的平台上隐藏
mat-h​​ide 在Quasar Material主题上隐藏
ios-hide 在Quasar iOS主题上隐藏
platform-ios-hide 在iOS平台上隐藏
platform-android-hide 在Android平台上隐藏
within-iframe-hide 仅当整个网站位于IFRAME标记下时才隐藏

同时检查Quasar主题>平台特定的样式。

注意
根据您的需要，您可能还需要查看平台检测页面，了解如何使用Javascript实现相同的效果。后一种方法允许您甚至不渲染DOM元素或组件。当渲染过程昂贵时它非常有用。

方向相关

类名 说明
orientation-portrait 仅当屏幕方向为纵向时才可见
orientation-landscape 仅当屏幕方向为横向时才可见

打印相关

类名 说明
print-only 仅在打印媒体上可见 - 在屏幕媒体隐藏
print-hide 屏幕媒体上可见 - 在打印媒体隐藏
阴影 定位