menu MDUI 规范
color_lens
near_me
开始使用
keyboard_arrow_down
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down

规范

HTML / CSS 规范

MDUI 中的 CSS 类名全部以 mdui- 作为前缀。

组件的命名为 mdui-{组件名}。组件的子元素命名为 mdui-{组件名}-{子元素名}

例如一个对话框的结构为:

<div class="mdui-dialog">
  <div class="mdui-dialog-title"></div>
  <div class="mdui-dialog-content"></div>
  <div class="mdui-dialog-actions"></div>
</div>

JavaScript 规范

MDUI 中大部分组件都需要使用 JavaScript 进行初始化。初始化方式包括下面三种情况:

  1. 使用事件委托,在触发事件时初始化。

    这类组件只需编写 HTML 即可,无需额外代码。

  2. 使用自定义属性初始化。

    在组件上添加自定义属性 mdui-{组件名} 即可在页面加载完后自动初始化。也可以为自定义属性传入参数:mdui-{组件名}="{key1: 'val1', key2: 'val2'}"

  3. 使用 JavaScript 初始化。

    使用方法通常为 var inst = new mdui.{组件名}();,该方法返回组件实例。然后可以调用实例的方法 inst.method()

设置文档主题

主题色

主色

强调色