https://github.com/postor/react-ratio-inputs
用来分配百分比/比例的 react 组件 | react componet for assigning percentages/ratios
https://github.com/postor/react-ratio-inputs
Last synced: 2 months ago
JSON representation
用来分配百分比/比例的 react 组件 | react componet for assigning percentages/ratios
- Host: GitHub
- URL: https://github.com/postor/react-ratio-inputs
- Owner: postor
- Created: 2020-11-28T07:47:45.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-12-02T08:50:34.000Z (over 4 years ago)
- Last Synced: 2025-03-18T13:19:41.043Z (2 months ago)
- Language: TypeScript
- Homepage: https://www.youtube.com/watch?v=mdklftg1AD8&list=PLM1v95K5B1ntVsYvNJIxgRPppngrO_X4s&index=33
- Size: 1.77 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-ratio-inputs
用来分配百分比/比例的 react 组件 | react componet for assigning percentages/ratios
## 使用 | usage
```
import { useState } from 'react'
import RatioInputs from 'react-ratio-inputs'
const Index = () => {
let [ratios, setRatios] = useState([
{
name: '自己', // 名称 | name
value: 98, // 值 | value
props: { style: { fontWeight: 'bold' } } // 额外的属性 | extra props
},
{ name: '海盗2', value: 0 },
{ name: '海盗3', value: 1 },
{ name: '海盗4', value: 0 },
{ name: '海盗5', value: 1 },
])
return (
海盗分金
{
setRatios(ratios)
}} // 如不提供 onChange 则不会显示控制杆 | if no onChange provided, controls will not show
// max={200} // 如指定最大总和 | maximum sum
// min={80} // 如指定最小总和 | minimum sum
// toText={({name,value})=>`${name}:${value}`} // 显示文本 | text
// toTitle={({ name, value }) => `${name} got ${value} coins`} // 悬停提示 | title
// hue2color={hue => `hsl(${hue}, 80%, 90%)`} // 文字颜色 | color
// hue2backgroundColor={hue => `hsl(${(hue + 180) % 360}, 30%, 50%)`} // 背景色 | backgroud color
// propForUnused 未使用项的属性 | prop for unused
// nameForUnused 未使用项的名称 | name for unused
/>
{JSON.stringify(ratios, null, 2)}
)
}
export default Index
```
使用示例 | example
code: [examples\basic\pages\index.js](./examples/basic/pages/index.js)
运行|run : `examples\basic> npm i && npm run dev`
online: https://postor.github.io/react-ratio-inputs/