我尝试设置边距,填充以将后箭头图标移动到标题的左侧但是失败了。我该如何做到这一点?
<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>
答案 0 :(得分:7)
我的后退按钮也有同样的问题。文档中没有可视化演示,但阅读文档后我发现了正确的方法:只需在按钮上放置一个类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>
答案 1 :(得分:3)
尝试使用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>
答案 2 :(得分: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>
如果图标在班级&#34; mdl-layout__header-row&#34; ,
您无法通过设置边距,填充来移动后退箭头图标。
您将知道是否按Ctrl + Shift + I进入图标。
您可以将后退箭头按钮移动到&#34; mdl-layout__header-row&#34;的左侧。通过
在班级&#34; mdl-layout__header&#34;中设置图标按钮。
我希望它可以帮助你:)
答案 3 :(得分: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>
试试这个,我遇到了同样的问题并提出了解决方法。
答案 4 :(得分: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>
答案 5 :(得分:0)
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
即使在大屏幕上也会显示后退按钮,您无法将用户引导至上一页,并且您不想只依赖它们点击浏览器的后退按钮。