javascript - 如何使用 AngularJS 实现像 Google 一样的右上角个人资料按钮？

Question

我想在主屏幕的右上角有一个 float 按钮，单击时会在按钮下方打开一张卡片，最好有一个指向该按钮的箭头，就像这里的 https://www.google.gr/ 一样。 。我使用 Angular Material 。目前，为了这个目的，我有一个 fab-speed-dial 按钮，并且我使用一张卡来执行 fab-actions。问题是，当卡片出现时，配置文件按钮会重新定位，因此其水平位置位于卡片的中间。

<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 来做到这一点？我还有什么其他选择？

Answer 1

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

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

继续摇摆!