其他CSS辅助类

在编写Vue模板时可以使用很多CSS类。对减轻VueModels和模板的复杂性上非常有用。

以下所列是不完整的。同时检查其他CSS文档页面,如排版、可见性、阴影、定位。

鼠标相关

类名 说明
non-selectable 用户将无法选择DOM节点及其文本
scroll 应用CSS调整使所有平台上的滚动工作达到最佳状态
no-scroll 隐藏DOM节点上的滚动条
no-pointer-events DOM元素不会成为鼠标事件的目标 - 点击、悬停等
all-pointer-events no-pointer-events的反义词
cursor-pointer 改变DOM元素上的鼠标指针,看起来好像在可点击的链接上

大小相关

类名 说明
fit 宽度和高度设置为100%
full-height 高度设置为100%
full-width 宽度设置为100%
window-height 高度设置为100vh,顶部和底部边距为0
window-width 宽度设置为100vw,左边距和右边距0
block display属性设置为block

方向有关

类名 说明
rotate-45 旋转45度
rotate-90 旋转90度
rotate-135 旋转135度
rotate-180 旋转180度
rotate-205​​ 旋转205度
rotate-270 旋转270度
rotate-315 旋转315度
flip-horizontal 水平翻转DOM元素
flip-vertical 垂直翻转DOM元素

边界相关

类名 说明
no-border 删除任何边框
round-borders 应用通用边框半径,基于当前主题

有两个名为groupgeneric-margin的特殊CSS类。

group对所有子DOM元素应用一个小的边界,而generic-margin对各个DOM元素应用相同的边界(这随每个主题而变化)。

但推荐的方法是使用CSS Flex Gutter