如何解决大纲选择不显示mdc-select v4.0.0
我正在尝试实施“材料设计选择菜单”。基本的方法工作正常,但是当我为“选择轮廓”变体应用HTML格式时,它不能正确显示(see CodePen),而是显示垂直线而不是选择。
这是我的HTML:
<div class="mdc-select mdc-select--outlined mdc-select--with-leading-icon language-select">
<div class="mdc-select__anchor">
<div class="mdc-notched-outline mdc-notched-outline--upgraded">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<div id="language-selected-text" class="mdc-select__selected-text" role="button" aria-haspopup="listBox" aria-labelledby="language-select-label language-selected-text" tabindex="0" aria-disabled="false">
</div>
<label id="language-select-label" class="mdc-floating-label">
Language
</label>
<i class="material-icons mdc-select__icon" tabindex="0" role="button"></i>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface language-select" role="listBox">
<ul class="mdc-list">
<li class="mdc-list-item" data-value="/en/" role="option" tabindex="-1">
<span class="mdc-list-item__graphic">
<img src="/static/icons/languages/en.png" alt="English flag icon">
</span>
<span class="mdc-list-item__text">English</span>
</li>
<li class="mdc-list-item" data-value="/fr/" role="option" tabindex="-1">
<span class="mdc-list-item__graphic">
<img src="/static/icons/languages/fr.png" alt="Français flag icon">
</span>
<span class="mdc-list-item__text">Français</span>
</li>
<li class="mdc-list-item" data-value="/id/" role="option" tabindex="-1">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__graphic">
<img src="/static/icons/languages/id.png" alt="Indonesia flag icon">
</span>
<span class="mdc-list-item__text">Indonesian</span>
</li>
<li class="mdc-list-item" data-value="/it/" role="option" tabindex="-1">
<span class="mdc-list-item__graphic">
<img src="/static/icons/languages/it.png" alt="Italiano flag icon">
</span>
<span class="mdc-list-item__text">Italiano</span>
</li>
</ul>
</div>
</div>
我使用v4.0.0 of mdc-select以及文档中概述的HTML,CSS和JS:https://github.com/material-components/material-components-web/blob/v4.0.0/packages/mdc-select/README.md
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。