Material Design 3(Material You) UI components using Web Components.
v1.0.0 和 v0.4.3 不兼容,不兼容的部分包括:
在 0.4.3 中它叫 mdui.JQ
,在 1.0.0 中更名为 mdui.$
。
如此更改后,在 ES6 模块化环境中,你可以使用如下方式导入 mdui.$
,使用上更便捷。
import { $ } from 'mdui';
mdui.$
中还对多个方法的功能进行了扩充,这里不再叙述。下面仅列出和 0.4.3 不兼容的更新部分。
在 0.4.3 中,是否包含内边距取决于 box-sizing
属性的值。
在 1.0.0 中,宽度和高度与 box-sizing
的属性无关。修改后与 jQuery 保持一致。
在 0.4.3 中,返回值格式为 { top: number, left: number, width: number, height: number }
在 1.0.0 中,返回值格式改为 { top: number, left: number }
。修改后与 jQuery 保持一致。
在 0.4.3 中,参数可以是 CSS 选择器、DOM 元素、数组等多种类型。 在 1.0.0 中,参数只能是 CSS 选择器类型。修改后与 jQuery 保持一致。
在 0.4.3 中,参数可以是 CSS 选择器、DOM 元素、数组等多种类型。 在 1.0.0 中,参数只能是 CSS 选择器或 DOM 元素。修改后与 jQuery 保持一致。
在 0.4.3 中,可以使用 $(document).ready(function () {})
来调用 DOM 加载完毕需要执行的函数。
在 1.0.0 中,请将其替换为 $(function () {})
。
在 0.4.3 中,.ajax()
方法的返回值为 XMLHttpRequest 对象。且支持发送 jsonp 请求。
在 1.0.0 中,返回值改为了 Promise。且该方法不再支持 jsonp 请求。
v0.4.1 可以无缝升级到 v0.4.2
mdui-appbar-inset
,在应用栏上添加该类后,可以使应用栏左侧留出抽屉栏的宽度通过 trigger 方法触发事件时,传入的参数,改为存储在事件对象的 _detail 属性中。 因为触发鼠标事件时,事件对象的 detail 属性是只读的。 不过为了向下兼容,对于非鼠标事件,仍然同时在 detail 属性中存储了事件参数。
mdui.JQ('.box').trigger('click', {key1: 'value1', key2: 'value2'});
mdui.JQ('.box').on('click', function(e, data) {
// 在 v0.3.0 中,data === e.detail
// 在 v0.4.0 中,data === e._detail
})
mdui.mutation()
方法,支持 DOM 突变重启 DATA APITextfield
组件样式遵循 Material Design 规范进行了优化mdui.JQ
的 trigger
方法支持鼠标事件模拟mdui.JQ
的 ajax 参数 contentType
为 false 时,将不添加 Content-Type
请求头mdui.prompt()
方法支持在按下回车键时确认输入内容Select
组件在选中值后会触发 change
事件Snackbar
新增一种调用方式 mdui.snackbar(message, opts)
Snackbar
的 timeout
参数为 0 时,改为永不自动关闭Textfield
组件的多行文本框在添加 rows
属性后,高度将固定Textfield
组件支持添加帮助文本handleUpdate
方法后可生效change.mdui.tab
事件参数错误mdui.JQ 传入到事件处理函数中的参数,获取方式进行了变更。
mdui.JQ('p').on('click', {foo: 'bar'}, function (event) {
// v0.2.1 及之前的版本获取参数方式为 event.data
// v0.3.0 起需要改为 event._data
});
Select
组件mdui.JQ
中新增 ajax
方法Drawer
组件新增 swipe
参数,可通过滑动手势打开和关闭抽屉栏Collapse
组件新增了 mdui-panel-item-close
属性;Panel
组件新增了 mdui-collapse-item-close
属性,可在点击时关闭面板Snackbar
新增 onOpen
、onOpened
、onClosed
回调函数Snackbar
新增 position
参数,可用于调整 Snackbar
的位置Tooltip
组件修改参数不能实时生效的问题mdui.JQ().data(object)
的返回值错误,该方法返回 JQ
对象mdui.JQ().width()
、mdui.JQ().height()
计算错误v0.2.0 可以无缝升级到 v0.2.1
mdui.less
时的报错问题z-index
值从 8000 改为 4000,使其位于抽屉栏下方.mdui-row-gapless
无效的问题tooltip
时,第一次触摸时无法打开 tooltip
的问题