如何在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 单选项选择菜单

您将需要：

1. 使用其他组件。
2. 更改UI设计。似乎“多种选择选择”不在材料设计准则中。对于需要选择多个值的情况，Google本身使用不同的方法。以下是一些示例，这些示例应该可以使您了解如何解决“多个选择选择”问题：

Gmail：分配多个标签。

Gmail：多个收件人

Google日历：选择多个活动邀请对象