Ribbon-color NPM

组件效果

Image text

可传入指定颜色数组，也可以不传使用默认; 传几组颜色数组，则色带显示几组; 可传入指定宽度做自定义宽度。

import {Ribbon} from 'ribbon-color'
const [visiblely,setvisiblely]=useState(false) //下拉颜色显影状态


第一种方式. 颜色数组传入一个值，为白色至传入值的渐变色，长度默认为7. 也可以传入自定义长度。
const itemList = [{color: [ '#000']}]
第二种方式. 颜色数组传入两个值，为传入两值的渐变色，长度默认为7. 也可以传入自定义长度。
const itemList =[{color: ['#FBEAD7', '#F9DBC3']}]
第三种方式. 颜色数组传入一组值，直接渲染该色以及长度，自定义长度无效。
const itemList =[ {color: ['#FEE0D2', '#FCBBA1', '#FC9272', '#FB6A4A', '#EF3B2C', '#CB181D', '#99000D'],},
                  {color: ['#FBEAD7', '#F9DBC3', '#F7D4AF', '#F5C399', '#F5B785', '#F1A566', '#ED8734'],}]


//获取选择颜色值
  const setshowFirst=(data)=>{
    console.log(data)
}

//改变下拉颜色显影状态
  const setvisiblechange=(visible)=>{
    setvisiblely(visible)
}

 <Ribbon
   visible={visiblely}
   colorList={itemList} //色带颜色,数组可不传，使用默认值
   setshowFirst={setshowFirst}
   setvisible={setvisiblechange}
   colorlen={5}  // 颜色长度,可不传，使用默认值
   widthStyle={'240px'} //自定义宽度,可不传，使用默认值
  />