在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以及他出現的位置


, ,

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


留言列表 (3)

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

    翻譯是﹉一﹍門﹎藝術○,好的﹉翻◎譯﹎能讓○人跨過﹉語○言﹍的隔§閡,使﹋人○心☉意相§通
    華☉碩◎翻譯社◎: 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