Material Design Lite菜单在名片设计中不起作用 [英] Material Design Lite Menu not working in Card Design
本文介绍了Material Design Lite菜单在名片设计中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用Material Design Lite从教程创建菜单- https://getmdl.io/components /
I am using the material design lite to create a menu from the tutorial - https://getmdl.io/components/
这是代码
<div class="mdl-card__actions mdl-card--border">
<button id="share-menu" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect pull-left">
<i class="material-icons">share</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for="share-menu">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
<span class="mdl-chip mdl-chip--contact center-block">
<span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">12</span>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">thumb_up</i></button>
</span>
<button class="mdl-button mdl-button--icon mdl-button--colored pull-right"><i class="material-icons">add_shopping_cart</i></button>
</div>
单击共享按钮时,未创建菜单,这是设计的图片
When click on the share button the menu is not created here is the image of the design
推荐答案
将'ul'元素的'for'属性替换为'data-mdl-for'应该可以解决此问题.
Replacing the 'for' attribute of the 'ul' element to 'data-mdl-for' should fix the problem.
尝试以下代码
<div class="mdl-card__actions mdl-card--border">
<button id="share-menu" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect pull-left">
<i class="material-icons">share</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
data-mdl-for="share-menu">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
<span class="mdl-chip mdl-chip--contact center-block">
<span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">12</span>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">thumb_up</i></button>
</span>
<button class="mdl-button mdl-button--icon mdl-button--colored pull-right"><i class="material-icons">add_shopping_cart</i></button>
</div>
希望这会有所帮助
这篇关于Material Design Lite菜单在名片设计中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文