通用组件

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

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

按钮

展示:

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

对话框

展示:

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

遮罩层

展示:

<div id="maskWrap" style="display: none;"> 
  <div class="dm_mask"></div>

</div>

下拉菜单

展示:

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

选项卡

展示:

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

文本输入

展示:

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