@uiw/react-slider
Advanced tools
@uiw/react-slider - npm Package Compare versions
Comparing version 4.21.18 to 4.21.19
| { | ||
| "name": "@uiw/react-slider", | ||
| "version": "4.21.18", | ||
| "version": "4.21.19", | ||
| "description": "Slider component", | ||
@@ -47,4 +47,4 @@ "author": "Kenny Wong <wowohoo@qq.com>", | ||
| "dependencies": { | ||
| "@uiw/utils": "^4.21.18" | ||
| "@uiw/utils": "^4.21.19" | ||
| } | ||
| } |
269
README.md
@@ -20,9 +20,7 @@ Slider 滑块输入条 | ||
| <!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
| ```jsx | ||
| ```jsx mdx:preview&bg=#fff | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { Slider, Divider } from 'uiw'; | ||
| function Demo() { | ||
| export default function Demo() { | ||
| const [value, setValue] = React.useState(20); | ||
@@ -71,4 +69,2 @@ const [value2, setValue2] = React.useState(-5); | ||
| } | ||
| ReactDOM.render(<Demo />, _mount_); | ||
| ``` | ||
@@ -80,61 +76,61 @@ | ||
| <!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
| ```jsx | ||
| import ReactDOM from 'react-dom'; | ||
| ```jsx mdx:preview&bg=#fff | ||
| import React from 'react'; | ||
| import { Form, Row, Col, Slider, Button, Notify } from 'uiw'; | ||
| const Demo = () => ( | ||
| <div> | ||
| <Form | ||
| onSubmit={({initial, current}) => { | ||
| if(current.age === initial.age) { | ||
| Notify.error({ | ||
| title: '提交失败！', | ||
| description: `表单提交年龄失败，年龄为：${current.age}，与初始化值是一样滴！`, | ||
| }); | ||
| } else { | ||
| Notify.success({ | ||
| title: '提交成功！', | ||
| description: `表单提交年龄成功，年龄为：${current.age}，将自动填充初始化值！`, | ||
| }); | ||
| } | ||
| }} | ||
| fields={{ | ||
| age: { | ||
| initialValue: 0, | ||
| inline: true, | ||
| label: '年龄', | ||
| help: '值必须大于 10', | ||
| validator: (value) => value < 10 ? '必填选项！' : null, | ||
| children: <Slider /> | ||
| }, | ||
| }} | ||
| > | ||
| {({ fields, state, canSubmit }) => { | ||
| console.log('state:', state) | ||
| return ( | ||
| <div> | ||
| <Row gutter={10}> | ||
| <Col style={{ maxWidth: 300 }}>{fields.age}</Col> | ||
| <Col>{state.current.age}</Col> | ||
| </Row> | ||
| <Row> | ||
| <Col fixed> | ||
| <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button> | ||
| </Col> | ||
| </Row> | ||
| <Row> | ||
| <Col> | ||
| <pre style={{ padding: 10, marginTop: 10 }}> | ||
| {JSON.stringify(state.current, null, 2)} | ||
| </pre> | ||
| </Col> | ||
| </Row> | ||
| </div> | ||
| ) | ||
| }} | ||
| </Form> | ||
| </div> | ||
| ) | ||
| ReactDOM.render(<Demo />, _mount_); | ||
| export default function Demo() { | ||
| return ( | ||
| <div> | ||
| <Form | ||
| onSubmit={({initial, current}) => { | ||
| if(current.age === initial.age) { | ||
| Notify.error({ | ||
| title: '提交失败！', | ||
| description: `表单提交年龄失败，年龄为：${current.age}，与初始化值是一样滴！`, | ||
| }); | ||
| } else { | ||
| Notify.success({ | ||
| title: '提交成功！', | ||
| description: `表单提交年龄成功，年龄为：${current.age}，将自动填充初始化值！`, | ||
| }); | ||
| } | ||
| }} | ||
| fields={{ | ||
| age: { | ||
| initialValue: 0, | ||
| inline: true, | ||
| label: '年龄', | ||
| help: '值必须大于 10', | ||
| validator: (value) => value < 10 ? '必填选项！' : null, | ||
| children: <Slider /> | ||
| }, | ||
| }} | ||
| > | ||
| {({ fields, state, canSubmit }) => { | ||
| console.log('state:', state) | ||
| return ( | ||
| <div> | ||
| <Row gutter={10}> | ||
| <Col style={{ maxWidth: 300 }}>{fields.age}</Col> | ||
| <Col>{state.current.age}</Col> | ||
| </Row> | ||
| <Row> | ||
| <Col fixed> | ||
| <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button> | ||
| </Col> | ||
| </Row> | ||
| <Row> | ||
| <Col> | ||
| <pre style={{ padding: 10, marginTop: 10 }}> | ||
| {JSON.stringify(state.current, null, 2)} | ||
| </pre> | ||
| </Col> | ||
| </Row> | ||
| </div> | ||
| ) | ||
| }} | ||
| </Form> | ||
| </div> | ||
| ) | ||
| } | ||
| ``` | ||
@@ -146,9 +142,7 @@ | ||
| <!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
| ```jsx | ||
| ```jsx mdx:preview&bg=#fff | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { Slider, Divider } from 'uiw'; | ||
| function Demo() { | ||
| export default function Demo() { | ||
| return ( | ||
@@ -167,3 +161,2 @@ <div> | ||
| } | ||
| ReactDOM.render(<Demo />, _mount_); | ||
| ``` | ||
@@ -175,6 +168,4 @@ | ||
| <!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
| ```jsx | ||
| ```jsx mdx:preview&bg=#fff | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { Slider, Divider} from 'uiw'; | ||
@@ -243,3 +234,3 @@ | ||
| } | ||
| ReactDOM.render(<Demo />, _mount_); | ||
| export default Demo; | ||
| ``` | ||
@@ -249,6 +240,4 @@ | ||
| <!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
| ```jsx | ||
| ```jsx mdx:preview&bg=#fff | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { Slider, Divider} from 'uiw'; | ||
@@ -323,3 +312,3 @@ | ||
| } | ||
| ReactDOM.render(<Demo />, _mount_); | ||
| export default Demo; | ||
| ``` | ||
@@ -329,28 +318,23 @@ | ||
| <!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
| ```jsx | ||
| ```jsx mdx:preview&bg=#fff | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { Slider, Divider} from 'uiw'; | ||
| class Demo extends React.Component { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <Slider value={25} disabled style={{ maxWidth: 260 }} /> | ||
| <Divider /> | ||
| <Slider | ||
| step={10} | ||
| disabled | ||
| dots | ||
| value={50} | ||
| style={{ maxWidth: 260 }} | ||
| /> | ||
| <Divider /> | ||
| <Slider disabled step={2} value={26} min={20} max={44} dots marks /> | ||
| </div> | ||
| ) | ||
| } | ||
| export default function Demo() { | ||
| return ( | ||
| <div> | ||
| <Slider value={25} disabled style={{ maxWidth: 260 }} /> | ||
| <Divider /> | ||
| <Slider | ||
| step={10} | ||
| disabled | ||
| dots | ||
| value={50} | ||
| style={{ maxWidth: 260 }} | ||
| /> | ||
| <Divider /> | ||
| <Slider disabled step={2} value={26} min={20} max={44} dots marks /> | ||
| </div> | ||
| ) | ||
| } | ||
| ReactDOM.render(<Demo />, _mount_); | ||
| ``` | ||
@@ -360,53 +344,48 @@ | ||
| <!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
| ```jsx | ||
| ```jsx mdx:preview&bg=#fff | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { Row, Col, Slider } from 'uiw'; | ||
| class Demo extends React.Component { | ||
| render() { | ||
| return ( | ||
| <Row> | ||
| <Col fixed style={{ width: 70 }}> | ||
| <Slider | ||
| vertical | ||
| min={-10} | ||
| max={30} | ||
| step={2} | ||
| dots | ||
| value={20} | ||
| marks={{ | ||
| [-10]: '-10°C', | ||
| [-2]: '-2°C', | ||
| 0: ' ', | ||
| 2: { | ||
| style: { color: '#af00ff' }, | ||
| }, | ||
| 30: { | ||
| style: { color: '#ff7c00' }, | ||
| label: <strong>30°C</strong>, | ||
| } | ||
| }} | ||
| style={{ height: 260 }} | ||
| renderMarks={(mark) => `${mark}°C`} | ||
| /> | ||
| </Col> | ||
| <Col fixed> | ||
| <Slider vertical value={25} style={{ height: 260 }} /> | ||
| </Col> | ||
| <Col fixed> | ||
| <Slider vertical value={62} progress={false} tooltip style={{ height: 260 }} /> | ||
| </Col> | ||
| <Col fixed> | ||
| <Slider vertical value={50} step={10} dots style={{ height: 260 }} /> | ||
| </Col> | ||
| <Col fixed> | ||
| <Slider vertical step={2} value={[26, 40]} min={20} max={44} dots marks style={{ height: 260 }} /> | ||
| </Col> | ||
| </Row> | ||
| ); | ||
| } | ||
| export default function Demo() { | ||
| return ( | ||
| <Row> | ||
| <Col fixed style={{ width: 70 }}> | ||
| <Slider | ||
| vertical | ||
| min={-10} | ||
| max={30} | ||
| step={2} | ||
| dots | ||
| value={20} | ||
| marks={{ | ||
| [-10]: '-10°C', | ||
| [-2]: '-2°C', | ||
| 0: ' ', | ||
| 2: { | ||
| style: { color: '#af00ff' }, | ||
| }, | ||
| 30: { | ||
| style: { color: '#ff7c00' }, | ||
| label: <strong>30°C</strong>, | ||
| } | ||
| }} | ||
| style={{ height: 260 }} | ||
| renderMarks={(mark) => `${mark}°C`} | ||
| /> | ||
| </Col> | ||
| <Col fixed> | ||
| <Slider vertical value={25} style={{ height: 260 }} /> | ||
| </Col> | ||
| <Col fixed> | ||
| <Slider vertical value={62} progress={false} tooltip style={{ height: 260 }} /> | ||
| </Col> | ||
| <Col fixed> | ||
| <Slider vertical value={50} step={10} dots style={{ height: 260 }} /> | ||
| </Col> | ||
| <Col fixed> | ||
| <Slider vertical step={2} value={[26, 40]} min={20} max={44} dots marks style={{ height: 260 }} /> | ||
| </Col> | ||
| </Row> | ||
| ); | ||
| } | ||
| ReactDOM.render(<Demo />, _mount_); | ||
| ``` | ||
@@ -413,0 +392,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.65%
102846
- Number of lines in readme file
- decreased by-5.01%
398
Dependency changes
Updated@uiw/utils@^4.21.19