ribbon-color
v1.0.16
Published
<h1 align="center">Welcome to 色带UI组件 👋</h1> <p> <img alt="Version" src="https://img.shields.io/badge/version-1.0.3-blue.svg?cacheSeconds=2592000" /> <a href="#" target="_blank"> <img alt="License: MIT" src="https://img.shields.io/badge/License-MI
Downloads
28
Readme
组件效果
可传入指定颜色数组,也可以不传使用默认; 传几组颜色数组,则色带显示几组; 可传入指定宽度做自定义宽度。
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'} //自定义宽度,可不传,使用默认值
/>
Install
cnpm i ribbon-color
Author
👤 llzm
- Github: 可以点击进入git 查看组件效果或下载代码
Show your support
Give a ⭐️ if this project helped you!
This README was generated with ❤️ by readme-md-generator