用了一段时间的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
在应用程序的 *.vue 文件中,可以使用 $primary , $red-1 等颜色。
|
|
|
|
|
|
子元素可以覆盖父元素上指定的对齐方式 。 这允许对单个Flex项进行对齐。
可用值有: self-start , self-center , self-baseline , self-end , self-stretch
与 flex 值使用类似
Quasar使用一个12分的列系统来分配子行的大小。 以下是可用的CSS辅助类的一些示例:
|
|
在上面的例子中,由于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属性并分配所需的值。
例子:
|
|
以下是CSS order 属性的工作原理:
Qt Assistant是Qt自带的一款可定制、可重新发行的帮助文件浏览器。Qt Assistant支持HTML文件,用户可以利用其定制自己的功能强大的帮助文档浏览器。
关于Qt Assistant定制的资料主要是Qt Assistant自身所带的英文文档,虽然讲解比较详细,但是对于初学者来说难以快速的入手。
因此结合具体实践,对Qt Assistant定制的过程进行整理,希望对他人能有所启发。
CSS: http://css.doyoe.com/ 这个是在线的。http://tool.oschina.net/apidocs/apidoc?api=css3 这个是CSS3的参考文档。
其他文档已发!请注意查收。