本文阅读量 次
1. Quasar 使用教程¶
1.1 布局¶
1.2 文本¶
文本相关的均以 text- 开头, 官方文档 ⧉
标题
<text-h1><text-h2><text-h3><text-h4><text-h5><text-h6>
文本变形
<text-subtitle1><text-subtitle2><text-body1><text-body2><text-caption><text-overline>
控制粗细
<text-weight-thin><text-weight-light><text-weight-regular><text-weight-medium><text-weight-bold><text-weight-bolder>
其它辅助
<text-right><text-left><text-center><text-justify><text-bold><text-italic><text-no-wrap><text-strike><text-uppercase><text-lowercase><text-capitalize>
1.3 Margin & Padding¶
格式如下
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)
示例
<!-- small padding in all directions -->
<div class="q-pa-sm">...</div>
<!-- medium margin to top, small margin to right -->
<q-card class="q-mt-md q-mr-sm">...</q-card>
感知屏幕大小
Margin 和 Padding 也可以配置成根据屏幕 breakpoint 进行适配
需要打开如下配置
quasar.config file > framework > cssAddon: true
格式如下
.q-(p|m)(t|r|b|l|a|x|y)-<bp>-(none|auto|xs|sm|md|lg|xl)
1.4 q-menu 组件¶
可以通过 q-menu 的 target 属性指定，在哪些目标上右键可以激活 Context Menu。默认是在 Context Menu 的 父级元素 上右键激活
1.5 q-table 组件¶
1.6 q-tree 组件¶
q-tree 只有通过 v-model:selected 绑定后，最后一级的叶子节点才能有选中状态
1.7 q-list 组件¶
item 及 item-like 的组件继承关系如下
一些官网示例的拆解
