Components
Clipboard
Clipboard, dressed in the paper-and-ink system: a hairline value field beside an icon-sized copy trigger whose ink turns bamboo while the copy is confirmed. The parts — Root, Label, Control, Input, Trigger, Indicator, Context, HiddenInput.
#Basic usage
<script setup lang="ts">
import { Clipboard } from "@bysages/vue";
</script>
<template>
<Clipboard.Root default-value="pnpm add @bysages/vue">
<Clipboard.Label>Install command</Clipboard.Label>
<Clipboard.Control>
<Clipboard.Input />
<Clipboard.Trigger>
<Clipboard.Indicator>
<template #copied>✓</template>
⧉
</Clipboard.Indicator>
</Clipboard.Trigger>
</Clipboard.Control>
</Clipboard.Root>
</template>
#Props
#Control
A styled part — no props of its own; it takes the anatomy's shared styling.
#Indicator
A styled part — no props of its own; it takes the anatomy's shared styling.
#Input
A styled part — no props of its own; it takes the anatomy's shared styling.
#Label
A styled part — no props of its own; it takes the anatomy's shared styling.
#Root
| Prop | Type | Default | Description |
|---|---|---|---|
size | String as PropType<"sm" | "md" | "lg"> | "md" | One rung of the control-height ladder for the value field and its copy seal. |
defaultValue | string | The initial value to be copied to the clipboard when rendered. Use when you don't need to control the value of the clipboard. | |
id | string | The unique identifier of the machine. | |
ids | Partial<{ root: string; input: string; label: string; }> | The ids of the elements in the clipboard. Useful for composition. | |
modelValue | string | The v-model value of the clipboard | |
timeout | number | 3000 | The timeout for the copy operation |
translations | clipboard.IntlTranslations | Specifies the localized strings that identifies the accessibility elements and their states |
#Trigger
A styled part — no props of its own; it takes the anatomy's shared styling.
#ValueText
A styled part — no props of its own; it takes the anatomy's shared styling.