@progress/kendo-react-inputs 4.10.0-dev.202110110856 → 4.10.0-dev.202110151005
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<img src="https://www.telerik.com/kendo-react-ui/npm-banner.svg">
|
|
3
3
|
</a>
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
# KendoReact Inputs Library for React
|
|
6
6
|
|
|
7
7
|
> **Important**
|
|
8
8
|
> * This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)—a commercial UI library.
|
|
@@ -14,32 +14,93 @@
|
|
|
14
14
|
|
|
15
15
|
The KendoReact Inputs offer a highly customizable interface for users to enter and pick different information. The KendoReact Inputs support different locales and formats.
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
What's in this package (ToC):
|
|
18
18
|
|
|
19
|
-
* [Checkbox component](
|
|
20
|
-
* [ColorGradient component](
|
|
21
|
-
* [ColorPalette component](
|
|
22
|
-
* [ColorPicker component](
|
|
23
|
-
* [Input component](
|
|
24
|
-
* [MaskedTextBox component](
|
|
25
|
-
* [NumericTextBox component](
|
|
26
|
-
* [RadioButton component](
|
|
27
|
-
* [
|
|
28
|
-
* [RangeSlider component](
|
|
29
|
-
* [Slider component](
|
|
30
|
-
* [Switch component](
|
|
31
|
-
* [TextArea component](
|
|
19
|
+
* [React Checkbox component](#react-checkbox-component)
|
|
20
|
+
* [React ColorGradient component](#react-colorgradient-component)
|
|
21
|
+
* [React ColorPalette component](#react-colorpalette-component)
|
|
22
|
+
* [React ColorPicker component](#react-colorpicker-component)
|
|
23
|
+
* [React Input component](#react-input-component)
|
|
24
|
+
* [React MaskedTextBox component](#react-maskedtextbox-component)
|
|
25
|
+
* [React NumericTextBox component](#react-numerictextbox-component)
|
|
26
|
+
* [React RadioButton component](#react-radiobutton-component)
|
|
27
|
+
* [React RadioButtonGroup component](#react-radiobuttongroup-component)
|
|
28
|
+
* [React RangeSlider component](#react-rangeslider-component)
|
|
29
|
+
* [React Slider component](#react-slider-component)
|
|
30
|
+
* [React Switch component](#react-switch-component)
|
|
31
|
+
* [React TextArea component](#react-textarea-component)
|
|
32
|
+
* [React Inputs Components Library Features](#react-inputs-library-shared-features)
|
|
33
|
+
* [Support Options](#support-options)
|
|
34
|
+
* [Resources](#resources)
|
|
32
35
|
|
|
33
|
-
## React
|
|
36
|
+
## React Checkbox Component
|
|
37
|
+
|
|
38
|
+
[The KendoReact Checkbox component](https://www.telerik.com/kendo-react-ui/components/inputs/checkbox/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) moves beyond the traditional HTML input element and provides styling that fits with all KendoReact themes, allowing users to maintain a consistent look and feel throughout their entire React application.
|
|
39
|
+
|
|
40
|
+
## React ColorGradient Component
|
|
41
|
+
|
|
42
|
+
[The KendoReact ColorGradient component](https://www.telerik.com/kendo-react-ui/components/inputs/colorgradient/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) provides a beautiful and easy to use user interface for choosing a gradient color. In some cases, the opacity of the gradient is not required, and we can remove the opacity input to make the component more compact.
|
|
43
|
+
|
|
44
|
+
## React ColorPalette Component
|
|
45
|
+
|
|
46
|
+
[The KendoReact ColorPalette component](https://www.telerik.com/kendo-react-ui/components/inputs/colorpalette/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) can render all colors and color presets, making it ideal when we have to present the user with all available color options. Rendering a specific color preset is available out of the box. This can save time and code by enabling developers to set just the name of the color preset instead of setting each color individually.
|
|
47
|
+
|
|
48
|
+
## React ColorPicker Component
|
|
49
|
+
|
|
50
|
+
[The KendoReact ColorPicker component](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) provides users with an intuitive way of selecting and submitting color values. The KendoReact ColorPicker allows users to pick colors from either a color gradient, which provides an interactive way to select a color by dragging a pointer around a gradient, or a color palette which contains predefined colors in a palette. Primarily serving accessibility enablement the KendoReact ColorPicker will display the current contrast ratio and indicate whether the contrast color is compliant with an AA or AAA contrast ratio.
|
|
51
|
+
|
|
52
|
+
### Key Features
|
|
53
|
+
|
|
54
|
+
* **View Types**—The KendoReact ColorPicker allows users to pick colors from either a color gradient, which provides an interactive way to select a color by dragging a pointer around a gradient, or a color palette which contains predefined colors in a palette.
|
|
55
|
+
* **Contrast Color Tool**—Primarily serving accessibility enablement the KendoReact ColorPicker will display the current contrast ratio and indicate whether the contrast color is compliant with an AA or AAA contrast ratio.
|
|
56
|
+
|
|
57
|
+
## React Input Component
|
|
58
|
+
|
|
59
|
+
[The React Input](https://www.telerik.com/kendo-react-ui/components/inputs/input/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) component builds on top of a traditional HTML input element and provides additional KendoReact styling to fit with all KendoReact themes, as well as the ability to provide a label as a floating label.
|
|
60
|
+
|
|
61
|
+
## React MaskedTextBox Component
|
|
62
|
+
|
|
63
|
+
[The KendoReact MaskedTextBox component](https://www.telerik.com/kendo-react-ui/components/inputs/maskedtextbox/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) provide built-in masks to not only indicate to the user what kind of format is expected, but can also enforce this mask as the user is inserting data, then validate data when a form is submitted. The React MaskedTextBox supports a set of built-in masks like requiring digits, letters or special symbols and characters, but custom rules can be applied as well.
|
|
64
|
+
|
|
65
|
+
## React NumericTextBox Component
|
|
66
|
+
|
|
67
|
+
[The KendoReact NumericTextBox component](https://www.telerik.com/kendo-react-ui/components/inputs/numerictextbox/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) lets users edit and submit only numeric values by typing in the component’s input area, or by using the provided spin buttons to change the value. The React NumericTextBox increases or decreases its numerical value by a predefined step or default to one. The KendoReact NumericTextBox features a set of spin buttons, allowing users to increase or decrease the numeric value by clicking on the provided up or down arrows.
|
|
68
|
+
|
|
69
|
+
## React RadioButton Component
|
|
70
|
+
|
|
71
|
+
[The KendoReact RadioButton component](https://www.telerik.com/kendo-react-ui/components/inputs/radiobutton/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) allows developers to style React RadioButtons to fit the existing KendoReact theme and have a uniform look and feel throughout their entire application.
|
|
72
|
+
|
|
73
|
+
## React RadioButtonGroup Component
|
|
74
|
+
|
|
75
|
+
[The KendoReact RadioButtonGroup](https://www.telerik.com/kendo-react-ui/components/inputs/radiogroup/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) is a component that is used when two or more options need to be available from a RadioButton. Toggling between horizontal and vertical layouts for the KendoReact RadioButtonGroup component can be done by interacting with a single property.
|
|
76
|
+
|
|
77
|
+
## React RangeSlider Component
|
|
78
|
+
|
|
79
|
+
[The KendoReact RangeSlider component](https://www.telerik.com/kendo-react-ui/components/inputs/rangeslider/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) enables end-users to increase, decrease and select a predefined range of values by dragging left and right handles along a track. The React RangeSlider component has a single configuration option to help set the orientation to either vertical or horizontal orientations.
|
|
80
|
+
|
|
81
|
+
## React Slider Component
|
|
82
|
+
|
|
83
|
+
[The KendoReact Slider component](https://www.telerik.com/kendo-react-ui/components/inputs/slider/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) provides a sleek and intuitive UI interface for increasing, decreasing and selecting predefined values by dragging a handle along a track, or selecting a value by utilizing the provided side arrow buttons. Out of the box, the KendoReact Slider can render itself in both horizontal or vertical modes. Switching between the two is as simple as updating a single configuration option.
|
|
84
|
+
|
|
85
|
+
## React Switch Component
|
|
86
|
+
|
|
87
|
+
Popularized by iOS, Android, and other mobile operating systems, [the KendoReact Switch component](https://www.telerik.com/kendo-react-ui/components/inputs/switch/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) lets users toggle between two values: often checked and unchecked states.
|
|
88
|
+
|
|
89
|
+
## React TextArea Component
|
|
90
|
+
|
|
91
|
+
[The KendoReact TextArea component](https://www.telerik.com/kendo-react-ui/components/inputs/textarea/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) is suitable for any scenario that requires multiple lines of text. The TextArea (also known as Multi-line TextBox) component comes with a built-in character counter, which gives end-users a real-time indication of the number of characters currently typed. The dimensions of the React TextArea component can be defined in multiple ways. This includes setting the initial height of the TextArea component and controlling if the component should automatically resize based on the content entered by the user.
|
|
92
|
+
|
|
93
|
+
## React Inputs Components Library Features
|
|
34
94
|
|
|
35
95
|
Among the many features which the KendoReact Inputs deliver are:
|
|
36
96
|
|
|
97
|
+
* **Labels**—To make implementing the KendoReact Inputs as easy as possible, the React UI component comes with a built-in Label property, which can be placed before or after the actual element. For scenarios where the built-in label is not suitable, a custom label can be easily applied.
|
|
37
98
|
* **Setting the default value**—Easily configure the initial value that the Inputs render.
|
|
38
99
|
* **Form validation**—Validate input values, set validation requirements (such as minimum and maximum) and prevent the submission of forms which are in an invalid state.
|
|
39
100
|
* **Formats and placeholders**—Control the placeholders for the input field, including custom formats.
|
|
40
101
|
* **Controlled state**—Control the value Inputs.
|
|
41
102
|
* **Accessibility support**—The Inputs are compliant with WAI-ARIA and Section 508.
|
|
42
|
-
* [Theme support](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)—The KendoReact Inputs, as well as all
|
|
103
|
+
* [Theme support](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)—The KendoReact Inputs, as well as all 100+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines.
|
|
43
104
|
|
|
44
105
|
## Support Options
|
|
45
106
|
|
|
@@ -54,7 +115,7 @@ For any issues you might encounter while working with the KendoReact Inputs, use
|
|
|
54
115
|
* [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
55
116
|
* [Getting Started with the KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
56
117
|
* [API Reference of the KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
57
|
-
* [KendoReact Roadmap](https://www.telerik.com/kendo-react-ui/roadmap/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
118
|
+
* [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
58
119
|
* [Blogs](https://www.telerik.com/blogs/tag/kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
59
120
|
* [Demos, documentation, and component reference](https://www.telerik.com/kendo-react-ui/components/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
60
121
|
* [KendoReact pricing and licensing](https://www.telerik.com/kendo-react-ui/pricing/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|