CSS 可见性 | Quasar Framework

CSS 可见性

Quasar 提供了一些开箱即用的 CSS 类来实现常见的功能。

类名	描述
`disabled`	鼠标指针改变以表示"禁用"状态，并且透明度降低。
`hidden`	设置 `display` 为 `none`。与下面的 `invisible` 相比，`hidden` 类表示元素不会显示，并且不会在布局中占据空间。
`invisible`	设置 `visibility` 为 `hidden`。与上面的 `hidden` 相比，`invisible` 类表示元素不会显示，但仍然会在布局中占据空间。
`transparent`	背景色透明。
`dimmed`	在元素上应用深色半透明遮罩。不要在已经有 :after 伪元素的元素上使用。
`light-dimmed`	在元素上应用浅色半透明遮罩。不要在已经有 :after 伪元素的元素上使用。
`ellipsis`	当空间不足时截断文本并显示省略号。
`ellipsis-2-lines`	当空间不足时在两行内截断文本并显示省略号（仅在 Webkit 浏览器中有效）。
`ellipsis-3-lines`	当空间不足时在三行内截断文本并显示省略号（仅在 Webkit 浏览器中有效）。
`z-top`	将元素定位在其他组件之上，但在 Popovers、Tooltips、Notifications 之下。
`z-max`	将元素定位在所有其他组件之上（包括 Drawer、Modals、Notifications、Layout header/footer 等）。

窗口宽度相关

首先，让我们定义断点：

窗口大小	名称	最小宽度（像素）	最大宽度（像素）
超小	`xs`	0px	599.99px
小	`sm`	600px	1023.99px
中	`md`	1024px	1439.99px
大	`lg`	1440px	1919.99px
超大	`xl`	1920px	无限

现在介绍与窗口宽度相关的 CSS 类：

您还可以使用 lt- 或 gt- 前缀来显示小于或大于某个尺寸的元素。例如：lt-md（仅在 xs 和 sm 显示），lt-xl（在 xs、sm、md 和 lg 窗口显示），gt-md（在大于中型窗口显示：lg 和 xl）。

TIP

您可以将可见性类与 inline 类组合使用，以实现内联块级元素。

例如：<span class="gt-sm inline">...</span>

TIP

如果您想基于 JavaScript 属性来显示/隐藏元素，可以使用 Screen Plugin。

仅在以下平台显示：

在以下平台隐藏：

TIP

根据您的需求，您可能还想查看 Platform Detection 页面，了解如何使用 JavaScript 实现相同的效果。后者允许您甚至不渲染 DOM 元素或组件。这在渲染过程开销较大时很有用。

类名	描述
`orientation-portrait`	仅在屏幕方向为竖屏时显示
`orientation-landscape`	仅在屏幕方向为横屏时显示

类名	描述
`print-only`	仅在打印媒体上显示 - 在屏幕媒体上隐藏
`print-hide`	在屏幕媒体上显示 - 在打印媒体上隐藏

1. Introduction

2. 窗口宽度相关

3. 平台相关

4. 屏幕方向相关

5. 打印相关