codecamp

工具栏

工具栏是一个水平排列的组件的集合，可以包含文本、链接、按钮、图标按钮等元素。

调用方式

工具栏组件使用纯 CSS 编写，只需编写 HTML 代码即可生效。

色彩

默认为透明背景，添加类 .mdui-color-[color] 可以设置背景色。

相关资料

Material Design 工具栏组件设计规范

Material Design 工具栏结构设计规范

样式

基础样式

在工具栏中可以放置：

文本：<span>Title</span>
链接：<a href="#">Link</a>
按钮：<a href="#" class="mdui-btn">button</a>
图标按钮：<a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">close</i></a>
图标：<i class="mdui-icon material-icons">close</i>

添加 <div class="mdui-toolbar-spacer"></div> 会将该元素两边的内容推向两侧。

www.mdui.org - 工具栏 - 示例

背景色

www.mdui.org - 工具栏 - 背景色

CSS 类名列表

类名	效果
.mdui-toolbar	定义一个工具栏。
.mdui-toolbar-spacer	该元素两边的元素会被推到两侧。

温馨提示

下载编程狮App，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }