如何解决如何在Web的材料组件中实施多重选择
我正在尝试从 Material Components for the web 中进行多项选择来实现材料设计 Select Component 。但是我找不到相同的任何选择。
选择代码。 [Documentation]
<div class="mdc-xyz-inputs-drop-down mdc-select mdc-select--outlined mdc-select--required " style="width:100%">
<input type="hidden" name="xyz-input">
<div class="mdc-select__anchor"
role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-labelledby="xyz-label xyz-selected-text">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span id="xyz-label" class="mdc-floating-label">LABEL</span>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<span id="xyz-selected-text" class="mdc-select__selected-text"></span>
<span class="mdc-select__dropdown-icon">
<svg
class="mdc-select__dropdown-icon-graphic"
viewBox="7 10 10 5" focusable="false">
<polygon
class="mdc-select__dropdown-icon-inactive"
stroke="none"
fill-rule="evenodd"
points="7 10 12 15 17 10">
</polygon>
<polygon
class="mdc-select__dropdown-icon-active"
stroke="none"
fill-rule="evenodd"
points="7 15 12 10 17 15">
</polygon>
</svg>
</span>
<span class="mdc-line-ripple"></span>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
<ul class="mdc-list" role="listbox" aria-label="LABEL">
<!-- Options Start -->
<li class="mdc-list-item" aria-selected="false" data-
value="1" role="option">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">
one
</span>
</li>
<li class="mdc-list-item" aria-selected="false" data-
value="2" role="option">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">
two
</span>
</li>
<!-- Options End -->
</ul>
</div>
</div>
我们如何更改它以支持列表或下拉列表中的多个选择,或者支持允许多选的同一组件?
解决方法
文档明确指出
MDC Select使用MDC菜单提供了Material Design 单选项选择菜单
您将需要:
- 使用其他组件。
- 更改UI设计。似乎“多种选择选择”不在材料设计准则中。对于需要选择多个值的情况,Google本身使用不同的方法。以下是一些示例,这些示例应该可以使您了解如何解决“多个选择选择”问题:
Gmail:分配多个标签。
Gmail:多个收件人
Google日历:选择多个活动邀请对象
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。