You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/base/README.md
+7-4Lines changed: 7 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,15 +10,15 @@ The `@syncfusion/react-base` package is a foundational library for Syncfusion's
10
10
-`Localization`: Adaptable content for region-specific requirements.
11
11
-`Right-to-Left (RTL)`: Built-in support for RTL languages like Arabic and Hebrew.
12
12
13
-
## Installation
13
+
**Setup**
14
14
15
15
To install `@syncfusion/react-base` and its dependencies, run the following command:
16
16
17
17
```sh
18
18
npm install @syncfusion/react-base
19
19
```
20
20
21
-
## Usage
21
+
**Usage**
22
22
23
23
This package serves as a dependency for other Syncfusion® React components. Import the necessary utilities or providers as needed in your React application. For example:
24
24
@@ -31,7 +31,10 @@ import { Button } from '@syncfusion/react-buttons';
31
31
</Provider>
32
32
```
33
33
34
-
Refer to the [Syncfusion® Documentation](https://react.syncfusion.com/overview/introduction) for detailed usage instructions and examples.
The Syncfusion React Buttons package provides a feature-rich collection of UI components, including Button, CheckBox, RadioButton, Switch, Chip, ChipList, and Floating Action Button, for building modern, interactive React applications.
4
4
5
-
The React Button package includes the following list of components.
5
+
## Setup
6
6
7
-
### React Button
7
+
To install `buttons` and its dependent packages, use the following command,
8
8
9
-
The Button component is designed to create highly customizable and interactive button elements with a variety of styling and functional options. It allows for tailored interactions through different configurations such as size, color, icon positioning, and toggle capability.
9
+
```sh
10
+
npm install @syncfusion/react-buttons
11
+
```
10
12
11
-
Explore the demo [here](https://react.syncfusion.com/button).
13
+
## React Button
14
+
15
+
The Button component is designed to create highly customizable and interactive button elements with a variety of styling and functional options. It allows for tailored interactions through different configurations such as size, color, icon positioning, and toggle capability.
12
16
13
17
**Key features**
14
18
@@ -24,11 +28,26 @@ Explore the demo [here](https://react.syncfusion.com/button).
24
28
25
29
-**Selection Management:** Include prop configurations to set initial states, making it simple to handle selection states, especially useful for toggle buttons.
26
30
27
-
### React Checkbox
31
+
**Usage**
28
32
29
-
The Checkbox component offers a flexible and user-friendly way to allow users to make binary selections. It supports various states and configurations to accommodate different use cases in applications.
The Checkbox component offers a flexible and user-friendly way to allow users to make binary selections. It supports various states and configurations to accommodate different use cases in applications.
32
51
33
52
**Key features**
34
53
@@ -38,11 +57,26 @@ Explore the demo [here](https://react.syncfusion.com/checkbox).
38
57
39
58
-**Label Positioning:** Configure the label placement with the `labelPlacement` prop, choosing whether the label appears before or after the Checkbox.
40
59
41
-
### React Chip
60
+
**Usage**
42
61
43
-
The Chip component represents information in a compact form, such as entity attribute, text, or action. It provides a versatile way to display content in a contained, interactive element.
The Chip component represents information in a compact form, such as entity attribute, text, or action. It provides a versatile way to display content in a contained, interactive element.
46
80
47
81
**Key features**
48
82
@@ -52,11 +86,26 @@ Explore the demo [here](https://react.syncfusion.com/chip).
52
86
53
87
-**Icons and Avatars:** Enhance visual representation with leading icons, trailing icons, or avatars to provide additional context.
54
88
55
-
### React ChipList
89
+
**Usage**
56
90
57
-
The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form. It provides a flexible way to manage and interact with a group of chip elements.
91
+
```tsx
92
+
import { Chip } from'@syncfusion/react-buttons';
93
+
94
+
exportdefaultfunction App() {
95
+
return (
96
+
<Chip>Anne</Chip>
97
+
);
98
+
}
99
+
```
100
+
101
+
**Resources**
58
102
59
-
Explore the demo [here](https://react.syncfusion.com/chiplist).
The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form. It provides a flexible way to manage and interact with a group of chip elements.
60
109
61
110
**Key features**
62
111
@@ -70,11 +119,26 @@ Explore the demo [here](https://react.syncfusion.com/chiplist).
70
119
71
120
-**Controlled & Uncontrolled Modes:** Supports both controlled and uncontrolled component patterns for selection and deletion.
72
121
73
-
### React Floating Action Button
122
+
**Usage**
74
123
75
-
The Floating Action Button (FAB) component provides a prominent primary action within an application interface, positioned for high visibility and customizable with various styling options.
The Floating Action Button (FAB) component provides a prominent primary action within an application interface, positioned for high visibility and customizable with various styling options.
78
142
79
143
**Key features**
80
144
@@ -90,53 +154,53 @@ Explore the demo [here](https://react.syncfusion.com/floating-action-button).
90
154
91
155
-**Toggle Functionality:** Activate toggle behavior for the FAB to allow it to switch states on each user interaction, which can be useful for certain UI scenarios.
92
156
93
-
### React RadioButton
157
+
**Usage**
94
158
95
-
The RadioButton component enables users to select a single option from a group, offering a clear circular interface for making selections. It is a simple and efficient way to present mutually exclusive choices to users.
96
-
97
-
Explore the demo [here](https://react.syncfusion.com/radio-button).
98
-
99
-
**Key features**
100
-
101
-
-**Selection State:** Easily configure the RadioButton to be in a checked or unchecked state, indicating selected or unselected options within a group.
102
-
103
-
-**Label Customization:** The RadioButton can be accompanied by a text label to describe its function, which helps users understand the purpose of the radio selection.
-**Label Positioning:** Flexibly position the label relative to the RadioButton with options available for placing it before or after the button, enhancing UI layout consistency.
-**Form Integration:** The value attribute of the RadioButton can be included as part of form data submitted to the server, facilitating efficient data processing.
The Switch component is a toggle interface offering a binary decision between on and off states, visually represented with an optional label for clarity. Its intuitive design makes it ideal for user interactions requiring a straightforward choice.
174
+
## React RadioButton
112
175
113
-
Explore the demo [here](https://react.syncfusion.com/switch).
176
+
The RadioButton component enables users to select a single option from a group, offering a clear circular interface for making selections. It is a simple and efficient way to present mutually exclusive choices to users.
114
177
115
178
**Key features**
116
179
117
-
-**State Control:** Easily configure the switch to be in a checked (on) or unchecked (off) state, providing an immediate visual cue of its current position to users.
180
+
-**Selection State:** Easily configure the RadioButton to be in a checked or unchecked state, indicating selected or unselected options within a group.
118
181
119
-
-**Label Customization:**Customize the on and off labels to provide additional context for users, clarifying what each state signifies within the application's workflow.
182
+
-**Label Customization:**The RadioButton can be accompanied by a text label to describe its function, which helps users understand the purpose of the radio selection.
120
183
121
-
-**Size Options:**Adapt the size of the switch to fit various UI designs with available size options such as 'small', 'medium' and 'bigger', ensuring seamless integration with different interfaces.
184
+
-**Label Positioning:**Flexibly position the label relative to the RadioButton with options available for placing it before or after the button, enhancing UI layout consistency.
122
185
123
-
-**Form Integration:**Utilize the switch within forms by setting name and value attributes, ensuring that user selections are included in form submissions for backend processing.
186
+
-**Form Integration:**The value attribute of the RadioButton can be included as part of form data submitted to the server, facilitating efficient data processing.
Copy file name to clipboardExpand all lines: components/buttons/package.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
{
2
2
"name": "@syncfusion/react-buttons",
3
3
"version": "31.1.17",
4
-
"description": "A package of feature-rich React components such as Button, CheckBoxand RadioButton.",
4
+
"description": "Syncfusion React Buttons package is a feature-rich collection of UI components including Button, CheckBox, RadioButton, Switch, Chip, and more for building modern, interactive React applications.",
The React Calendar package includes the following list of components.
6
-
7
-
### React Calendar
8
-
1
+
# Syncfusion React Calendar Components
2
+
3
+
The Syncfusion React Calendar components for managing date and time with features like date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.
4
+
5
+
## React Calendar
6
+
9
7
The Calendar component provides a versatile and interactive date selection interface with support for multiple views, customizations, and selection modes. It is designed to handle a wide range of scheduling and planning use cases.
10
-
11
-
Explore the demo [here](https://react.syncfusion.com/calendar).
12
-
8
+
13
9
**Key features**
14
-
10
+
15
11
-**View Modes:** Switch between month, year, and decade views using the start and depth properties to control the initial view and navigation depth.
16
-
12
+
17
13
-**Date Range Control:** Restrict selectable dates using minDate and maxDate to ensure users can only choose valid dates within a defined range.
18
-
14
+
19
15
-**Custom Cell Templates:** Use the cellTemplate property to customize the appearance of specific dates, including disabling dates to prevent selection.
20
-
16
+
21
17
-**Week Number Display:** Enable the weekNumber property to show week numbers alongside calendar dates for better context in scheduling.
22
-
18
+
23
19
-**Multi-Date Selection:** Activate the multiSelect property to allow users to select multiple non-consecutive dates, ideal for marking events or selecting custom date ranges.
24
-
25
-
###React DatePicker
26
-
20
+
21
+
## React DatePicker
22
+
27
23
The DatePicker component offers a streamlined and customizable interface for selecting dates, supporting various formats, view modes, and styling options. It is ideal for forms, scheduling tools, and any application requiring precise date input.
28
-
29
-
Explore the demo [here](https://react.syncfusion.com/date-picker).
30
-
24
+
31
25
**Key features**
32
-
26
+
33
27
-**Custom Date Formats:** Display and receive date values in formats that suit your application using the format property, which supports standard date format patterns.
34
-
28
+
35
29
-**Read-Only Mode:** Prevent user edits while displaying a selected date by enabling the readOnly property—useful for forms or scenarios where the date is system-generated.
36
-
30
+
37
31
-**View Modes:** Navigate through Month, Year, and Decade views to provide flexible date selection experiences.
38
-
32
+
39
33
-**Custom Cell Templates:** Highlight important dates, events, or special occasions using the cellTemplate property to apply custom styling, icons, or indicators.
Product support is available through following mediums.
59
-
53
+
60
54
*[Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
61
55
* Live chat
62
-
56
+
63
57
## Changelog
58
+
64
59
Check the changelog [here](https://github.com/syncfusion/react-ui-components/blob/master/components/calendars/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
65
-
60
+
66
61
## License and copyright
67
-
62
+
68
63
> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
69
-
64
+
70
65
> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
71
-
72
-
See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info.
0 commit comments