30

コンポーネントのリストを読み、提供されている CSS を読みましたが、選択ボックスについての言及は見当たりません。通常の入力のみです。テキスト、ラジオ、チェックボックス、テキストエリアなど

セレクトボックスでMaterial Design Liteをどのように使用しますか? クラスを通常のテキスト入力に使用すると、途中まではできますが、それは確かに正しくありません。

4

10 に答える 10

13

今のところ、JavaScript でメニューを作成しました。いずれにせよ、私の目的のために JavaScript でこれを行う必要があったため、ドロップダウンの代わりにメニューを使用することは問題ではありませんでした。お役に立てば幸いです。

<div id="insert-here"></div>

<script>
var onSelect = function(){
  this.button.innerHTML = this.innerHTML;
}

var insertPoint = 'insert-here';
var numberOfDropdowns = 0;
function makeDropdown(options){
  // create the button
  var button = document.createElement('BUTTON');
  button.id = numberOfDropdowns; // this is how Material Design associates option/button
  button.setAttribute('class', 'mdl-button mdl-js-button');
  button.innerHTML = 'Default';
  document.getElementById(insertPoint).appendChild(button);

  // add the options to the button (unordered list)
  var ul = document.createElement('UL');
  ul.setAttribute('class', 'mdl-menu mdl-js-menu mdl-js-ripple-effect');
  ul.setAttribute('for', numberOfDropdowns); // associate button
  for(var index in options) {
    // add each item to the list
    var li = document.createElement('LI');
      li.setAttribute('class', 'mdl-menu__item');
      li.innerHTML = options[index];
      li.button = button;
      li.onclick = onSelect;
      ul.appendChild(li);
  }
  document.getElementById(insertPoint).appendChild(ul);
  // and finally add the list to the HTML
  numberOfDropdowns++;
}

var optionsA = ["a", "b", "c", "d"];
makeDropdown(optionsA);
var optionsB = ["e", "f", "g", "h"];
makeDropdown(optionsB);
</script>

jsFiddle リンク: https://jsfiddle.net/zatxzx6b/3/embedded/result/

于 2015-07-29T19:13:43.547 に答える
5

私も同じ問題に遭遇しました。自分で実装するのは常に素晴らしいことですが、時間を節約したい場合は、このライブラリがかなりうまく機能しました。https://github.com/MEYVN-digital/mdl-selectfield . これをJSファイルとともに次のファイルに追加するだけです<head>。

<div class="mdl-selectfield mdl-js-selectfield">
  <select id="myselect" name="myselect" class="mdl-selectfield__select">
    <option value=""></option>
    <option value="option0_value">option 0</option>
    <option value="option1_value">option 1</option>
  </select>
  <label class="mdl-selectfield__label" for="myselect">Choose option</label>
</div>

JSFiddle

于 2016-07-10T19:49:37.253 に答える
1

次のように、jquery コードとクラス css を使用してテキストを入力します。

jqueryコード:

$(document).ready(function () {
    $("select").change(function () {
        if ($('#' + $(this).attr("id") + ' option:selected').val() === '') {
            $(this).parent('div').removeClass('is-dirty');
        } else {
            $(this).parent('div').addClass('is-dirty');
        }
     });
});

html (最初のオプションは空にする必要があります):

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <select id="example" class="mdl-textfield__input">
                <option value=""></option>
                <option value="1">Option</option>
            </select>
            <label class="mdl-textfield__label is-dirty" for="example">example</label>
        </div>
于 2015-12-24T20:17:14.633 に答える
-1

Google チームがこれに取り組んでいる間、私はこの問題に対する迅速かつ簡単な解決策を作成する必要があり、javascript/jquery 関数を作成しました。

マテリアル デザイン ライト -- 選択

于 2015-08-06T23:31:44.537 に答える
-1

とにかく、 Angular Materialチームがどのように実装したかを見てください: https://material.angularjs.org/latest/#/demo/material.components.select

はい、入力+ドロップダウンのように

于 2015-07-10T07:53:34.770 に答える