基于 Material Design 3 和 Web Components 的全新 mdui 2 现已发布，前往查看 mdui 2 开发文档。

Headroom

标签可以包含一张图片、一个短字符串等简洁的信息。

标签组件使用纯 CSS 编写，只需编写 HTML 代码即可生效。

调用方式

纯文本

含头像

<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>

含文字图标

// 含图标
// 含关闭按钮
var inst = new mdui.Headroom(selector, options);

参数名	类型	默认值	说明
`tolerance`	`int` \| `Object`	`5`	图标颜色定义一个标签组件。定义标签的文本。
`offset`	`int`	`0`	定义标签的头像或图标。
`initialClass`	`string`	`mdui-headroom`	定义标签的删除按钮。
`pinnedClass`	`string`	`mdui-headroom-pinned-top`	选择菜单所处位置。包括 <code>auto</code>、<code>top</code>、<code>bottom</code>
`unpinnedClass`	`string`	`mdui-headroom-unpinned-top`	选择菜单距离窗口上下边框至少保持多少间距，单位为 px。该参数仅在 <code>position</code> 为 <code>auto</code> 时有效。

方法名	说明
`pin()`	打开下拉菜单。
`unpin()`	关闭下拉菜单。
`enable()`	切换下拉菜单的打开状态。
`disable()`	当你动态修改了 <code><select></code> 元素的内容时，需要调用该方法来重新生成下拉菜单。
`getState()`	返回当前下拉菜单的打开状态。共包含四种状态（`opening`、`opened`、`closing`、`closed`）。