web-dev-qa-db-ja.com

Material Design Liteで選択ボックスをフォーマットする方法は？

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

選択ボックスでMaterial Design Liteをどのように使用しますか？通常のテキスト入力にクラスを使用すると、途中まで到達しますが、間違いではありません。

material-design-lite
27
Chase

これは私にとって非常にうまくいきました（例として燃料を使用）：

  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <select class="mdl-textfield__input" id="octane" name="octane">
      <option></option>
      <option value="85">85</option>
      <option value="87">87</option>
      <option value="89">89</option>
      <option value="91">91</option>
      <option value="diesel">Diesel</option>
    </select>
    <label class="mdl-textfield__label" for="octane">Octane</label>
  </div>

ライブラリや標準MDL CSSとJavaScriptだけは必要ありません。

32
John Knotts

今のところ、私がしたことは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/

13
Jack Davidson

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

<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

5
novasaint

私はこれをAngular2アプリで使用しています。セットアップ/インストール/使用は簡単でした：

https://github.com/mebibou/mdl-selectfield

npm install mdl-selectfield

次に、CSSとJSを含めます。

<link rel="stylesheet" href="./node_modules/mdl-selectfield/dist/mdl-selectfield.min.css">

次に、クラスをHTMLに追加します。以下に例を示します。

<div class="mdl-selectfield mdl-js-selectfield">
  <select id="gender" class="mdl-selectfield__select">
    <option value=""></option>
    <option value="option1">option 1</option>
    <option value="option2">option 2</option>
  </select>
  <label class="mdl-selectfield__label" for="gender">User gender</label>
  <span class="mdl-selectfield__error">Select a value</span>
</div>
2
theUtherSide

Project PolymerはGoogleによるもので、Material Design liteにないさまざまなコンポーネントに最適なオプションです。ここでpolymer要素を取得する方法の詳細を見つけることができます https://elements.polymer-project.org/guides/using-elements

具体的には、選択ドロップダウンWebコンポーネントをここで見つけることができます- https://elements.polymer-project.org/elements/paper-dropdown-menu?view=demo:demo/index.html

2
ChicagoSky

次のように、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>
1
Pedro Dias

私はこの投稿が古いことを知っています。しかし、私にとってはうまく機能し、共有したい別のソリューションがありました。

@John Knottのソリューションを基に、mdl-textfield__inputとしてselectを使用したmdlテキストフィールド+メニューの@ user2255242のソリューションを使用しましたが、jsは含まれません。

これが解決策を示すフィドルです。

MDLのJSFフィドル選択ボックス

HTML-テキストフィールド+メニュー（ul + li）を使用して選択として機能し、cssが残りを行います。

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


<div id="app">

  <div class="sorter-holder">

    <!-- the textfield, notice the readonly on input -->
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input" type="text" v-model="sortBy" id="sorterHolder" readonly>
      <label class="mdl-textfield__label" for="sorterHolder">Sort by</label>
    </div>

    <!-- menu which will act as the options of select. The menu is for the input, and not the div which has mdl-textfield class -->
    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect sorter-menu" for="sorterHolder">
      <li class="mdl-menu__item" v-for="srtr in sortables" @click="update(srtr)">{{ srtr }}</li>
    </ul>

  </div>

</div>

CSS-主な部分はcssです

/* 
The menu is positioned absolute, and it's positions are calculated dynamically (I think). I wanted it to extend for the entire width of input, and for that needed a relative parent.
Also, the display inline-block was not required in where I actually implemented it. Over there, it was block. So, this might need to change according to layout. */
.sorter-holder {
  position: relative;
  display: inline-block;
}

/* just giving them a width of 100% to extend for the entire textfield */
.sorter-holder .mdl-menu__outline,
 .sorter-holder .mdl-menu__container, 
 .sorter-menu {
   width: 100% !important;
}

VueJS-例はVue JSですが、主なことはHTML + CSSによって実行されるため、他のフレームワークで簡単に複製できます

new Vue({
  el: "#app",
  data: {
    sortables: [
      'Name (A-Z)',
      'Name (Z-A)',
      'Newest First',
      'Oldest First'
    ],
    sortBy: null
  },
  methods: {
    update: function (sortBy) {
      this.sortBy = sortBy;
    }
  }
})

なぜこのようにしたのですか？

メニューは、デフォルトのブラウザの選択ボックスより視覚的に見栄えがよかった。しかし、selectのオプションでCSSマジックを実行したくありませんでした。そして、これはそれよりも簡単に思えた。

これは、他の多くの方法で実行できます。私はそれをより良く見つけて、私のプロジェクトの1つに実装しました。それが役に立てば幸い！ :)

0
Jeevan MB