在 header 左侧实现一个 FAB 按钮并在其下方悬挂部分

Question

尝试在 MDL 中的 header 左侧实现一个添加按钮。

可以在 getmdl.io 网站上看到示例 https://getmdl.io/templates/text-only/index.html

我定义了以下 header。

    <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">Task Manager</span>
            <div class="mdl-layout-spacer"></div>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
                    <i class="material-icons">search</i>
                </label>
                <div class="mdl-textfield__expandable-holder">
                    <input class="mdl-textfield__input" type="text" id="search-expandable" />
                    <label class="mdl-textfield__label" for="search-expandable">Search text</label>
                </div>
            </div>
        </div>
        <div class="mdl-layout-spacer"></div>
        <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent mdl-button--mini-fab mdl-badge--overlap" id="add">
            <i class="material-icons" role="presentation">add</i>
            <span class="visuallyhidden">Add</span>
        </button>
    </header>

此项目中不需要制表符 - 但似乎无法像链接示例中那样将其放在 header 下方。

Answer 1

将以下内容 CSS 添加到链接到页面的样式表中

.mdl-layout__header
{
    position: relative;
    overflow:visible;
}

.add-button{
    position: absolute;
    right: 10px;
    bottom: -25px;
}

然后将下面的class添加到按钮

add-button

在 header 左侧实现一个 FAB 按钮并在其下方悬挂部分

Implementing a FAB button to the left of the header and hanging part below it

css

material-design-lite