0.0.6 • Published 6 months ago
@culur/antd-number-picker v0.0.6
@culur/antd-number-picker
Ant design number picker.
Install
Add @culur/antd-number-picker dependency to your project.
# Using npm
npm install @culur/antd-number-picker
# Using yarn
yarn add @culur/antd-number-pickerUsage
Standalone
function Example() {
const [value, setValue] = setState(0);
return (
<AntdNumberPicker
min={0}
max={10}
value={value}
onChange={(value_) => setValue(value_)}
/>
);
}Antd form
function Example() {
type FormValues = { number: number };
const [form] = Form.useForm<FormValues>();
const onFinish = (values: FormValues) => {
console.log(`form values: ${values.number}`);
};
return (
<Form
layout="inline"
form={form}
onFinish={onFinish}
initialValues={{
number: 3,
}}
>
<Form.Item name="number">
<AntdNumberPicker min={0} max={10} />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
}Props
| Property | Description | Type | Default | Required |
|---|---|---|---|---|
| className | InputNumber className | string | - | - |
| min | The min value | number | - | true |
| max | The max value | number | - | true |
| readOnly | If readonly the input | boolean | false | - |
| placement | The position of the tooltip relative to the target, which can be one of top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom | string | bottomLeft | - |
| trigger | Tooltip trigger mode. Could be multiple by passing an array | hover | focus | click | contextMenu | string[] | click | - |
| cols | Number of cols in popover | number | 7 | - |
| rows | Number of rows in popover | number | 7 | - |
| value | The current value | number | - | - |
| onChange | The callback triggered when the value is changed | function(value: number \| string \| null) | - | - |
License
@culur/antd-number-picker is released under the GNU GPLv3 license.