clipboard-copy-element - GitLite

KO | EN

gitlite — search

#hacktoberfest #go #android #machine-learning #linux #macos #nodejs #java #windows #awesome #vue #awesome-list #mcp #openai

clipboard-copy-element

(★ 492)

Copy element text content or input values to the clipboard.

파일 탐색기

최종 버전 다운로드 (.zip)

- devcontainer.json
- Dockerfile
- - nodejs.yml
  - publish.yml
- index.html
- clipboard-copy-element-define.ts
- clipboard-copy-element.ts
- clipboard.ts
- index.ts
- test.js
.eslintrc.json
.gitignore
CODEOWNERS
custom-elements.json
LICENSE
package-lock.json
package.json
README.md
tsconfig.json
web-test-runner.config.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/github/clipboard-copy-element

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd clipboard-copy-element

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

$ npm install --save @github/clipboard-copy-element

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm test

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# &lt;clipboard-copy&gt; element

Copy element text content or input values to the clipboard.

## Installation

```
$ npm install --save @github/clipboard-copy-element
```

## Usage

### Script

Import as ES modules:

```js
import '@github/clipboard-copy-element'
```

With a script tag:

```html
<script type="module" src="./node_modules/@github/clipboard-copy-element/dist/index.js">
```

### Markup

```html
<clipboard-copy for="blob-path" class="btn btn-sm BtnGroup-item">
  Copy path
</clipboard-copy>
<div id="blob-path">src/index.js</div>
```

## Data sources

### Attribute

```html
<clipboard-copy value="src/index.js">Copy</clipboard-copy>
```

### Element content

```html
<clipboard-copy for="blob-path">Copy</clipboard-copy>
<div id="blob-path">src/index.js</div>
```

### Form input

```html
<clipboard-copy for="blob-path">Copy</clipboard-copy>
<input id="blob-path" value="src/index.js">
```

### Hyperlink href

```html
<clipboard-copy for="blob-path">Copy full URL</clipboard-copy>
<a id="blob-path" href="/path/to#my-blob">Link text will not be copied</a>
```

## Events

After copying to the clipboard, a `clipboard-copy` event is dispatched from
the `<clipboard-copy>` element:

```js
document.addEventListener('clipboard-copy', function(event) {
  const button = event.target
  button.classList.add('highlight')
})
```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.