如何为角材料制作水平导航栏

Question

这是我第一次使用Angular Material而我只是问你们是否可以帮助我使用Angular Material为我的项目添加水平导航栏？我在寻找一个方面遇到了一些麻烦.先感谢您!保持好状况 :)

Answer 1

看看这个例子:

<div layout="row" layout-padding class="bg-dark-blue nav-dark" layout-align="space-between center">
<div>
    <md-button>Home</md-button>
    <md-button>Item 1</md-button>
    <md-button>Item 2</md-button>
    <md-menu>
        <md-button md-menu-origin ng-click="$mdOpenMenu()">Help</md-button>
        <md-menu-content width="2">
            <md-menu-item>
                <md-button>Help</md-button>
            </md-menu-item>
            <md-menu-item>
                <md-button>About</md-button>
            </md-menu-item>
        </md-menu-content>
    </md-menu>
</div>
<div class="nav-buttons">
    <md-button class="md-raised md-accent">My profile</md-button>
    <md-button class="md-raised md-warn">Log Out</md-button>
</div>

它的一些类只是用于着色内容,不要太注意它们:)

Answer 2

根据官方文档,水平导航栏的创建就像使用a一样简单md-toolbar.

    <md-toolbar layout="row" class="md-whiteframe-z3" style="padding:0px;margin:0px;position:fixed;">
<h2>Sample navbar</h2>
</md-toolbar>`

您可以在导航栏中添加任意数量的项目,并且可以使用固定每个项目的对齐方式<span flex></span>.

在span flex中,我们还可以为特定对齐指定值.