Badges 消息指示控件
-
Collections
-
Badges in Dropdown
Dropdownarrow_drop_down
-
Badges in Navbar
-
Badges in Collapsibles
-
filter_drama
First
4
Lorem ipsum dolor sit amet.
-
place
Second
1
Lorem ipsum dolor sit amet.
- 选项
4
4
-
颜色
4
4
Buttons
Material Design 中提供了 3 种主要按钮。Raised 按钮是一个标准按钮，意味着行动，并有一定深度。Floating 圆形按钮用于非常重要的功能。Flat 按钮通常用在cards 或 modals中。
-
Raised
button
cloudbutton
cloudbutton
-
Floating
add
- Fixed Action Button
如果你想要一个固定的 floating action 按钮，你可以添加多个悬停后可以进行的操作。 演示在页面的右下角。
You can also open and close the Fixed Action Button Menu programatically.
$('.fixed-action-btn').openFAB();
$('.fixed-action-btn').closeFAB();
$('.fixed-action-btn.toolbar').openToolbar();
$('.fixed-action-btn.toolbar').closeToolbar();
- Horizontal FAB
horizontal
- Click-only FAB
click-to-toggle
- FAB to Toolbar
toolbar
-
Flat
Button
-
Submit 按钮
当你需要在表单中使用提交按钮时，请使用 submit 类型的按钮，而不是使用 input 标记。
- 大
此按钮有更大的高度，可以用于引人注意。
Button
cloudbutton
cloudbutton
- 禁用
此样式可应用于所有按钮类型。
Button
Button
Button
add
Breadcrumbs 层级标签
Cards 卡片
Card Title
I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.
这是具有图像缩略图的标准卡。
Card Title
I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
Horizontal Card
I am a very simple card. I am good at containing small bits of information.
Horizontal Card
I am a very simple card. I am good at containing small bits of information.
I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
Chips 圆形椭圆标签
Jane Doe
Tag
close
Collections 集合
- Alvin
- Alvin
- Alvin
- Alvin
First Names
- Alvin
- Alvin
- Alvin
- Alvin
Footer
//置底页脚
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
Forms
- Input fields(输入框)
- Prefilling Text Inputs(预留输入框文字)
$(document).ready(function() {
Materialize.updateTextFields();
});
- Icon Prefixes(输入框前家图标)
- Custom Error or Success Messages(验证数据给出提示)
- 改变颜色
/* label color */
.input-field label {
color: #000;
}
/* label focus color */
.input-field input[type=text]:focus + label {
color: #000;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* valid color */
.input-field input[type=text].valid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* invalid color */
.input-field input[type=text].invalid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* icon prefix focus color */
.input-field .prefix.active {
color: #000;
}
- Textarea(文本域)
//高级说明：
//当动态更改一个textarea的值时，使用像jquery的方法。val()，您必须触发一个触发器，因为它。val()不会自动触发我们绑定到在的事件。
$('#textarea1').val('New Text');
$('#textarea1').trigger('autoresize');
Icon Prefixes(文本域前面添加图标)
- select(下拉选择框)
Disabled Styles（下拉选择框不可选择）
Initialization(下拉选择框初始化)
$(document).ready(function() {
$('select').material_select();
});
Updating/Destroying Select(下拉选择框更改或销毁)
$('select').material_select('destroy');
- Radio Buttons(单选框)
- Checkboxes(复选框)
- Switches(开关)
- File Input(文件选择器)
multiple属性可选择多个文件
- Range(范围选择器)
//.js
var slider = document.getElementById('test-slider');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
step: 1,
orientation: 'horizontal', // 'horizontal' or 'vertical'
range: {
'min': 0,
'max': 100
},
format: wNumb({
decimals: 0
})
});
html5 Range
- Date Picker（日期选择器）
//初始化
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year,
today: 'Today',
clear: 'Clear',
close: 'Ok',
closeOnSelect: false // Close upon selecting a date,
});
- Time Picker（时间选择器）
//初始化
$('.timepicker').pickatime({
default: 'now', // Set default time: 'now', '1:30AM', '16:30'
fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
twelvehour: false, // Use AM/PM or 24-hour format
donetext: 'OK', // text for done-button
cleartext: 'Clear', // text for clear-button
canceltext: 'Cancel', // Text for cancel-button
autoclose: false, // automatic close timepicker
ampmclickable: true, // make AM PM clickable
aftershow: function(){} //Function for after opening timepicker
});
- Character Counter（输入字数的控制）
//初始
$(document).ready(function() {
$('input#input_text, textarea#textarea1').characterCounter();
});
- Autocomplete（自动补全）
textsms
//初始
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
onAutocomplete: function(val) {
// Callback function when value is autcompleted.
},
minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
});
NavBar （导航栏）
1.Right Aligned Links
2.Left Aligned Links
3.Centering the logo
4.Active Items
5.Extended Navbar with Tabs
Test 1
Test 2
Test 3
Test 4
6.Fixed Navbar(固定)
7.Navbar Dropdown Menu（导航下拉按钮）
//.js
$(".dropdown-button").dropdown();
8.Icon Links
9.Buttons
10.Halfway FAB in Extended Navbar
11.Search Bar
12.Mobile Collapse Button
//.js
$( document ).ready(function(){
$(".button-collapse").sideNav();
})
Pagination(分页)
Preloader(加载控件)
1.linear线性的
2.Circular(圆形的)