Question

我希望在主屏幕的右上角有一个浮动按钮，当点击按钮时，它会在按钮下方打开一张卡片，最好是带有一个指向按钮的箭头，就像这里的按钮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材料做到这一点？我还有其他选择吗？

Answer 1

在顶部栏上重新创建所需内容的更好选项是使用Angular Material中的md-menu组件。菜单是单击时打开的元素。它们可用于在操作上下文中显示其他选项。

查看官方文档中的demo。我希望有所帮助。

继续摇摆！

如何使用AngularJS实现Google等右上方的个人资料按钮？

1 个答案: