在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):BennyAlex/material-design-inspired-color-picker开源软件地址(OpenSource Url):https://github.com/BennyAlex/material-design-inspired-color-picker开源编程语言(OpenSource Language):JavaScript 57.8%开源软件介绍(OpenSource Introduction):material-design-inspired-color-pickerA customizable javascript color picker inspired by material designDEMOFeatures
InstallationWith npm:
As script:
UsageInclude the script in your app. If you installed the color picker with npm: import 'material-design-inspired-color-picker' If you just downloaded the md-color-picker.js file: <script src="path/to/md-color-picker.js"></script> Then, you can use it like a html tag: <md-color-picker></md-color-picker> A custom elements polyfill is included, so it will work even in browsers wich do not support the custom-elements specification. ApiThe picker let you pass in some options and attributes so you can customize it. Note: In html the attributes are seperated by a hyphen instead of using camelCase in JavaScript. Following properties can be parsed into the picker:
Description:
Full example: <md-color-picker value="#abcdef" palette="material-accent" default-tint="300" use-spectrum-picker="false"></md-color-picker> Events: When the value of the picker changes (means the user selected a color) an event will be triggered. To change the selected color of the picker itself so that the new color is visually selected, you must set the value of the picker by yourself. But don't worry, it's easy and here is a working example: var picker = document.getElementById('picker') // get the color picker element
function colorChanged (event) {
var color = event.detail[0] // get the color
console.log('Selected Color:' + color)
picker.value = color // set the value of the picker to the selected color
}
picker.addEventListener('change', colorChanged) // add the event to the picker element For a more detailed example, see the demo page under docs folder or live: https://bennyalex.github.io/material-design-inspired-color-picker/ |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论