ecz

ember-cli-zero-clipboard

Ember CLI addon for adding a "copy to clipboard" button component

Showing:

Popularity

Downloads/wk

27

GitHub Stars

17

Maintenance

Last Commit

6yrs ago

Contributors

11

Package

Dependencies

1

Size (min+gzip)

0.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Ember Zero Clipboard

This is an Ember CLI addon for adding a Zero Clipboard component.

Installation

$ npm install --save-dev ember-cli-zero-clipboard

Usage

In your handlebars template just do:

{{zero-clipboard text=TEXT label=LABEL}}

or

{{zero-clipboard cbTarget=TARGET_ELEMENT_ID label=LABEL}}
  • TEXT: String, to be copied when button is clicked.
  • TARGET_ELEMENT_ID: String, value or html contents to be copied.
  • LABEL: String, the value of the button.

Example

{{zero-clipboard text=repoPath label="Copy" innerClass="btn btn-default"}}

will output:

<div title="Copy to clipboard" data-clipboard-text="https://github.com/aomra015/ember-cli-zero-clipboard">
  <button class="btn btn-default">Copy</button>
</div>

Extending

You can subclass this module if you want to add specific behaviours:

// file: your-app/components/zero-clipboard.js

import ZeroClipboard from 'ember-cli-zero-clipboard/components/zero-clipboard';

export default ZeroClipboard.extend({
  actions: {
    afterCopy: function(){
      // this gets triggered after the copy event
      // see https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/api/ZeroClipboard.md#static-events for full list of events
      alert("after copy");
    }
  }
});

You can also pass a closure action, without subclassing the component.

{{zero-clipboard afterCopy=(action "alertAfterCopy")}}

Pass a block if you want to customize the html:

{{#zero-clipboard text='Hello'}}
  <p>COPY ME!</p>
{{/zero-clipboard}}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100