Copy Button

Copy content is a very common feature to help user copy content easier. <msc-copy-button /> provides the whole feature including UI & interaction. With <msc-copy-button />, developers could adopt copy feature to web page easier.

Check the following examples and input something to see what can <msc-copy-button /> do ?

Basic Usage

<msc-copy-button /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-copy-button />'s html structure and everything will be all set.

Required Script

<script type="module" src="https://your-domain/wc-msc-copy-button.js"> </script>

Structure

Put <msc-copy-button /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-copy-button> <script type="application/json"> { "copycontent": "Show me the money." } </script> </msc-copy-button>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-copy-button />.

<msc-copy-button remoteconfig="https://your-domain/api-path" > </msc-copy-button>

JavaScript Instantiation

<msc-copy-button /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { MscCopyButton } from 'https://your-domain/wc-msc-copy-button.js'; // use DOM api const nodeA = document.createElement('msc-copy-button'); document.body.appendChild(nodeA); nodeA.copycontent = 'Show me the money'; // new instance with Class const nodeB = new MscCopyButton(); document.body.appendChild(nodeB); nodeB.copycontent = 'Show me the money'; // new instance with Class & default config const config = { copycontent: 'Show me the money'; }; const nodeC = new MscCopyButton(config); document.body.appendChild(nodeC); </script>

Style Customization

Developers could apply styles to decorate <msc-copy-button />'s looking.

<style> msc-copy-button { --msc-copy-button-size: 40px; --msc-copy-button-icon-copy-content-color: rgba(110 119 128); --msc-copy-button-icon-done-color: rgba(0 135 81); --msc-copy-button-icon-scale: 1; --msc-copy-button-button-background-color: rgba(0 0 0/.04); --msc-copy-button-button-overlay-color: rgba(29 34 40/.2); --msc-copy-button-button-active-scale: .85; } </style>

Attributes

<msc-copy-button /> supports some attributes to let it become more convenience & useful.

copycontent

Set content for copy. Default is ""（empty string）. <msc-copy-button /> will throw error when empty content.

<msc-copy-button copycontent="Show me the money" > ... </msc-copy-button>

Property

Property Name Type Description
copycontent String Getter / Setter content for copy. Default is "" (empty string).

Events

Event Signature Description
msc-copy-button-success Fired when copy success. Developers can gather information through event.detail.content.
msc-copy-button-fail Fired when copy fail. Developers can gather information through event.detail.message.

Reference