如何在Web的材料组件中实施多重选择 [英] How to implement Multi - Select in Material Components for the web

问题描述

我正在尝试通过

Gmail:多个收件人

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

I am trying to implement material design Select Component with multiple selections from Material Components for the web. But I am unable to find any option for the same.

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

How can we change it to support multiple selections in list or dropdown or same component which allows multi-select?

解决方案

The documentation clearly states

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

You'll need to either:

1. Use some other component.
2. Change UI design. It seems that "multiple selections select" is not in Material Design guidelines. Google itself uses different approaches for situations where multiple values needs to be selected. Here are few examples which should give you an idea how to work around "multiple selections select":

Gmail: assigning multiple labels.

Gmail: multiple addressee

Google Calendar: selecting multiple event guests

这篇关于如何在Web的材料组件中实施多重选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！