如何在 Web 的 Material 组件中实现 Multi - Select

Question

我正在尝试使用来自 [=13= 的多个 select 离子实现 material 设计 Select 组件 ]。但是我找不到相同的选项。

Select 的代码。 [ 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>

我们如何更改它以支持列表或下拉列表中的多个 select 离子或允许多个 select 的同一组件？

Answer 1

文档明确指出

MDC Select provides Material Design single-option select menus, using the MDC menu

您需要：

使用其他组件。
更改UI 设计。似乎“多个select离子select”不在Material设计指南中。 Google 本身在需要 select 编辑多个值的情况下使用不同的方法。这里有几个例子可以让你了解如何解决“多个select离子select”：

Gmail：分配多个标签。

Gmail：多个收件人

Google 日历：select多个活动嘉宾

如何在 Web 的 Material 组件中实现 Multi - Select

How to implement Multi - Select in Material Components for the web

html

javascript

material-design

dropdown

material-components-web