Copy
This component is used to contain very long strings that users may need to copy.
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-copyCSS imports
In your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">Usage
Pass in text content:
<ts-copy>My text to copy!</ts-copy>Display format
Three display formats are offered:
| Mode | Description |
|---|---|
standard |
The full, bordered version (default) |
minimal |
Slightly more compact with no border (useful in tables) |
icon |
Icon only, all text hidden (quick copy must be enabled) |
Initial selection
By default, when a user focuses on this component, the text is automatically selected. This provides an easy fallback in the instance where the user's browser does not support clipboard functionality.
It should be extremely rare, but if needed, this functionality can be disabled.
<ts-copy [disableInitialSelection]="true">My text to copy!</ts-copy>Quick copy
By default, a button will appear on hover that copies the content to the user's clipboard. This functionality can be disabled:
<ts-copy [enableQuickCopy]="false">My text to copy!</ts-copy>Events
On successful copy an event with the copied text is emitted:
<ts-copy (copied)="didCopy($event)">My text to copy!</ts-copy>