微信分享 Logo

通用组件

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

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

按钮

主要的 CSS Selector .qui_btn

对话框

主要的 CSS Selector .qui_dialog

展示:
×
对话框标题
这里是对话框的主体内容。
通常一个对话框由头部、主体内容和底部栏三部分组成。
×
对话框标题
这里是对话框的主体内容。
通常一个对话框由头部、主体内容和底部栏三部分组成。

遮罩层

主要的 CSS Selector .qui_mask

展示:

选项卡

主要的 CSS Selector .qui_tab

展示:
这里是选项卡的内容
这里是选项卡的内容

文本输入

主要的 CSS Selector .qui_inputText .qui_textarea

展示:

扩展组件

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

CSS Sprite 自动合并

QMUI 1.x 版本提供了一套基于 Compass 的自动 CSS Sprite 的扩展组件,从 2.0.0 版本开始弃用,改为更加方便使用的基于 Node.js 的雪碧图方案。若项目中仍需要使用该扩展组件,可以参考这里

等高左右双栏

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

文件上传按钮

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

树状选择菜单

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