PXD

Snippet

Display a snippet of copyable code for the command line.

Default

npm install pxd
npm install pxd
npm install pxd
<script setup>
import confetti from 'canvas-confetti'

const onCopied = () => {
  confetti()
}
</script>

<template>
  <PStack direction="vertical">
    <PSnippet text="npm install pxd" @copy="onCopied" size="sm" />
    <PSnippet text="npm install pxd" @copy="onCopied" size="md" />
    <PSnippet text="npm install pxd" @copy="onCopied" size="lg" />
  </PStack>
</template>

Multi line

cd my-project
npm install pxd
npm run dev
<script setup>
const text = ['cd my-project', 'npm install pxd', 'npm run dev']
</script>

<template>
  <PSnippet :text="text" class="w-[300px]" />
</template>

Prompt

npm install pxd
npm install pxd
npm install pxd
<template>
  <PStack direction="vertical">
    <PSnippet text="npm install pxd" class="w-[300px]" :prompt="false" />
    <PSnippet text="npm install pxd" class="w-[300px]" prompt="# " />
    <PSnippet text="npm install pxd" class="w-[300px]" prompt="\ " />
  </PStack>
</template>

Variants

npm install pxd
npm install pxd
npm install pxd
npm install pxd
npm install pxd
npm install pxd
npm install pxd
<template>
  <PStack direction="vertical">
    <PSnippet text="npm install pxd" class="w-[300px]" variant="primary" />
    <PSnippet text="npm install pxd" class="w-[300px]" variant="inverted" />
    <PSnippet text="npm install pxd" class="w-[300px]" variant="success" />
    <PSnippet text="npm install pxd" class="w-[300px]" variant="error" />
    <PSnippet text="npm install pxd" class="w-[300px]" variant="warning" />
    <PSnippet text="npm install pxd" class="w-[300px]" variant="ghost" />
    <PSnippet text="npm install pxd" class="w-[300px]" variant="secondary" />
  </PStack>
</template>

Props

NameTypeDefaultDescription
textstring | string[]-Command text to display, one line per array item
size'sm' | 'md' | 'lg'-Snippet size, falls back to the config provider size
promptboolean | string$ Shell prompt prefix, false hides it and a string sets the text
copy-btn'always' | 'hover' | 'hidden'alwaysDisplay copy button appropriately
variant'default' | 'primary' | 'error' | 'warning' | 'success' | 'ghost' | 'secondary'defaultColor scheme

Events

NameTypeDescription
copy(text: string) => voidEmitted after the copy button has written the snippet text to the clipboard.

Source

Source