微信分享 Logo

通用组件

QMUI Web 的通用组件与 Bootstrap 这类组件库框架中的组件并不相同,通用组件本身只有实现了很少的必要样式,而通过 Sass 配置表的方式预留了大量可配置的接口,在创建一个新项目后,应该先根据设计配置好这些信息,当这些信息配置完成,那么一个项目的基本样式就可以快速实现了。当然,也可以直接使用默认样式用于快速开发。

以下是 Demo 的组件展示效果,在实际项目中,你无需另外复制这些 HTML 来产生组件,当开发者使用 generator-qmui 安装 QMUI Web 时,该工具会自动按默认配置生成一个组件列表。

按钮

主要的 CSS Selector .qui_btn

<a class="qui_btn dm_btn" href="javascript:;">按钮</a> <a class="qui_btn dm_btn dm_btn_Ghost" href="javascript:;">按钮</a> <a class="qui_btn dm_btn" href="javascript:;" disabled>按钮禁用</a> <a class="qui_btn dm_btn dm_btn_Ghost" href="javascript:;" disabled>按钮禁用</a>

对话框

主要的 CSS Selector .qui_dialog

展示:
×
对话框标题
这里是对话框的主体内容。
通常一个对话框由头部、主体内容和底部栏三部分组成。
<div class="qui_dialog dm_dialog"> <a class="qui_dialog_close dm_dialog_close" href="javascript:;">×</a> <div class="qui_dialog_head dm_dialog_head"> <div class="qui_dialog_title dm_dialog_title">对话框标题</div> </div> <div class="qui_dialog_body dm_dialog_body"> 这里是对话框的主体内容。<br /> 通常一个对话框由头部、主体内容和底部栏三部分组成。 </div> <div class="qui_dialog_foot dm_dialog_foot"> <a class="qui_btn dm_btn dm_btn_Blue" href="javascript:;">是</a> <a class="qui_btn dm_btn" href="javascript:;">否</a> <a class="qui_btn dm_btn dm_btn_Blue dm_btn_Blue_Disabled" href="javascript:;">否</a> </div> </div>

遮罩层

主要的 CSS Selector .qui_mask

展示:
<div id="maskWrap" style="display: none;"> <!-- 包裹遮罩层和主体元素的容器,由前端控制 --> <div class="qui_mask dm_mask"></div> <!-- 这里是对话框或其他需要展示的主体元素 --> </div>

下拉菜单

主要的 CSS Selector .qui_dropdownMenu

<div class="qui_dropdownMenu dm_dropdownMenu"> <ul> <li class="qui_dropdownMenu_item dm_dropdownMenu_item"> <a href="javascript:;" class="qui_dropdownMenu_itemLink dm_dropdownMenu_itemLink">菜单选项一</a> </li> <li class="qui_dropdownMenu_item dm_dropdownMenu_item"> <a href="javascript:;" class="qui_dropdownMenu_itemLink dm_dropdownMenu_itemLink">菜单选项二</a> </li> <li class="qui_dropdownMenu_item dm_dropdownMenu_item"> <a href="javascript:;" class="qui_dropdownMenu_itemLink dm_dropdownMenu_itemLink">菜单选项三</a> </li> <li class="qui_dropdownMenu_item dm_dropdownMenu_item"> <a href="javascript:;" class="qui_dropdownMenu_itemLink dm_dropdownMenu_itemLink">菜单选项四</a> </li> </ul> </div>

选项卡

主要的 CSS Selector .qui_tab

展示:
这里是选项卡的内容
<div class="qui_tab dm_tab"> <div class="qui_tab_title dm_tab_title"> <ul class="qui_tabNav dm_tabNav"> <li class="qui_tabNav_item dm_tabNav_item dm_tabNav_item_Curr"> <a href="javascript:;" class="qui_tabNav_itemLink dm_tabNav_itemLink">选项卡一</a> </li> <li class="qui_tabNav_item dm_tabNav_item"> <a href="javascript:;" class="qui_tabNav_itemLink dm_tabNav_itemLink">选项卡二</a> </li> <li class="qui_tabNav_item dm_tabNav_item"> <a href="javascript:;" class="qui_tabNav_itemLink dm_tabNav_itemLink">选项卡三</a> </li> </ul> </div> <div class="qui_tab_cnt dm_tab_cnt">这里是选项卡的内容</div> </div>

文本输入

主要的 CSS Selector .qui_inputText .qui_textarea

展示:
<input type="text" class="qui_inputText dm_inputText" placeholder="普通文本框" /> <textarea class="qui_textarea dm_textarea" placeholder="可惜"></textarea>

扩展组件

扩展组件是指那些不便于收录到通用组件中(通常是因为组件的业务性无法完全剥离,或者是组件只有在某些项目下才会被用到,通用性不大),但因为结构复杂,或者有一些技术难点的存在,仍值得参考的组件。因此这里展示的扩展组件都仅作参考作用,QMUI 主源码中并不提供这些组件。

CSS Sprite 自动合并

QMUI 提供了一套自动 CSS Sprite 的方案,但由于该方案无法剥离业务耦合,因此无法抽成公共的方法,所以无法集成到 QMUI Web 源码中,这里使用示例的形式展示该方案。

效果可以参考本站任意一个 icon(例如对话框的关闭按钮),相关的 scss 文是本 Demo 中的 UI_dev/project/widget/_images.scss,里面有关于这套方案的详细注释。如果你已经通过代码大概了解了这套方案的机制,那么下面还有几点总结可以帮助了解这套方案:

  • 总的思路是在图片目录内,为一张 Sprite 图所需的所有 icon 建立一个目录,Compass 会去遍历这个目录,并根据图片名和前缀生成对应的虚函数和 class。因此所有的 icon 都应该用一个独立的 span 去实现。
  • 如果是带有链接的 icon,应该使用 a 标签,通常这类 icon 还有 hover 的效果,需要在 hover 时切换另一张图,这时候应该用 a>span.icon 的形式实现,a:hover 时通过 Compass 的命令获取需要的图片,具体的写法可以参见 scss 文件。
  • 两倍图也是另外建立一个与存放一倍图的目录平级的目录,使用 Compass 遍历,与一倍图相似。这里要提醒的是,1倍图和2倍图的宽高必须保持严格的1:2的关系,因为 Compass 最终会以一倍图的尺寸计算每个 icon 的 background-position,再利用 background-size: 100% 控制2倍图的显示,如果尺寸不成比例,2倍图下的 icon 位置就会乱了。

等高左右双栏

展示(实现方式1):
左栏
右栏
  • 采用table-cell原理实现,缺点是会受到table-cell固有缺陷的限制,比如table-cell本身无法固定宽度。
展示(实现方式2):
左栏
右栏
采用特殊padding+margin实现,缺点是外层容器需设置overflow:hidden,而这通常会阻碍容器内部的下拉菜单伸出外容器。

文件上传按钮

展示:
  • 内部包裹有一个"file"类型的input,但这种类型的input有部分区域是无法实现cursor:pointer效果的,因此需要像此例中一样,设法将不可自定义鼠标的区域移到包裹容器外部。

树状选择菜单

展示:
  • 中国
    • 河南省
    • 东北省
    • 广东省
      • 广州市
      • 佛山市
  • 比较繁琐的是checked状态下的背景色块的位置相关的样式设置