Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/achtaitaipai/color-picker
simple color-picker custom element
https://github.com/achtaitaipai/color-picker
Last synced: about 2 months ago
JSON representation
simple color-picker custom element
- Host: GitHub
- URL: https://github.com/achtaitaipai/color-picker
- Owner: achtaitaipai
- Created: 2022-05-30T21:04:26.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-22T18:55:12.000Z (12 months ago)
- Last Synced: 2024-04-24T04:30:19.231Z (9 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@achtaitaipai/color-picker
- Size: 52.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Color Picker
Simple color-picker custom element
---
## Usage
Install the package using npm :
```bash
npm install @achtaitaipai/color-picker
```
Import it in your script
```js
import @achtaitaipai/color-picker
```
Use the custom element in your html using
``.
```html
```
Define style
```css
color-picker {
position: fixed;
width: 200px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
```
Open the color-picker with `open()` and listen change with `color-change`
```js
const clrpckr = document.querySelector('color-picker')
clrpckr.open()
clrpckr.addEventListener('color-change', e => {
console.log(e.detail)
})
```
---
## Doc
### Attributes
| Name | Type | Example |
| :-------------: | :------: | :-----------------------: |
| `pallet` | `array` | `"['#ff0000','#1D2B53']"` |
| `confirm-label` | `string` | `"Ok"` |
| `cancel-label` | `string` | `"Cancel"` |
---
### Methods
| Name | Description |
| :-----: | :--------------------: |
| `open` | open the color picker |
| `close` | close the color picker |
---
### CSS Variables
| Name | default | description |
| :------------: | :-------: | :----------------------------------------: |
| `--bg` | `#3f3e3e` | background color |
| `--bg-input` | `#282828` | background color of text input and buttons |
| `--font-color` | `#ffffff` | font color |
| `--bg-error` | `#7b0000` | background color of text input when error |
---
### Properties
| Name | Type | Example |
| :-----: | :----: | :-------: |
| `value` | string | `#ff0000` |