분류 javascript

vanilla-colorful : 최신 웹 앱을 위한 작은 색상 선택기

컨텐츠 정보

  • 조회 373 (작성일 )

본문

TypeScript, 프레임 워크에 구애 받지 않는 (실제로 바닐라 맞춤 요소에 대한 반응 색상의 포트), 종속성이 없고 모바일 친화적인 '맞춤 요소'로 구축되었습니다.


https://github.com/web-padawan/vanilla-colorful


Screenshot of the color picker 


특징

  • Small: Just 2,2 KB (minified and gzipped). Size Limit controls the size.
  • Fast: Built with standards based Custom Elements.
  • Bulletproof: Written in strict TypeScript and covered by 20+ tests.
  • Simple: The interface is straight forward and easy to use.
  • Mobile-friendly: Works well on mobile devices and touch screens.
  • Framework-agnostic: Can be used with any framework.
  • No dependencies

라이브 데모 

설치 

npm install vanilla-colorful --save

또는 다음 콘텐츠 전송 네트워크 중 하나를 사용하십시오.


unpkg.com CDN:


<script type="module" src="https://unpkg.com/vanilla-colorful?module"></script>


Skypack CDN:


<script type="module" src="https://cdn.skypack.dev/vanilla-colorful"></script>


사용법


<hex-color-picker color="#1e88e5"></hex-color-picker>
<script type="module">
  import 'vanilla-colorful';

  const picker = document.querySelector('hex-color-picker');
  picker.addEventListener('color-changed', (event) => {
    const newColor = event.detail.value;
  });
</script>


지원되는 색상 모델 


기본 vanilla-colorful의 입력 / 출력 형식은 HEX 문자열 (예 : #ffffff)입니다. 다른 색상 모델이 필요한 경우 5 개의 추가 색상 선택기 번들을 제공합니다.


코드 예 


<rgb-color-picker></rgb-color-picker>
<script type="module">
  import 'vanilla-colorful/rgb-color-picker.js';

  const picker = document.querySelector('rgb-color-picker');
  picker.color = { r: 50, g: 100, b: 150 };
</script>


사용 가능한 선택기 


File to importHTML elementValue example
"hex-color-picker.js"<hex-color-picker>"#ffffff"
"hsl-color-picker.js"<hsl-color-picker>{ h: 0, s: 0, l: 100 }
"hsl-string-color-picker.js"<hsl-string-color-picker>"hsl(0, 0%, 100%)"
"hsv-color-picker.js"<hsv-color-picker>{ h: 0, s: 0, v: 100 }
"rgb-color-picker.js"<rgb-color-picker>{ r: 255, g: 255, b: 255 }
"rgb-string-color-picker.js"<rgb-string-color-picker>"rgb(255, 255, 255)"

스타일 재정의 


vanilla-colorful은 기본 스타일을 재정의 할 수 있는 CSS Shadow Parts를 노출합니다.


hex-color-picker {
  height: 250px;
}

hex-color-picker::part(saturation) {
  bottom: 30px;
  border-radius: 3px 3px 0 0;
}

hex-color-picker::part(hue) {
  height: 30px;
  border-radius: 0 0 3px 3px;
}

hex-color-picker::part(saturation-pointer) {
  border-radius: 5px;
}

hex-color-picker::part(hue-pointer) {
  border-radius: 2px;
  width: 15px;
  height: inherit;
}



색상 선택기