Я прочитал список компонентов и прочитал предоставленный CSS, но я не вижу никаких упоминаний о полях выбора - только обычные входные данные; текст, радио, флажок, текстовое поле и т. д.
Как вы используете Material Design Lite с полем выбора? Использование классов для обычного ввода текста дает вам полпути, но это, конечно, неправильно.
Это сработало для меня довольно хорошо (на примере топлива):
<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 src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<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.
На данный момент то, что я сделал, было меню в 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/
Я тоже столкнулся с той же проблемой. Реализовать себя всегда здорово, но если вы хотите сэкономить время, эта библиотека отлично справилась со своей задачей. 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>
Я использую это в приложении 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>
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
<select>.
- person theUtherSide; 08.06.2016
Я использую код 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>
Я знаю, что этот пост старый. Но у меня было другое решение, которое отлично сработало для меня, и я хотел поделиться им.
Я построил на решении @John Knott использовать текстовое поле mdl с выбором в качестве решения mdl-textfield__input + @user2255242 для меню, но без участия js.
Вот скрипка, иллюстрирующая решение.
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 для опции выбора. И это казалось проще, чем это.
Это можно сделать множеством других способов. Я нашел его лучше и реализовал в одном из своих проектов. Надеюсь, поможет! :)
Вы можете воссоздать его, используя уже существующие компоненты. Использование текстового поля и меню для конкретики.
ПРИМЕЧАНИЕ. Я добавил 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, но вы можете легко изменить его, добавив 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.
В любом случае, посмотрите, как команда Angular Material реализовала это: https://material.angularjs
Да, так же, как ввод + раскрывающийся список
Пока команда Google работает над этим, мне нужно было создать быстрое и простое решение этой проблемы, и я написал функцию javascript/jquery:
Material Design Lite — выберите
