如何使用角度材料在下拉列表中添加三角形

时间:2016-06-21 06:46:10

标签: css drop-down-menu angular-material

我正在尝试使用md-menu-bar和md-menu创建一个下拉列表 你可以在快照enter image description here

中看到

使用代码

<md-menu-bar>
   <md-menu>
     <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
                    <img ng-src="https://media.licdn.com/mpr/mpr/p/5/005/098/12f/223c996.jpg" class="uilr-avatar">
                </md-button>
                <md-menu-content width="4">
                    <md-menu-item>
                        <md-button ng-click="ctrl.redial($event)">
                            <md-icon md-svg-icon="call:dialpad" md-menu-align-target></md-icon>
                            Redial
                        </md-button>
                    </md-menu-item>
                    <md-menu-item>
                        <md-button disabled="disabled" ng-click="ctrl.checkVoicemail()">
                            <md-icon md-svg-icon="call:voicemail"></md-icon>
                            Check voicemail
                        </md-button>
                    </md-menu-item>
                    <md-menu-divider></md-menu-divider>
                    <md-menu-item>
                        <md-button ng-click="ctrl.toggleNotifications()">
                            <md-icon md-svg-icon="social:notifications-{{ctrl.notificationsEnabled ? 'off' : 'on'}}"></md-icon>
                            {{ctrl.notificationsEnabled ? 'Disable' : 'Enable' }} notifications
                        </md-button>
                    </md-menu-item>
                </md-menu-content>
            </md-menu>
        </md-menu-bar>

但是我想要这个下拉,顶部有一个三角形 请检查来自inbox.google.com的快照 enter image description here

请告诉我如何实现这一目标。 提前致谢

1 个答案:

答案 0 :(得分:0)

请检查以下小提琴 这就是你想要的吗?

[https://jsfiddle.net/suunyz3e/252/]