其他的 CSS 工具类

Quasar 有很多可直接用在 Vue 模版中的 CSS 工具类,熟练使用他们,可以很大程度上降低 Vue 模版的复杂度。

下面的列表并不是全部 CSS 工具类,如需使用请观看别的关于样式的页面,例如,字体排版可见性阴影定位间距等等。

鼠标相关

CSS 类名描述
non-selectable控制文字不可被选择
no-pointer-eventsDOM 元素不能作为事件的对象,如 click 相关, hover 等等
all-pointer-eventsThe opposite of no-pointer-events
cursor-pointer将鼠标指针落在元素上时的样式设置为一只小手
cursor-not-allowed将鼠标指针落在元素上时的样式设置为禁用的样式
cursor-inherit将鼠标指针落在元素上时的样式设置为继承父元素
cursor-none禁用鼠标指针样式

滚动相关

CSS 类名描述
scroll应用 CSS 调整,使滚动在所有平台上都能发挥最佳效果
no-scroll隐藏滚动条 Hides scrollbars on the DOM node
overflow-auto设置 overflow 为 auto
overflow-hidden设置 overflow 为 hidden
overflow-hidden-y设置 overflow 为 hidden on the y-axis
hide-scrollbar删除滚动条

大小相关

CSS 类名描述
fitWidth 和 Height 设置为 100%
full-heightHeight 设置为 100%
full-widthWidth 设置为 100%,并且左右外边距设置为 0
window-heightHeight 设置为 100vh,并且上下外边距设置为 0
window-widthWidth 设置为 100vw 并且左右边距设置为 0
block设置 display 属性为 设置为 block

方向相关

CSS 类名描述
rotate-45旋转 45 度
rotate-90旋转 90 度
rotate-135旋转 135 度
rotate-180旋转 180 度
rotate-225旋转 225 度
rotate-270旋转 270 度
rotate-315旋转 315 度
flip-horizontalFlip DOM element horizontally
flip-verticalFlip DOM element vertically
CSS 类名描述
no-border移除所有边框
no-border-radius移除边框的圆角
no-box-shadow移除边框的阴影
no-outline移除边框的框线
rounded-borders加上常规一个圆角
border-radius-inherit从父元素继承圆角