如何使用 AngularJS 实现像谷歌这样的右上角的个人资料按钮？答案

【问题标题】：How to implement top right profile button like Google with AngularJS?如何使用 AngularJS 实现像谷歌这样的右上角的个人资料按钮？
【发布时间】：2017-03-22 08:22:30
【问题描述】：

我想在主屏幕的右上角有一个浮动按钮，点击它会在按钮下方打开一张卡片，最好有一个指向按钮的箭头，就像这里的https://www.google.gr/一样。我使用角材料。目前为此目的，我有一个工厂快速拨号按钮，我使用一张卡片进行工厂操作。问题是当卡片出现时，配置文件按钮会重新定位，使其水平位置位于卡片的中间。

<md-fab-speed-dial md-open="isProfileOpen"
               md-direction="down"
               ng-class="md-fling">
<md-fab-trigger>
    <md-button class="md-fab md-primary md-hue-2"
               aria-label="Profile">
        <md-icon md-svg-src="assets/img/profile.svg"></md-icon>
    </md-button>
</md-fab-trigger>
<md-fab-actions>
    <md-card ng-show="isProfileOpen"  md-theme="{{ showDarkTheme ? 'dark-purple' : 'default' }}" md-theme-watch>
        <md-card-title>
            <md-card-title-text>
                <span class="md-headline">Card with image</span>
                <span class="md-subhead">Medium</span>
            </md-card-title-text>
            <md-card-title-media>
                <div class="md-media-md card-media"></div>
            </md-card-title-media>
        </md-card-title>
        <md-card-actions layout="row" layout-align="end center">
            <md-button><a href="#!/login">Logout</a></md-button>
        </md-card-actions>
    </md-card>
</md-fab-actions>
</md-fab-speed-dial>

有没有办法用 Angular Material 做到这一点？我还有哪些其他选择？

【问题讨论】：

标签： javascript angularjs angular-material

【解决方案1】：

使用 Angular Material 中的 md-menu 组件来重新创建您希望在顶栏上的更好选择。菜单是单击时打开的元素。它们对于在操作的上下文中显示其他选项很有用。

看看官方文档上的demo。我希望这会有所帮助。

继续摇摆！

【讨论】：