JenniferSoft Design Docs

Appearance

CopyButton ​

복사 기능을 제공하는 버튼 컴포넌트입니다. 텍스트를 클립보드에 복사하고 시각적 피드백을 제공합니다.

기본 사용법 ​

vue
<CopyButton text-to-copy="복사할 텍스트" />

속성 ​

속성타입기본값설명
textToCopystring-복사할 텍스트 내용
type'text' | 'outlined''text'버튼 스타일 유형
config'icon' | 'label' | 'both''icon'버튼 표시 방식

그 외 Btn 컴포넌트의 모든 속성을 지원합니다. (leadingIcon, trailingIcon, text 제외)

버튼 표시 방식 (config) ​

CopyButton은 세 가지 표시 방식을 지원합니다:

  • icon: 아이콘만 표시 (기본값)
  • label: 텍스트만 표시
  • both: 아이콘과 텍스트 모두 표시
vue
<CopyButton text-to-copy="텍스트" config="icon" />
<CopyButton text-to-copy="텍스트" config="label" />
<CopyButton text-to-copy="텍스트" config="both" />

다국어 지원 ​

CopyButton은 provide/inject 패턴을 사용하여 다국어를 지원합니다. 애플리케이션의 루트에서 다음과 같이 텍스트를 주입할 수 있습니다:

typescript
// main.ts 또는 앱 진입점
app.provide('copyButtonTexts', {
    copy: i18n.t('copy'),
    copied: i18n.t('copied'),
    copyToClipboard: i18n.t('copyToClipboard'),
});

주입하지 않으면 기본값으로 영어 텍스트가 사용됩니다.

예제 ​

작동 방식 ​

  1. 버튼을 클릭하면 지정된 텍스트가 클립보드에 복사됩니다.
  2. 복사 후 버튼 아이콘이 체크 아이콘으로 변경됩니다.
  3. 툴팁 텍스트도 "복사됨" 메시지로 변경됩니다.
  4. 3초 후 원래 상태로 돌아갑니다.