Select multiple with Material Design Lite

Question

Select multiple with Material Design Lite

Navigation

#1 by (0 votes)

1

How to make a <select multiple> with the MDL?

I looked at the site but did not find anything. I saw that the AngularJS has this but not the use in the project

html-select material-design multiple

asked by anonymous 28.06.2018 / 13:55

1 answer

Update the angular cli within the project How to leave a text centered between two horizontal lines?

score 0 · Accepted Answer

Two very simple examples:

Using the menu component, added options with checkbox

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script><buttonid="demo" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo">
    <li class="mdl-list__item">
        <span class="mdl-list__item-primary-content">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="0">
                <input type="checkbox" value="foo" id="0" name="foobar[]" class="mdl-checkbox__input" />
                foo
            </label>
        </span>
    </li>
    <li class="mdl-list__item">
        <span class="mdl-list__item-primary-content">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="1">
                <input type="checkbox" value="bar" id="1" name="foobar[]" class="mdl-checkbox__input" />
                bar
            </label>
        </span>
    </li>
    <li class="mdl-list__item">
        <span class="mdl-list__item-primary-content">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="2">
                <input type="checkbox" value="baz" id="2" name="foobar[]" class="mdl-checkbox__input" />
                baz
            </label>
        </span>
    </li>
</ul>

With the getmdl-select library:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script><linkrel="stylesheet" href="http://creativeit.github.io/getmdl-select/getmdl-select.min.css">
<script defer src="http://creativeit.github.io/getmdl-select/getmdl-select.min.js"></script><divclass="mdl-textfield mdl-js-textfield getmdl-select">
  <input type="text" value="" class="mdl-textfield__input" id="sample2" readonly>
  <input type="hidden" value="" name="sample2">
  <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
  <label for="sample2" class="mdl-textfield__label">Country</label>
  <ul for="sample2" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
    <li class="mdl-list__item">
      <span class="mdl-list__item-primary-content">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="0">
                <input type="checkbox" value="foo" id="0" name="foobar[]" class="mdl-checkbox__input" />
                foo
            </label>
        </span>
    </li>
    <li class="mdl-list__item">
      <span class="mdl-list__item-primary-content">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="1">
                <input type="checkbox" value="bar" id="1" name="foobar[]" class="mdl-checkbox__input" />
                bar
            </label>
        </span>
    </li>
    <li class="mdl-list__item">
      <span class="mdl-list__item-primary-content">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="2">
                <input type="checkbox" value="baz" id="2" name="foobar[]" class="mdl-checkbox__input" />
                baz
            </label>
        </span>
    </li>
  </ul>
</div>