6

我尝试设置边距，填充以将后向箭头图标移动到标题左侧，但失败了。我应该如何使这个正确？

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
 <header class="mdl-layout__header">
  <div class="mdl-layout__header-row">
      <!--back arrow-->
      <button class="mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);">
       <i class="material-icons">arrow_back</i>
      </button>

     <!--Title-->
     <span class="mdl-layout-title">Settings</span>
  </div>

 <!-- Tabs -->
 <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
  <a href="{{pathFor route='home'}}" class="mdl-layout__tab">Profile</a>
  <a href="{{pathFor route='settings'}}" class="mdl-layout__tab">Account</a>
</div>

4

6 回答 6

11

我的后退按钮也有同样的问题。文档中没有可视化演示，但阅读文档后我发现了正确的做法：只需mdl-layout-icon在按钮上放一个类。

<header class="mdl-layout__header">
  <button class="mdl-layout-icon mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);">
    <i class="material-icons">arrow_back</i>
  </button>    
  <div class="mdl-layout__header-row">
    <span class="mdl-layout-title">Some title</span>
    <div class="mdl-layout-spacer"></div>
  </div>
</header>
于 2015-09-18T09:44:11.673 回答
4

尝试像这样使用“mdl-layout__drawer-button”类：

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__drawer-button"><i class="material-icons">arrow_back</i></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Title</span>
    </div>
  </header>
  <main class="mdl-layout__content">
    <div class="page-content">
       Content
    </div>
  </main>
</div>
于 2017-01-10T23:30:03.537 回答
0

您的意思是要将箭头图标向后移动到标题的左侧？

像这样 ？

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
 <header class="mdl-layout__header">
       <button class="mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);">
       <i class="material-icons">arrow_back</i>
      </button>
  <div class="mdl-layout__header-row">
      <!--back arrow-->


     <!--Title-->
     <span class="mdl-layout-title">Settings</span>
  </div>

 <!-- Tabs -->
 <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
  <a href="{{pathFor route='home'}}" class="mdl-layout__tab">Profile</a>
  <a href="{{pathFor route='settings'}}" class="mdl-layout__tab">Account</a>
</div>

如果图标在“mdl-layout__header-row”类中，

您无法通过设置边距、填充来移动后退箭头图标。

如果您对图标执行 Ctrl + Shift + I，您就会知道。

您可以将后退箭头按钮移动到“mdl-layout__header-row”的左侧

在“mdl-layout__header”类中设置图标按钮。

我希望它可以帮助你:)

于 2015-07-15T15:15:57.630 回答
0 
<div class="mdl-layout__header-row" style="padding-left: 2%;">
    <!--back arrow-->
    <i class="material-icons" style="margin-right: 5%">arrow_back</i>    
    <!--Title-->
    <span class="mdl-layout-title">Settings</span>
</div>

试试这个，我遇到了同样的问题并想出了这个解决方法。

于 2015-08-25T12:52:19.993 回答
0

anneb 的解决方案对我有用，但没有onclick.

这是完整的解决方案。

了解class="mdl-layout__drawer-button"并history.back()解决问题。

添加这一行

<div class="mdl-layout__drawer-button" onclick="history.back()"><i class="material-icons">arrow_back</i></div>

下mdl-layout__header和上mdl-layout__header-row。

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__drawer-button" onclick="history.back()"><i class="material-icons">arrow_back</i></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Title</span>
    </div>
  </header>
  <main class="mdl-layout__content">
    <div class="page-content">
       Content
    </div>
  </main>
</div>
于 2017-06-01T09:13:13.783 回答
0

anneb 的解决方案对我有用。然而，为了让它适用于每个屏幕尺寸，我必须编写一些自定义 CSS（尽管这可能特定于我的情况）。我定义了我自己的.mdl-layout__back-button类如下：

.mdl-layout--fixed-drawer .mdl-layout__back-button {
  @extend .mdl-layout__drawer-button;

  margin-left: 240px;

  & + .mdl-layout__header-row {
    padding-left: 72px;
  }
}

即使在没有其他方法将用户引导到上一页并且您不想仅依靠他们点击浏览器的后退按钮的大屏幕上，这也会显示后退按钮。

于 2017-09-01T17:17:10.580 回答