Add a clipboard controller and wire up the copy button

This commit is contained in:
Râu Cao
2023-01-09 17:35:20 +08:00
parent 029e6b011d
commit d3313a202b
3 changed files with 23 additions and 5 deletions

View File

@@ -6,15 +6,17 @@
<p class="mb-1">
<%= label :user_address, 'User address', class: 'font-bold' %>
</p>
<p class="flex gap-1 mb-2 sm:block">
<p data-controller="clipboard" class="flex gap-1 mb-2 sm:block">
<input type="text" id="user_address" class="flex-1 sm:w-3/5"
value=<%= @user.address %> disabled="disabled" />
value=<%= @user.address %> disabled="disabled"
data-clipboard-target="source" />
<button id="copy-user-address" class="btn-md btn-icon btn-blue flex-none w-auto"
data-clipboard-target="trigger" data-action="clipboard#copy"
title="Copy to clipboard">
<span class="icon-initial">
<span class="content-initial">
<%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
</span>
<span class="icon-active hidden">
<span class="content-active hidden">
<%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
</span>
</button>