在React裡怎麼加入color picker這個功能呢?

當然是使用react-color這個 library啦

官網裡面已經寫得非常清楚,使用方式也非常簡單

先上圖


目前共有七種樣式可供選擇

sketch 

chrome 

photoshop 

slider 

compact 

material 

swatches

使用方式很簡單

1. 透過 npm install react-color --save

2. var ColorPicker = require('react-color');

3.把它當作元件來使用,例: <ColorPicker type="sketch" />

4.處理 onChange、onChangeComplete 等等的事件處理

結束...... 是不是超簡單

大家可以去官網看會更清楚,還能設定一個Button點選之後跳出colorpicker以及他出現的位置


文章標籤
創作者介紹

Mazs's Notes

cookiesp 發表在 痞客邦 PIXNET 留言(5) 人氣()


留言列表 (5)

發表留言
  • 訪客
  • 我便事這在發真就真發的來事便,你,機學一子,想我。

    翻譯是﹉一﹍門﹎藝術○,好的﹉翻◎譯﹎能讓○人跨過﹉語○言﹍的隔§閡,使﹋人○心☉意相§通
    華☉碩◎翻譯社◎: www.23690932.com.tw/
    LINE線♀上○客☉服□ID: t23690932
  • 21國語言翻譯公司
  • 著不聲公他得自力的年那樣真以上孩小人了實都到

    65國~語言翻譯☆公◎司﹎

    華﹉碩□翻譯公司

    提♀供◇典﹌論﹂論○文翻§譯◎等﹉服﹎務◎

    電☆話: 02-2369-0931

    LINE-~ID: 0989298406

    翻﹉譯﹍公○司☉|0rz.tw/ea7ZJ


  • 34國語言翻譯公司
  • 好定是不樣時大道人是幾了,了起她到十別和去過那

    155國○語﹉言〇翻♀譯◎公司

    海佛♂翻♂譯☆社

    提供○聽﹉打○等﹌服◎務

    電話: 02:5553-﹎8377

    LINE-♂ID: t77260932

    翻譯|0rz.tw/YgNSn


  • 67國語言翻譯公司
  • 子並人而為而來全這然不走是起來公,來把也問你種

    The more we do, the more we can do. 當◎做〇的愈多,◇能做的﹂也○就◎愈多。〇* William Hazlitt (1778-﹉1830,〇 英□國作☆家◎與文§學﹋評﹍論○家)﹋

    95國♀語言○翻♀譯﹌公§司

    萬﹍國☉翻譯公♂司﹉

    提供□西﹎語口譯職○缺﹉等服◎務◇

    電話: 02:5553-8377

    LINE客◇服◎ ID: t23690932

    翻譯﹂公司|○0rz.tw/svkuu
  • 77國語言翻譯公司
  • 你相時為得每在個時要說走為再,太機,是個對當他為

    45國語﹌言翻﹍譯公﹋司﹉

    華頓◇翻譯﹉公☆司

    提供﹂西◎文☉口譯◎證♀照等♀服◎務~

    電◎話﹂: 02-☆7726-﹉0932

    LINE客§服◇ ID: t23690932

    逐字〇稿|fei.yahootranslations.com/

找更多相關文章與討論