最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to create a dropdown from an icon using Angular Material? - Stack Overflow

programmeradmin4浏览0评论

I would like to click the alarm icon and that creates a dropdown menu.

I have already seen this

Here is what I have already tried on this demo

I still have the dropdown input box, which I want removed, so I can only see the icon before clicking. I would like it so that it is only the icon and when that gets pressed, it generates the dropdown.

How can I achieve this?

PS: it would be great to see a demo of it on Stackblitz :)

I would like to click the alarm icon and that creates a dropdown menu.

I have already seen this

Here is what I have already tried on this demo

I still have the dropdown input box, which I want removed, so I can only see the icon before clicking. I would like it so that it is only the icon and when that gets pressed, it generates the dropdown.

How can I achieve this?

PS: it would be great to see a demo of it on Stackblitz :)

Share Improve this question edited Dec 13, 2018 at 8:54 apollowebdesigns asked Dec 13, 2018 at 8:47 apollowebdesignsapollowebdesigns 7681 gold badge13 silver badges30 bronze badges 6
  • Can you show us what you've tried so far? – Julien Lachal Commented Dec 13, 2018 at 8:50
  • @JulienLachal It's on the demo link above. But here it is again stackblitz./edit/angular-e7twlq?file=app/… – apollowebdesigns Commented Dec 13, 2018 at 8:52
  • Sorry, wasn't clear, I thought you were showing 2 different links of what you had seen, my bad. – Julien Lachal Commented Dec 13, 2018 at 8:53
  • 1 boolean flag will do a trick but not sure this is what you wanted? To achieve this in a proper way need to apply CSS – Prashant Pimpale Commented Dec 13, 2018 at 9:01
  • You need to try to hide the arrow, put no background on the mat-form-field-underline and reposition the mat-icon of the alarm clock – Julien Lachal Commented Dec 13, 2018 at 9:04
 |  Show 1 more ment

2 Answers 2

Reset to default 5

I think you can achieve what you're looking for just by using some CSS, essentially hiding the .mat-select-arrow-wrapper element and adjusting some padding.

I've created a StackBlitz example that you can have a look at.

Nowdays i think someone would use the Angular Material Menu Component.
see Angular Material Docs: Menu Component Example "Menu with icons".

If someone stumbles over this like my colleague.

发布评论

评论列表(0)

  1. 暂无评论