Material Cards
Simple user card based on Google Material Color palette and jQuery.
Less files
material-cards.less
gm-variables.less
mixin.less
material-color.less
material-cards.lessis the main.lessfile that includes the other .less files.gm-variables.lesscontains all the color palette with the color accent.mixin.lesscontains some utilities.material-color.lesscontains the material color variant based ongm-variables.less
Installation
You can download full package and check the demo folder for implementation example or you can use bower:
bower install material-cards
Demo files require Font Awesome
Usage
Material Cards must be used in conjunction with jQuery.
You can choose to use it as a jQuery plugin or not. Demos for both usages are available in the demos folder. Using it as a jQuery plugin easies the management of options, methods and events for full customization.
Inside the js/ folder you can find the two files: jquery.material-cards.js and jquery.material-cards.min.js
Init jQuery Material Card
$('.material-card').materialCard(options);
Options
options = {
icon_close : 'fa-arrow-left', //string
icon_open : 'fa-bars', //string
icon_spin : 'fa-spin-fast', //string
card_activator : 'click' //string: click or hover
});
The icons are from Font Awesome, fa-spin-fast is similar to fa-spin but spin faster.
The default card_activator is the click event on button card, but you can also use hover (this option remove the button).
Methods
toggle: change selected material card state
$('.material-card').materialCard('toggle');
open: open selected material card
$('.material-card:eq(1)').materialCard('open');
close: close selected material card
$('.material-card:eq(2)').materialCard('close');
isOpen: check material card status, return true or false
if($('.material-card:eq(3)').materialCard('isOpen') === true) {
// do something
}
Events
show.material-card: triggered immediately when the open instance method is calledshown.material-card: triggered when the card becomes visible to the user (will wait the end of the CSS transitions)hide.material-card: triggered immediately when the close instance method is calledhidden.material-card: triggered when the card has become hidden to the user (will wait for end of CSS transitions)
Examples
$('.material-card').on('shown.material-card', function (event) {
console.log(event.type, event.namespace, $(this));
//that return
//shown material-card [article.material-card...]
});
var fullCardEvent = 'shown.material-card show.material-card hide.material-cards hidden.material-cards';
$('.material-cards').on(fullCardEvent, function (event) {
// do something
});
Material cards and Masonry grid library
check demo/material-cards_jquery-plugin_masonry.html material cards without a fixed height (use this less file less/material-cards-auto-height.less) and awesome javascript Masonry grid library.
-
<!DOCTYPE html> <html lang="en"> <head> <!-- META元素通常用于指定网页的描述，也就是元数据 --> <!-- 字符集声明，告诉文档使用哪种字符编码 --> <meta charset="UTF-8" /> <!-- name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name
-
简介:Material Design中有一种很个性的设计概念：卡片式设计（Cards）,Cards拥有自己独特的UI特征，在v7包中引进了一种全新的控件CardView，用来实现这种 Cards UI 的设计.CardView继承自FrameLayout，它是一个带圆角背景和阴影的FrameLayout. 添加依赖 compile 'com.android.support:cardview-v7:
-
转载请注明出处：http://blog.csdn.net/bbld_/article/details/40400031 翻译自：http://developer.android.com/training/material/index.html 前言 这篇文章是官方material design文档翻译的第一篇，关于material design需要了解的知识可以参阅这本中文版的译文电子书。
-
一些materialdesign中的功能像material主题和自定义activity的过渡只能在Android 5.0(API级别21)或以上的系统版本中才能使用。但是你可以设计你的app去使用那些功能，无论在支持materialdesign的设备上亦或是早期的Android版本上。 定义可选的样式 你可以配置你的app去使用material design在支持它的设
-
海拔和阴影 在material design 世界中的物体拥有着在真实物理世界中一样的特性。在真实的物理世界中，物体可以被折叠或者沾粘上另外一个物体，但是不能通过穿越其他的物体。物体可以出现阴影和反射弧线。 Objects in material design possess similar qualities to objects in the physical world. In the ph
-
转载请注明出处：http://blog.csdn.net/bbld_/article/details/40400343 翻译自：http://developer.android.com/training/material/get-started.html 要创建materialdesign的app，我们依照例如以下的几个步骤： 1. 回想material design的规范。 2.
-
转载请注明出处：http://blog.csdn.net/bbld_/article/details/40634829 翻译自： http://developer.android.com/training/material/compatibility.html 一些materialdesign中的功能像material主题和自定义activity的过渡只能在Android 5.0(API级别21)
-
Material Design 学习资料收集 - Android - 掘金 本人目前正在找工作，想了解我的详细情况请移步到我的 网页版简历 ，希望能得到各位的推荐，谢谢！ 关于 Material Design 在这里我就不... 安卓 5.0 6.0 新特性简单总结 - Android - 掘金 Android 5.0新特性 1. 了解Material Design ... Android Mat
-
Material Design for AngularJS Apps Material Design is a specification for aunified system of visual, motion, and interaction design that adapts across different devices. Ourgoal is to deliver a lean,
-
材料拥有确定不变的特性和固定的行为。了解这些特性将有助于你在一定程度上熟悉材料，这与 Material Design 的构想是一致的。 物理特性 材料具有变化的长宽尺寸（以 dp 为计）和均匀的厚度（1dp）。 (上图)可取 材料的高度和宽度是可变的。 (上图)不可取 材料总是 1dp 厚。 材料会形成阴影。 阴影是由于材料元件之间的相对高度（Z 轴位置）而自然产生的。 (上图)可取 阴影描述材料
-
Material ScrollTop 是轻量级的回到页面顶部按钮，特点： 轻量级 Material Design inspired 涟漪效应 平滑的动态效果 定制化 一些实用的选项 CSS3 (Sass) + jQuery
-
Vue Material 是一个实现 Google 的像素材料设计的 Vue 组件库，它提供了适合所有现代Web浏览器的内置动态主题的组件，它的 API 也简单明了。 安装和使用： 通过 npm or yarn 安装 npm install vue-material@beta --saveyarn add vue-material@beta 像 JSPM and Bower 暂时还不支持 在代码中
-
Material-Animations 是一个很好过渡动画库, 可以应用于 Activity 与 Activity 之间的跳转, Fragment 与 Fragment 之间的跳转, 以及各个 View 变化前后的过渡动画。 效果图：
-
这是一款非常易用于采用了 Bootstrap 3 技术的应用的Google Material Design的Bootstrap主题。要使用这个主题，只需向项目中添加Bootstrap CSS 和 Javascript 即可运作。
-
简介 materail-admin 是一个通用的基础的后台管理系统，它基于Spring Boot2 和 Bootstrap 实现。它使用了当下流行的java 框架Spring Boot和基于Materail Design风格的组件构建。内置了权限管理，配置管理，组织机构，用户，定时任务，消息管理等后台常用的基础功能。提炼了典型的业务模型，可以帮助你快速搭建企业级中后台产品系统。 在线预览 准备 你