View Source Turboprop.Hooks.Clipboard (Turboprop v0.4.2)
Element allowing users to add a value to their clipboard.
Elements
Required elements
- Root: Wrapper element.
- Required attributes:
data-part="root"
- Required attributes:
- Control: Wrapper that holds the input and the trigger.
- Needs to be a child of the Root.
- Required attributes:
data-part="control"
- Input: Input field containing the value.
- Needs to be a child of the Control.
- Any
value
attribute set directly on the input will be overwritten when the hook is initialised. - Required attributes:
data-part="input"
- Trigger: Trigger that copies the value to the user's clipboard.
- Needs to be a child of the Control.
- Required attributes:
data-part="trigger"
Optional elements
- Label: A label for the element.
- Needs to be a child of the Root.
- Required attributes:
data-part="label"
Options
Options are set on the outer wrapper element through data attributes.
For boolean attributes, adding the attribute with either an empty value or "true"
is considered truthy, every other value falsy.
data-value
: Value to be copied. Will also set the value of the Input.data-timeout
: Time in milliseconds after which the state machine will be reset. Has to be an integer.
Events
From the client
If set, the client will push the following events to the server:
data-on-status-change
: Emitted when the trigger is activated.- Sends an event with the type
%{copied: boolean()}
.
- Sends an event with the type
Example
<div id="clipboard" phx-hook="Clipboard" data-value="https://github.com/leuchtturm-dev/turboprop">
<label data-part="label">URL</label>
<div data-part="root">
<div data-part="control">
<input data-part="input" />
<button data-part="trigger">Copy</button>
</div>
</div>
</div>