Question

我已将angular-material添加到我的meanjs项目中，并且正在使用样式化的第一个元素。我还确保从该项目中删除了所有其他样式..因此只加载默认的角度样式。

现在，例如，我在这里使用此代码在md-toolbar中创建了一个md菜单：

<md-menu md-position-mode="target-right target">
                        <md-button aria-label="Open profile actions" ng-click="openMenu($mdOpenMenu, $event)" md-menu-origin>
                            <img alt="{{authentication.user.displayName}}" class="header-profile-image" data-ng-src="{{authentication.user.profileImageURL}}"/>
                            <span data-ng-bind="authentication.user.displayName"></span>
                        </md-button>
                        <md-menu-content width="4">
                            <md-menu-item data-ui-sref-active="active">
                                <md-button data-ui-sref="settings.profile">
                                    <ng-md-icon icon="account_circle"></ng-md-icon>
                                    <span md-menu-align-target>Edit Profile</span>
                                </md-button>
                            </md-menu-item>
                            <md-menu-item data-ui-sref-active="active">
                                <md-button data-ui-sref="settings.picture">
                                    <ng-md-icon icon="photo" md-menu-align-target></ng-md-icon>
                                    Change Profile Picture
                                </md-button>
                            </md-menu-item>
                            <md-menu-item data-ui-sref-active="active" data-ng-show="authentication.user.provider === 'local'">
                                <md-button data-ui-sref="settings.password">
                                    <ng-md-icon icon="lock" md-menu-align-target></ng-md-icon>
                                    Change Password
                                </md-button>
                            </md-menu-item>
                            <md-menu-item data-ui-sref-active="active">
                                <md-button data-ui-sref="settings.accounts">
                                    <ng-md-icon icon="share" md-menu-align-target></ng-md-icon>
                                    Manage Social Accounts
                                </md-button>
                            </md-menu-item>
                            <md-menu-divider></md-menu-divider>
                            <md-menu-item data-ui-sref-active="active">
                                <md-button href="/api/auth/signout" target="_self">
                                    <ng-md-icon icon="logout" md-menu-align-target></ng-md-icon>
                                    Signout
                                </md-button>
                            </md-menu-item>
                        </md-menu-content>
                    </md-menu>

然而，即使我删除了图标，也会导致文本和图标位置错误的菜单。它们应该垂直居中，就像你在这里看到的那样： https://material.angularjs.org/HEAD/#/demo/material.components.menu

同样的问题出现了这样的菜单图标：

<md-button aria-label="Open the sidebar" class="md-icon-button menu" ng-click="toggleSideNav()">
                <ng-md-icon icon="menu" style="fill: #fff;" md-menu-align-target></ng-md-icon>
            </md-button>

这导致了这一点

然而..用一些css规则来解决这个问题对我来说没问题。但是我想这个问题一定是在其他地方？有谁有想法？我检查了角度材料文档一千次，无法弄清楚是什么问题。

谢谢！

Answer 1

这是因为你将Angular Material与Angular Material Icons（ng-md-icon），两个不同的项目混合在一起，但ng-md-icon的人已修补他们的库与Angular Material一起运行，但你必须使用Angular Material指令md-icon如下：

而不是：

<ng-md-icon icon="account_circle"></ng-md-icon>

你会使用：

<md-icon ng-md-icon icon="account_circle"></md-icon>

使用角度材料轻微移动元素

1 个答案: