-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathparams.json
More file actions
1 lines (1 loc) · 1.89 KB
/
Copy pathparams.json
File metadata and controls
1 lines (1 loc) · 1.89 KB
1
{"name":"Inkdrops","tagline":"The Ink-Drop style interaction that is added in the material design by Google using jQuery and CSS.","body":"InkDrops\r\n========\r\nThe Ink-Drop style interaction that is added in the material design by Google using jQuery and CSS.\r\n\r\nThe new Design concept MaterialJs launched with the new Google Android 5.0 had a beautiful Ink Drop fading animation for every click. And the same was implemented in the Polymer project as well. So this is just a small breakdown for the same using jQuery and CSS.\r\n###[Demo Here](http://akhilarjun.github.io/InkDrops/demo.html)\r\n##How To :\r\nFirst include the _inkdrop.css_ ,_ink.js file_ and _jQuery_ to your page\r\n```html\r\n<link rel='stylesheet' type='text/css' href='css/inkdrops.css'></link>\r\n<script type=\"text/javascript\" src='js/ink.js'></script>\r\n<script type=\"text/javascript\" src='js/jquery.min.js'></script>\r\n```\r\nThen all you have to do is add a class '_inkMe_' to the containing element that needs the ink drop effect. And Voila! when you click the element you could see the ink drop dripping<br>\r\n```html\r\n<a class='inkMe'>Regular Link</a>\r\n```\r\n##Customize \r\nYou can also change the color of the ink ripple by assigning the *ink-color* attribute any custom class that has the backround-color set. This also works with bootstrap classes like primary, danger, etc.\r\n```html\r\n<button class='inkMe' ink-color='bgBlue'>Blue Ripple on Button</button>\r\n```\r\nWhere *bgBlue* is\r\n```css\r\n.bgBlue{\r\n background: #39c;\r\n}\r\n```\r\n\r\nAlso you can add multiple ink-drops overlapping one another by using the *multiple-ink* attribute\r\n```html\r\n<button class='inkMe' ink-color='bgYellow' multiple-ink=true>Button with Multiple Ripples</button>\r\n```\r\n\r\n*Does not work with IE8 and below versions :smirk:*\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}