一套Material Design风格的UI组件样式

当前位置:主页 > CSS3库 > UI界面设计 > 一套Material Design风格的UI组件样式
一套Material Design风格的UI组件样式
分享:

    插件介绍

    MaterialCSS是一套Material Design风格的UI组件样式。这套UI组件包括亮和暗2种主题。每种主题都包括了各种状态的按钮,复选框,单选按钮,文本框,textarea。这些组件使用简单,效果非常的时尚。

    浏览器兼容性

    浏览器兼容性
    时间:08-21
    阅读:
简要教程

MaterialCSS是一套Material Design风格的UI组件样式。这套UI组件包括亮和暗2种主题。每种主题都包括了各种状态的按钮,复选框,单选按钮,文本框,textarea。这些组件使用简单,效果非常的时尚。

使用方法

如果你使用SASS,可以将material.scss引入到主SASS文件中。

@import 'material';               
              

颜色主题方案可以在_colors.scss文件中设置。

或者直接在页面中引入material.css文件。

<link href="css/material.css" rel="stylesheet">                
              
HTML结构

在你想要使用这些效果的元素上添加class。例如复选框和按钮的HTML结构如下:

>input class="material light" type="checkbox"<
>input disabled class="material light raised" value="ok" type="button"<                
              

对于开关按钮需要一些额外的标签:

<div class="material light switch">
  <input id="toggle-1" type="checkbox">
  <label for="toggle-1"></label>
</div>