web-dev-qa-db-fra.com

Comment formater une boîte de sélection avec Material Design Lite?

J'ai parcouru la liste des composants et lu le CSS fourni, mais je ne vois aucune mention de cases de sélection - juste des entrées régulières; texte, radio, case à cocher, zone de texte, etc. 

Comment utilisez-vous Material Design Lite avec une liste de sélection? 

material-design-lite
25
Chase

Cela a plutôt bien fonctionné pour moi (en prenant le carburant, par exemple):

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

Aucune bibliothèque ou quoi que ce soit n’a besoin que des scripts MDL CSS et JavaScript standard.

28
John Knotts

Pour l'instant, ce que j'ai fait était un menu en JavaScript. De toute façon, j’avais besoin de faire cela en JavaScript pour mes besoins, donc ce n’était pas un problème d’utiliser simplement un menu au lieu d’un menu déroulant. J'espère que vous le trouverez utile!

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

lien jsFiddle: https://jsfiddle.net/zatxzx6b/3/embedded/result/

13
Jack Davidson

J'ai rencontré le même problème aussi. Il est toujours bon de vous mettre en œuvre, mais si vous voulez gagner du temps, cette bibliothèque a fait un très bon travail. https://github.com/MEYVN-digital/mdl-selectfield . Ajoutez simplement ceci avec le fichier JS dans le <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

4
novasaint

J'utilise celui-ci dans une application Angular2. C'était facile à installer/installer/utiliser:

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

npm install mdl-selectfield

Ensuite, incluez les CSS et JS:

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

Ajoutez ensuite des classes à votre code HTML. Voici un exemple:

<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 a été conçu par Google. Il s’agit de la meilleure option pour les divers composants qui manquent dans Material Design Lite. Vous pouvez trouver des détails sur la manière d'obtenir des éléments polymères ici https://elements.polymer-project.org/guides/using-elements

Vous trouverez plus précisément un composant Web déroulant sélectionné ici - https://elements.polymer-project.org/elements/paper-dropdown-menu?view=demo:demo/index.html

2
ChicagoSky

Je sais que ce post est vieux. Mais j'avais une solution différente qui fonctionnait très bien pour moi et que je voulais partager.

Je me suis inspiré de la solution de @John Knott pour utiliser mdl textfield avec la solution select de mdl-textfield__input + @ user2255242 mais sans le js impliqué.

Voici un violon illustrant la solution.

JS fiddle for MDL select box

HTML - J'ai utilisé un champ de texte + un menu (ul + li) pour agir en tant que sélection, le css fait le reste.

<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 - la partie principale est le 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 - l'exemple est dans Vue JS, mais peut être répliqué facilement dans n'importe quel autre framework, car l'essentiel est effectué par 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;
    }
  }
})

Pourquoi je l'ai fait de cette façon?

Menu semblait visuellement meilleur que la zone de sélection du navigateur par défaut. Mais, je ne voulais pas faire de la magie css sur l'option de sélection. Et cela semblait plus facile que cela.

Cela peut être fait de nombreuses autres manières. Je l'ai trouvé mieux et mis en œuvre dans l'un de mes projets. J'espère que ça aide! :)

0
Jeevan MB

J'utilise un code jquery et une classe css pour saisir du texte, comme ceci:

jquery code:

$(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');
        }
     });
});

en html (la première option doit être vide): 

<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>
0
Pedro Dias