Как отформатировать поле выбора с помощью Material Design Lite?

Question

Как отформатировать поле выбора с помощью Material Design Lite?

Я прочитал список Компонентов и прочитал предоставленный CSS, но я не вижу упоминаний о полях выбора - только обычные входные данные; текст, радио, флажок, текстовое поле и т. д.

Как вы используете Material Design Lite с полем выбора? Использование классов для обычного ввода текста приведет вас на полпути, но это, конечно, не правильно.

32

material-design-lite

Источник

user5096653 09 июл '15 в 03:46

9 ответов

Другие вопросы по тегам material-design-lite

user6843807 14 апр '17 в 01:53 2017-04-14 01:53 · Answer 1 · 2017-04-14 01:53

Это сработало очень хорошо для меня (на примере топлива):

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

user2255242 29 июл '15 в 19:13 2015-07-29 19:13 · Answer 2 · 2015-07-29 19: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/

user919256 10 июл '16 в 19:49 2016-07-10 19:49 · Answer 3 · 2016-07-10 19:49

Я столкнулся с той же проблемой. Реализация себя всегда хороша, но если вы хотите сэкономить время, эта библиотека отлично поработала. 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

user1341825 08 июн '16 в 00:13 2016-06-08 00:13 · Answer 4 · 2016-06-08 00:13

Я использую это в приложении 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>

user776543 29 сен '15 в 00:42 2015-09-29 00:42 · Answer 5 · 2015-09-29 00:42

Project Polymer от Google и является лучшим вариантом для различных компонентов, которые отсутствуют в Material Design Lite. Вы можете найти подробную информацию о том, как получить полимерные элементы здесь https://elements.polymer-project.org/guides/using-elements

В частности, вы можете найти здесь выпадающий веб-компонент - https://elements.polymer-project.org/elements/paper-dropdown-menu?view=demo:demo/index.html

user4480253 24 дек '15 в 20:17 2015-12-24 20:17 · Answer 6 · 2015-12-24 20:17

Я использую код 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>

user4614305 15 авг '20 в 21:49 2020-08-15 21:49 · Answer 7 · 2020-08-15 21:49

Вы можете воссоздать его, используя уже существующие компоненты. Использование текстового поля и меню, чтобы быть конкретным.

ПРИМЕР: https://repl.it/@bryku/AngelicUnsightlyUsername

ПРИМЕЧАНИЕ. Я добавил mdl-select в mdl-textfield и mdl-select-option в mdl-menu__item.

<div class="mdl-textfield mdl-select mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="text" id="formState" name="pageCollection" value="">
  <label class="mdl-textfield__label" for="formState">State...</label>
  <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="formState">
      <li class="mdl-menu__item mdl-select-option">CA</li>
      <li class="mdl-menu__item mdl-select-option">WA</li>
      <li class="mdl-menu__item mdl-select-option">IA</li>
  </ul>

Однако вам все равно нужно добавить javascript.

var mdlAddon = {
    _select: function(){
        var e = document.querySelectorAll('.mdl-select-option');
        for(var i = 0; i < e.length; i++){
            e[i].addEventListener('click', function(event){
                var value = event.target.innerText;
                var id = event.target.parentElement.getAttribute('for');
                var target = document.getElementById(id);
                    target.value = value;
                    target.parentElement.classList.add('is-dirty');
            });
        }
    },
}
mdlAddon._select();

Это добавляет прослушиватель событий ко всем параметрам mdl-select-option, но вы можете легко изменить его, добавив onclick="", если хотите.

Я также предлагаю сделать так, чтобы пользователь не мог физически вводить текст в текстовое поле.

var mdlAddon = {
    _select: function(){
        var e = document.querySelectorAll('.mdl-select-option');
        for(var i = 0; i < e.length; i++){
            e[i].addEventListener('click', function(event){
                var value = event.target.innerText;
                var id = event.target.parentElement.getAttribute('for');
                var target = document.getElementById(id);
                    target.value = value;
                    target.parentElement.classList.add('is-dirty');
            });
        }
        var e = document.querySelectorAll('.mdl-select');
        for(var i = 0; i < e.length; i++){
            e[i].addEventListener('keydown', function(event){
                event.preventDefault();
            });
        }
    },
}
mdlAddon._select();

Только не забудьте запустить его после загрузки элементов. Это довольно просто, но, по крайней мере, не требует дополнительных CSS при использовании MDL.

user4776897 18 авг '18 в 10:32 2018-08-18 10:32 · Answer 8 · 2018-08-18 10:32

Я знаю, что этот пост старый. Но у меня было другое решение, которое отлично сработало для меня, и я хотел поделиться им.

Я построил на решении @John Knott использование текстового поля mdl с выбором в качестве решения mdl-textfield__input + @user2255242 для меню, но без использования js.

Вот скрипка, иллюстрирующая решение.

JS Fiddle for MDL, выбрать поле

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;
    }
  }
})

Почему я так сделал?

Меню выглядело визуально лучше, чем окно выбора браузера по умолчанию. Но я не хотел делать магию css с опцией выбора. И это казалось проще, чем это.

Это может быть сделано многими другими способами. Я нашел это лучше и реализовал в одном из моих проектов. Надеюсь, поможет!:)

user4410553 06 авг '15 в 23:31 2015-08-06 23:31 · Answer 9 · 2015-08-06 23:31

Пока команда Google работает над этим, мне нужно было быстро и легко решить эту проблему, и я написал функцию javascript/jquery:

Материал Дизайн Лайт - Выбрать

-1

Источник

user4410553 06 авг '15 в 23:31

user930170 10 июл '15 в 07:53 2015-07-10 07:53 · Answer 10 · 2015-07-10 07:53

В любом случае, посмотрите, как команда Angular Material реализовала это: https://material.angularjs.org/latest/

Да, просто как вход + выпадающий

-1

Источник

user930170 10 июл '15 в 07:53