如何使用AngularJS Material Design lib实现页面结构,如官方Layout structure guideline中所述,并在下面的屏幕截图中进行了说明?我想要集中卡片打破页面工具栏的边缘。 Codepen的例子将不胜感激。布局结构 - 卡片布局和工具栏与angularjs md
编辑:相关话题:Angular Material Design layout
如何使用AngularJS Material Design lib实现页面结构,如官方Layout structure guideline中所述,并在下面的屏幕截图中进行了说明?我想要集中卡片打破页面工具栏的边缘。 Codepen的例子将不胜感激。布局结构 - 卡片布局和工具栏与angularjs md
编辑:相关话题:Angular Material Design layout
您可以轻松地做到这一点用一点CSS
.card_position{
margin-top:-70px
}
这个类添加到卡元件。
我想我会发布这个来帮助别人试图用Materialise CSS做同样的事情。您可以更改导航栏的高度以及卡的大小/位置。
HTML
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo left"><i class="material-icons">list</i></a>
</div>
<div class="nav-wrapper">
</div>
</nav>
<
<<div class="row" id="card-placement"> <!-- id added here -->
<div class="col s12 m8 offset-m2">
<div class="card grey lighten-5">
<div class="card-content grey-text text-darken-1">
<h5 class="head">Title</h5> <!-- class added here -->
<div class="divider"></div>
<p>Stuff goes here</p>
</div>
</div>
</div>
</div>
CSS
/* Moves card up into navbar */
#card-placement{
margin-top:-60px
}
/* Moves Title position up to be level with nav bottom */
.head {
margin-top: -2px;
}
nav {
color: #fff;
background-color: #ee6e73;
width: 100%;
height: 112px;
line-height: 56px;
}
.nav-wrapper {
margin-left: 20px;
}