diff --git a/demo.css b/demo.css index 15ce830..d6ce0f8 100644 --- a/demo.css +++ b/demo.css @@ -40,14 +40,17 @@ body { ========================================================================== */ .wrap { - margin: 0 auto 30px; + margin: 0 auto 60px; width: 500px; } +h1 { + margin-top: 80px; +} + h3 { color: #333; - margin-top: 30px; - text-align: center; + margin-top: 40px; font-size: 18px; } @@ -128,6 +131,23 @@ pre code { padding: 20px 5px 0; } +/* Support + ========================================================================== */ + +.support { + list-style: none; +} + +.support li { + display: inline-block; + text-align: center; + margin: 10px 10px 0; +} + +.support p { + margin: 0; +} + /* ========================================================================== Footer ========================================================================== */ diff --git a/index.html b/index.html index b919fc6..d73ae7c 100644 --- a/index.html +++ b/index.html @@ -18,11 +18,31 @@
+

Install

+ +

You can get it on npm.

+ + 
npm install clipboard --save
+ +

Or bower, too.

+ + 
bower install clipboard --save
+ +

If you're not into package management, just download a ZIP file.

+ +

Setup

+ +

First, include the script located on the dist folder

+ + 
<script src="dist/clipboard.min.js"></script>
+ +

Now, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element, i.e. <button>.

+ + 
<script> new Clipboard('.btn'); </script>
+

Usage

-

First, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element, i.e. <button>.

- - 
new Clipboard('.btn');
+

There are different options for you to use and they all take advantage of HTML5 data attributes.

Copy text from attribute

@@ -82,6 +102,32 @@ </button>

As you may expect, the cut action only works on <input> or <textarea> elements.

+ +

Browser Support

+ +

This library relies on both Selection and execCommand APIs. When combined, they're supported in the following browsers.

+ +