垂直工具栏是符合材质的元素吗?它在Angular Material中可用吗?
我正在寻找一种在侧边栏中排列几个带有图标的按钮的方法。我想要md-toolbar
大小的东西,但它的行为就像md-sidebar
。md-sidebar
似乎有一个固定的宽度,对于我想固定在那里的图标来说太宽了。
有简单的解决方案吗?我试过使用类似的东西
<section layout="row">
<!-- Sidebar (this should be thin) -->
<md-sidenav class="md-sidenav-left" md-is-locked-open="true" md-whiteframe="4">
<md-button><i class="material-icons">home</i></md-button>
</md-sidenav>
<!-- Main app area -->
<div id="content-main"></div>
</section>
然而,侧边栏对于我在其中显示的简单图标来说太厚了
有没有办法得到一个垂直的md-toolbar
或更薄的md-sidebar
,或者我应该重新思考我的设计?
使用Angular Material-CodePen 可以相对轻松地创建垂直工具栏
- 使用
layout="column"
对齐图标 - 使用
<span flex></span>
将顶部图标与底部图标分开 - 使用CSS控制宽度
- 也许使用
md-whiteframe
来添加凸起效果
标记
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column">
<md-content flex layout="column">
<md-whiteframe id="vericalToolBar" class="md-whiteframe-8dp" layout="column" layout-align="start center" flex>
<md-button class="md-icon-button" aria-label="More">
<md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="Favorite">
<md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
</md-button>
<p id="toolBarTitle" class="md-title">My vertical toolbar</p>
<span flex></span>
<md-button class="md-icon-button" aria-label="Favorite">
<md-icon md-svg-icon="img/icons/cake.svg"></md-icon>
</md-button>
</md-whiteframe>
</md-content>
</div>
CSS
#vericalToolBar {
background-color: rgb(1,74,182);
width: 50px;
}
#vericalToolBar md-icon {
color: rgba(255,255,255,0.87);
}
#toolBarTitle {
writing-mode: tb-rl;
color: rgba(255,255,255,0.87);
}
你研究过md fab快速拨号吗?我可以想象,将触发器放在页面的左上角,并将md direction属性设置为"down",会得到与所需结果类似的结果。