用了一段时间的quasar了，它里面封装的 css 类确实很好用，但是在帮助文档中，描述得零零散散，不方便使用，遂总结一下。
字体
文字大小
text-[ h1~6, subtitle1, subtitle2, body1~2, caption, overline ]
字体粗细
text-weight-[ thin, light, regular, medium, bold, bolder ]
字体对齐
text-[ right, left, center, justify, bold, italic, no-wrap, stike, uppercase, lowercase, captitalize ]
字体颜色
text-[颜色名称]：text-teal
颜色
基本色
primary（淡蓝），secondary（淡绿），accent（淡紫），dark（黑色），positive（深绿），negative（红色），Info（亮蓝），warning（黄色）
其它颜色
每种颜色由浅到深分为 1-14 级
red, pink, purple, deep-purple, indigo（靛蓝）, blue, light-blue, cyan, teal（青色）, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey
在 css 中使用
在应用程序的*.vue文件中，可以使用$primary，$red-1等颜色。
|
<!-- 注意lang="sass" -->
<style lang="sass">
div
color: $red-1
background-color: $grey-5
</style>
|
间距
语法
|
q-[p|m][t|r|b|l|a|x|y]-[none|auto|xs|sm|md|lg|xl]
T D S
T - type
- values: p (padding), m (margin)
D - direction
- values:
t (top), r (right), b (bottom), l (left),
a (all), x (both left & right), y (both top & bottom)
S - size
- values:
none,
auto (ONLY for specific margins: q-ml-*, q-mr-*, q-mx-*),
xs (extra small),
sm (small),
md (medium),
lg (large),
xl (extra large)
|
例子
|
<!-- 所有方向小的padding -->
<div class="q-pa-sm">...</div>
<!-- 项部中margin, 右边小margin -->
<q-card class="q-mt-md q-mr-sm">...</q-card>
|
阴影
| css 类名 | 说明 |
|---|---|
no-shadow |
移除任何阴影 |
inset-shadow |
设置一个插入阴影 |
shadow-1 |
设置1的深度 |
shadow-2 |
设置2的深度 |
shadow-N |
其中N是1到24的整数 |
shadow-transition |
在阴影上应用CSS转换; 最好与hoverable类一起使用 |
| shadow-up-1 | 设置1的深度 |
| shadow-up-2 | 设置2的深度 |
| shadow-up-N | 其中N是1到24的整数 |
可见性
常见功能
| 类名 | 说明 |
|---|---|
disabled |
游标更改为“disable”，不透明度设置为较低值。 |
hidden |
将display设置为none。与下面的类相比 - hidden类意味着元素不会显示并且不会占用布局中的空间。 |
invisible |
将visibility设置为hidden。与上面的类相比，invisible类意味着元素不会显示，但它仍然占用布局空间。 |
transparent |
背景颜色是透明的。 |
dimmed |
在您的元素上应用深色透明覆盖层。不要在已经有:after伪元素的元素上使用。 |
light-dimmed |
在您的元素上应用白色透明覆盖层。不要在已经有:after伪元素的元素上使用。 |
ellipsis |
截取文本并在没有足够的可用空间时显示省略号。 |
ellipsis-2-lines |
当两行中没有足够的可用空间时，截断文本并显示省略号（仅适用于Webkit浏览器）。 |
ellipsis-3-lines |
当三行中没有足够的可用空间时，截断文本并显示省略号（仅适用于Webkit浏览器）。 |
z-top |
将元素定位在任何其他组件的顶部，但位于Popovers、提示框、通知框之后。 |
z-max |
将元素定位在任何其他组件（包括Drawer，Modals，Notifications，Layout header/footer…）之上 |
定位
对齐
| 类名 | 说明 |
|---|---|
float-left |
浮动到左侧 |
float-right |
浮动到右侧 |
on-left |
在右侧设置一个小边距;通常用于有兄弟元素的图标元素 |
on-right |
在左侧设置一个小边距;通常用于有兄弟元素的图标元素 |
辅助类
鼠标相关
| 类名 | 说明 |
|---|---|
non-selectable |
用户将无法选择DOM节点及其文本 |
scroll |
应用CSS调整使所有平台上的滚动工作达到最佳状态 |
no-scroll |
隐藏DOM节点上的滚动条 |
no-pointer-events |
DOM元素不会成为鼠标事件的目标 - 点击、悬停等 |
all-pointer-events |
no-pointer-events的反义词 |
cursor-pointer |
改变DOM元素上的鼠标指针，看起来好像在可点击的链接上 |
cursor-not-allowed |
更改DOM元素上的鼠标指针，使其看起来好像不会执行任何操作 |
cursor-inherit |
将DOM元素上的鼠标指针更改为与父选项相同 |
cursor-none |
没有鼠标光标被渲染 |
大小相关
| 类名 | 说明 |
|---|---|
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 |
删除任何边框 |
no-border-radius |
删除边框可能具有的任何半径 |
rounded-borders |
应用通用边框半径 |
Flex
设置方向
| 类名 | 说明 |
|---|---|
row |
Flex行 |
row inline |
内联Flex行 |
column |
Flex列 |
column inline |
内联Flex列 |
row reverse |
将flex-direction设置为row-reverse的Flex行 |
column reverse |
将flex-direction设置为column-reverse的Flex列 |
包裹
| 类名 | 说明 |
|---|---|
wrap |
如有必要进行包裹（默认为“on”，不需要指定） |
no-wrap |
即使有必要，也不要包裹 |
reverse-wrap |
如有必要逆向包裹 |
对齐
- 沿主轴
图片.png
- 垂直于主轴
图片.png
- 多条主轴且有多余空间时
图片.png
自对齐
子元素可以覆盖父元素上指定的对齐方式。 这允许对单个Flex项进行对齐。
可用值有： self-start, self-center, self-baseline, self-end, self-stretch
图片.png
大小
与 flex 值使用类似
Quasar使用一个12分的列系统来分配子行的大小。 以下是可用的CSS辅助类的一些示例：
|
<div class="row">
<div class="col-8">two thirds</div>
<div class="col-2">one sixth</div>
<div class="col-auto">auto size based on content and available space</div>
<div class="col">fills remaining available space</div>
</div>
|
在上面的例子中，由于8/12 = 2/3 = 66％，col-8占据了行宽的三分之二（2/3），而col-2占据了六分之一（2/12 = 1 / 6〜16.67％）。
CSS辅助类col-auto使单元格只填充需要渲染的空间。 另一方面，col试图填充所有可用的空间，同时如果需要也可以缩小。
CSS辅助类col-grow使单元格至少填充需要渲染的空间，并有可能在有更多空间可用时增长。
CSS辅助类col-shrink使单元格最多填充需要呈现的空间，并且当没有足够的可用空间时有可能收缩。
顺序
您可以使用order-first和order-last CSS辅助类来设置子元素的顺序。
默认情况下，Flex项按源(source)顺序排列。 但是，order属性控制它们在flex容器中的显示顺序。 如果您需要更多粒度，请使用order CSS属性并分配所需的值。
例子：
|
<div class="row">
<div style="order: 2">Second column</div>
<div class="order-last">Third column</div>
<div class="order-first">First column</div>
</div>
|
以下是CSSorder属性的工作原理：
图片.png
网友评论