Phlex Components
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
  <div data-controller="clipboard" data-clipboard-success-value="Copiado!" data-clipboard-error-value="Falha ao copiar!" class="relative">
    <div>
      <div data-clipboard-target="source" class="hidden"><span>Nascer herdeiro!!!</span></div>
      <div data-clipboard-target="trigger" data-action="click->clipboard#copy"><a href="#" type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline px-4 py-2 h-9 text-sm gap-1">
          <p class="leading-7 [&:not(:first-child)]:mt-6 text-primary" size="small">Copiar segredo do sucesso!!!</p>
        </a></div>
    </div>
    <template data-clipboard-target="successPopover">
      <div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copiado!</div>
    </template><template data-clipboard-target="errorPopover">
      <div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Falha ao copiar!</div>
    </template></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
render(TestView.new) do
  Clipboard(success: "Copiado!", error: "Falha ao copiar!", class: "relative") do
    ClipboardSource(class: "hidden") { span { "Nascer herdeiro!!!" } }
    ClipboardTrigger do
      Link(href: "#", class: "gap-1") do
        TypographyP(size: :small, class: "text-primary") { "Copiar segredo do sucesso!!!" }
      end
    end
  end
end

Default Clipboard

No params configured.