Question

我尝试设置边距，填充以将后箭头图标移动到标题的左侧但是失败了。我该如何做到这一点？

<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>

Answer 1

我的后退按钮也有同样的问题。文档中没有可视化演示，但阅读文档后我发现了正确的方法：只需在按钮上放置一个类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>

Answer 2

尝试使用class＆＃39; mdl-layout__drawer-button＆＃39;像这样：

<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>

Answer 3

您的意思是您想将箭头图标移回标题的左侧部分？

像这样？

<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>

如果图标在班级＆＃34; mdl-layout__header-row＆＃34; ，

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

您将知道是否按Ctrl + Shift + I进入图标。

您可以将后退箭头按钮移动到＆＃34; mdl-layout__header-row＆＃34;的左侧。通过

在班级＆＃34; mdl-layout__header＆＃34;中设置图标按钮。

我希望它可以帮助你：）

Answer 4

<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>

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

Answer 5

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>

Answer 6

anneb的解决方案对我有用。但是，为了使它适用于每个屏幕大小我必须编写一些自定义CSS（这可能是我的情况特定的）。我将自己的.mdl-layout--fixed-drawer .mdl-layout__back-button { @extend .mdl-layout__drawer-button; margin-left: 240px; & + .mdl-layout__header-row { padding-left: 72px; } }课程定义如下：

# your date variable
dt=$(date -d '2016-08-15 11:10:15')

# add 1 hour to $dt now
date -d "$dt +1 hour"
Mon Aug 15 12:10:15 EDT 2016

即使在大屏幕上也会显示后退按钮，您无法将用户引导至上一页，并且您不想只依赖它们点击浏览器的后退按钮。

如何在MDL标题上向左移动图标？

6 个答案: