定价

CopyLink 使用手册

v1.0.2 · @snowui-design-system/components

许可阅读：首次阅读组件文档、源码或 npm 使用流程，先读完整 LICENSE；同任务同版本去重。公开 API 配置与内部实现修改分别按许可处理；全部组件使用统一运行包，源码权益以许可为准。

组件介绍

展示可打开、可复制的链接地址，文字打开链接，其余区域复制地址。

使用选择

用于分享地址、邀请链接和 AI 文档入口，与 Link 同属链接类。

  • 普通文字导航用 Link；需要复制地址用 CopyLink；需要编辑地址用 Input。

  • href 同时作为显示、打开与复制的完整地址；长地址只截断显示，不截断复制内容。

  • 文字 hover 显示下划线，默认新标签页打开；空白与右侧图标点击复制，成功反馈由 CopyButton 管理。

快速开始

<script lang="ts">  import { CopyLink } from '@snowui-design-system/components';</script> <CopyLink href="https://snowui.dev/llms.txt" />

API

关键字 类型 默认值 描述
href string 必填 显示、导航和复制的地址；需要复制绝对地址时传完整 URL。
target string "_blank" Link 打开目标。
rel string "noopener noreferrer" Link 关系属性。
disabled boolean false 同时禁用导航和复制。
parts ComponentPartsOf<{ Link: typeof Link; CopyButton: typeof CopyButton }> — 配置内置子组件公开属性，如 Link.color / underline、CopyButton.ariaLabel / writeText / feedbackDuration。地址、禁用态和布局由父级拥有。
onCopy (text: string) => void — 复制成功后接收完整地址。
onCopyError (error: unknown) => void — 复制失败回调。

其余兼容属性继承 Frame，class / style 作用于表面。

使用边界与详细说明

  • 默认无边框、无表单 hover 动效，使用 surface-2 表面。Link 默认 Black100，hover 颜色不变且显示下划线。

  • Link 与 CopyButton 为平级交互元素，文字区域导航，其余表面复制；Tab 分别聚焦，Enter 打开，Enter / Space 复制。

  • 文字为复制图标预留 size-4（至少按内置图标的 12 CSS px 下限）与 gap-2（至少 4 CSS px）；默认 16px 根字号下仍为 16px 图标与 8px 间距。长文字以省略号 … 截断，完整地址继续用于导航和复制。

  • 复制按钮为 bare muted，图标在右侧居中。反馈期间沿用 CopyButton 的重复点击保护。

  • 不参与表单提交，不提供编辑、校验或输入框角色；无需额外组件包。

  • --snowui-copy-link-padding-x-override / --snowui-copy-link-padding-y-override / --snowui-copy-link-radius-override 分别覆盖默认 padding-4 / padding-3 / radius-4。

先阅读 完整 LICENSE；同任务、同版本、同范围去重。

优先用组件公开 Props 匹配合适样式，尽可能保留原有视觉。确需改写时按 样式选择与改写顺序 使用自己的 class（含项目已有 Tailwind）或实例 style。以下名称来自源码实际消费的公开 override；先核对目标作用域，不修改私有 DOM。采用 SnowUI Token 时选择正确类别，外部应用不被要求安装一方 utilities。

本组件源文件没有直接消费已登记的专属 override。组合子组件的样式通过公开 parts 或显式 child 配置；不要凭名称猜测变量。

设计指南 · Token · 组合边界

必填属性：href。

可双向绑定：本组件未声明具名双向绑定属性；状态更新通过公开回调或所属宿主处理。

继承声明：Omit<FrameProps, "children">。继承能力以基类公开文档为准；Omit 中的字段已排除，不能按基类原样使用。

共享 Frame API · 返回 API

以下为公开属性实际引用的类型声明，来自源码；Svelte Snippet 表示内容片段，ComponentProps 表示对应组件的 Props。

ComponentPartsOf

来源：components/src/logic/component-parts.svelte.ts

export type ComponentPartsOf<    T extends Record<string, Component<any>>,> = {    [K in keyof T]?: ConfigurableComponentPartProps<T[K]>;};

ConfigurableComponentPartProps

来源：components/src/logic/component-parts.svelte.ts

export type ConfigurableComponentPartProps<C extends Component<any>> = Partial<    Omit<ComponentProps<C>, ComponentPartControlledKey>>;

ComponentPartControlledKey

来源：components/src/logic/component-parts.svelte.ts

export type ComponentPartControlledKey =    | "children"    | "as"    | "value"    | "defaultValue"    | "open"    | "selected"    | "checked"    | "disabled"    | "readonly"    | "id"    | `on${string}`    | `aria-${string}`;