Components Actions

Clipboard

Clipboard copy for lit-material: copyText() with a fallback for non-secure pages, a copy button, and a read-only value with copy (and optional masking).

  • 4.6 KB gzipped
  • @lit-material/clipboard 0.2.0
  • Renders on the server

Example

Install

npm install @lit-material/clipboard @lit-material/tokens
import "@lit-material/clipboard";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

<lit-material-clipboard-copy>

A single-line value with a copy button: URLs, ids, commands, tokens. The value sits in a read-only, selectable field in a monospace face. masked hides it behind dots with a show/hide toggle, for secrets.

Properties

PropertyAttributeTypeDefaultDescription
valuevaluestring""The text shown and copied.
labellabelstring""Accessible name for the value, e.g. "API URL".
maskedmaskedbooleanfalseHide the value behind dots, with a show/hide toggle. Copying still copies the value.

Events

EventDescription
copyAfter a copy attempt; detail is { text, ok }.

CSS parts

PartDescription
fieldThe read-only input.

CSS custom properties

PropertyDescription
--lit-material-clipboard-copy-fontThe value's font family (default monospace).

<lit-material-copy-button>

An icon button that copies text: value, or the value / text of the element whose id is in for. Shows a check mark for two seconds and announces "Copied" (or "Couldn't copy") to screen readers.

Properties

PropertyAttributeTypeDefaultDescription
valuevaluestring""The text to copy. Takes precedence over for.
htmlForforstring""Id of an element (same document or shadow root) to copy from: its value if it has one, else its text.
labellabelstring"Copy"Accessible name, e.g. "Copy URL".
disableddisabledbooleanfalse

Events

EventDescription
copyAfter a copy attempt; detail is { text, ok }.

Source on GitHub npm