如何在 web 的 Material Components 中实现 Multi-Select答案

【问题标题】：How to implement Multi - Select in Material Components for the web如何在 web 的 Material Components 中实现 Multi-Select
【发布时间】：2020-12-29 20:35:32
【问题描述】：

我正在尝试通过 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>

我们如何更改它以支持列表或下拉列表或允许多选的同一组件中的多项选择？

【问题讨论】：

标签： javascript html material-design dropdown material-components-web

【解决方案1】：

文档明确说明

MDC Select 提供 Material Design 单选项选择菜单，使用 MDC 菜单

您需要：

使用其他组件。
更改 UI 设计。似乎“多选选择”不在材料设计指南中。对于需要选择多个值的情况，Google 本身使用不同的方法。以下是一些示例，可以让您了解如何解决“多选选择”：

Gmail：分配多个标签。

Gmail：多个收件人

Google 日历：选择多个活动参与者

【讨论】：