ContextQMD
Back to Consul

CopyableCode

ui/packages/consul-ui/app/components/copyable-code/README.mdx

1.22.71.5 KB
Original Source

CopyableCode

CopyableCode is used to display code that is likely to be copied by the user.

It also has an option to obfuscate the code, that is then toggleable by the user.

Text within the component is formatted using a <pre> tag.

hbs
<figure>
  <figcaption>Without obfuscation</figcaption>
  <CopyableCode
    @value="-----BEGIN CERTIFICATE-----
  MIIH/TCCBeWgAwIBAgIQaBYE3/M08XHYCnNVmcFBcjANBgkqhkiG9w0BAQsFADBy
  MQswCQYDVQQGEwJVUzEOMAwGA1UECAwFVGV4YXMxEDAOBgNVBAcMB0hvdXN0b24x
  ETAPBgNVBAoMCFNTTCBDb3JwMS4wLAYDVQQDDCVTU0wuY29tIEVWIFNTTCBJbnRl
  -----END CERTIFICATE-----"
    @name="Name of thing that gets copied e.g. Certificate"
  />
</figure>
hbs
<figure>
  <figcaption>With obfuscation</figcaption>
  <CopyableCode
    @obfuscated={{true}}
    @value="-----BEGIN CERTIFICATE-----
  MIIH/TCCBeWgAwIBAgIQaBYE3/M08XHYCnNVmcFBcjANBgkqhkiG9w0BAQsFADBy
  MQswCQYDVQQGEwJVUzEOMAwGA1UECAwFVGV4YXMxEDAOBgNVBAcMB0hvdXN0b24x
  ETAPBgNVBAoMCFNTTCBDb3JwMS4wLAYDVQQDDCVTU0wuY29tIEVWIFNTTCBJbnRl
  -----END CERTIFICATE-----"
    @name="Certificate"
  />
</figure>

Arguments

ArgumentTypeDefaultDescription
valueStringThe code to display/be copied
nameStringThe 'Name' of the thing to be displayed and copied. Mainly used for giving feedback to the user.
obfuscatedbooleanWhether to obfuscate the value until the user clicks to view

See