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

Question

我正在尝试使用Material Components for web的多个选择来实现材料设计Select Component。但我找不到任何相同的选择。

选择代码。[文档]

<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>
        

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

Answer 1

该文件明确指出

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

您需要：

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

Gmail：分配多个标签。

Gmail：多个收件人

Google 日历：选择多个活动来宾