-
Notifications
You must be signed in to change notification settings - Fork 0
/
properties.json
194 lines (192 loc) · 11.7 KB
/
properties.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
{
"HorizontalItemListDiv": {
"description": "This is a horizontal list of items. It is a flex container with flex-direction set to row.",
"info": "Supports children, Supports showBorder",
"margin": "string, optional, default=0",
"padding": "string, optional, default=1rem",
"gap": "string, optional, default=1rem",
"justify-content": "'flex-start'| 'flex-end'| 'center'| 'space-between'| 'space-around'| 'space-evenly', optional, default=center",
"align-items": "'flex-start'| 'flex-end'| 'center'| 'baseline'| 'stretch', optional, default=center",
"width": "string, optional, default=auto",
"height": "string, optional, default=auto",
"example": "<HorizontalItemListDiv showBorder>\n <div>Item 1</div>\n <div>Item 2</div>\n <div>Item 3</div>\n</HorizontalItemListDiv>"
},
"HorizontalItemListDivWithBorder": {
"description": "This is a horizontal list of items with customizable borders. It is a flex container with flex-direction set to row.",
"info": "Supports children",
"margin": "string, optional, default=1rem",
"padding": "string, optional, default=1rem",
"gap": "string, optional, default=1rem",
"justify-content": "'flex-start'| 'flex-end'| 'center'| 'space-between'| 'space-around'| 'space-evenly', optional, default=center",
"align-items": "'flex-start'| 'flex-end'| 'center'| 'baseline'| 'stretch', optional, default=center",
"borderColor": "string, optional, default=black",
"borderWidth": "string, optional, default=2px",
"borderRadius": "string, optional, default=10px",
"width": "string, optional, default=auto",
"height": "string, optional, default=auto",
"example": "<HorizontalItemListDivWithBorder>\n <div>Item 1</div>\n <div>Item 2</div>\n <div>Item 3</div>\n</HorizontalItemListDivWithBorder>"
},
"VerticalItemListDiv": {
"description": "This is a vertical list of items. It is a flex container with flex-direction set to column.",
"info": "Supports children, Supports showBorder",
"margin": "string, optional, default=0",
"padding": "string, optional, default=1rem",
"gap": "string, optional, default=1rem",
"width": "string, optional, default=auto",
"height": "string, optional, default=auto",
"justify-content": "'flex-start'| 'flex-end'| 'center'| 'space-between'| 'space-around'| 'space-evenly', optional, default=center",
"align-items": "'flex-start'| 'flex-end'| 'center'| 'baseline'| 'stretch', optional, default=center",
"example": "<VerticalItemListDiv showBorder>\n <div>Item 1</div>\n <div>Item 2</div>\n <div>Item 3</div>\n</VerticalItemListDiv>"
},
"VerticalItemListDivWithBorder": {
"description": "This is a vertical list of items with customizable borders. It is a flex container with flex-direction set to column.",
"info": "Supports children",
"margin": "string, optional, default=1rem",
"padding": "string, optional, default=1rem",
"gap": "string, optional, default=1rem",
"justify-content": "'flex-start'| 'flex-end'| 'center'| 'space-between'| 'space-around'| 'space-evenly', optional, default=center",
"align-items": "'flex-start'| 'flex-end'| 'center'| 'baseline'| 'stretch', optional, default=center",
"border-width": "string, optional, default=2px",
"border-color": "string, optional, default=grey",
"border-radius": "string, optional, default=10px",
"width": "string, optional, default=auto",
"height": "string, optional, default=auto",
"example": "<VerticalItemListDivWithBorder>\n <div>Item 1</div>\n <div>Item 2</div>\n <div>Item 3</div>\n</VerticalItemListDivWithBorder>"
},
"SimpleVerticalDropdown": {
"description": "This is a simple vertical dropdown component. It displays a list of items when clicked, with customizable border and arrow icons.",
"info": "Supports children, Supports showBorder",
"label": "string, required",
"border-radius": "string, optional, default=10px",
"unicode-arrow-up": "string, optional, default='\\u2B9D'",
"unicode-arrow-down": "string, optional, default='\\u2B9F'",
"items": "array of objects with properties: alt (string), label (string), onclick (function), optional",
"bgColor": "string, optional, default=7553BB",
"fontSize": "string, optional, default=1rem",
"color": "string, optional, default='white'",
"example": ""
},
"UploadFileWithPreview": {
"description": "This component allows users to upload a file and preview its text content. It supports optional border display and resizable text area.",
"info": "Supports file upload and text preview",
"showBorder": "boolean, optional, default=false",
"reseizable": "boolean, optional, default=false",
"example": "<UploadFileWithPreview showBorder reseizable />"
},
"SimpleBigTextInputWithRequired": {
"description": "This component is a large text input field with various customization options. It supports optional borders, custom dimensions, font size, and error handling.",
"info": "Supports text input with customizable appearance and validation",
"showBorder": "boolean, optional, default=false",
"width": "string, optional, default='88%'",
"height": "string, optional, default='10rem'",
"placeholder": "string, optional, default='Type here...'",
"label": "string, optional",
"fontSize": "string, optional, default='1rem'",
"borderRadius": "string, optional, default='1rem'",
"required": "boolean, optional, default=false",
"hasError": "boolean, optional, default=false",
"errorMessage": "string, optional",
"overflow": "'auto' | 'hidden' | 'visible' | 'scroll' | 'inherit' | 'initial' | 'unset', optional, default='auto'",
"maxLength": "number, optional, default=1000",
"onTextChange": "function, optional",
"labelAlign": "'start' | 'center' | 'end', optional, default='left'",
"bgColor": "string, optional, default='RGBA(117, 83, 187, 0.3)'",
"color":"string, optional, default='black'",
"example": "<SimpleBigTextInputWithRequired showBorder width='90%' height='15rem' placeholder='Enter your text here...'\n label='Your Text' required errorMessage='This field is required.' />"
},
"SimpleInputWithRequired": {
"description": "This component is a simple input field with various customization options. It supports optional borders, custom width, font size, and error handling.",
"info": "Supports text input with customizable appearance and validation",
"showBorder": "boolean, optional, default=false",
"width": "string, optional, default='88%'",
"placeholder": "string, optional, default='Type here...'",
"label": "string, optional",
"fontSize": "string, optional, default='1rem'",
"borderRadius": "string, optional, default='1rem'",
"required": "boolean, optional, default=false",
"hasError": "boolean, optional, default=false",
"errorMessage": "string, optional",
"maxLength": "number, optional, default=1000",
"onTextChange": "function, optional",
"labelAlign": "'start' | 'center' | 'end', optional, default='left'",
"example": "<SimpleInputWithRequired showBorder width='90%' placeholder='Enter your text here...' label='Your Text' required errorMessage='This field is required.' />"
},
"NavBarNormal1": {
"description": "This component represents a normal navigation bar with customizable items.",
"info": "Supports navigation items with images, Supports border customization, Supports background blur effect",
"height": "string, optional",
"bgColor": "string, optional",
"items": "array of objects with properties: src (string, required), alt (string), hover (boolean), onclick (function)",
"itemSize": "string, optional",
"disableBorder": "boolean, optional, default=false",
"borderColor": "string, optional",
"borderWidth": "string, optional",
"bgBlur": "string, optional",
"justifyContent": "'center' | 'space-between', optional",
"calcScrollBar": "boolean, optional",
"example": "<NavBarNormal1 bgColor='blue' height='50px' items={[{src: 'img1.png', alt: 'Image 1'}, {src: 'img2.png', alt: 'Image 2'}]} />"
},
"NavBarWithComponents1": {
"description": "This component represents a navigation bar with customizable items using child components.",
"info": "Supports navigation items as child components, Supports border customization, Supports background blur effect",
"height": "string, optional",
"bgColor": "string, optional",
"itemSize": "string, optional",
"disableBorder": "boolean, optional, default=false",
"borderColor": "string, optional",
"borderWidth": "string, optional",
"bgBlur": "string, optional",
"justifyContent": "'center' | 'space-between', optional",
"calcScrollBar": "boolean, optional",
"children": "ReactNode, optional",
"example": "<NavBarWithComponents1 bgColor='blue' height='50px'>\n <img src='img1.png' alt='Image 1' />\n <img src='img2.png' alt='Image 2' />\n</NavBarWithComponents1>"
},
"SimpleScrollBar": {
"description": "This component creates a simple custom scrollbar using CSS.",
"info": "Supports customization of scrollbar color, background color, hover color, width, border radius, and background shadow",
"color": "string, optional, default='#888'",
"backGroundColor": "string, optional, default='#555'",
"hoverColor": "string, optional",
"width": "string, optional, default='10px'",
"borderRadius": "string, optional, default='10px'",
"backGroundShadow": "string, optional, default='grey'",
"example": "<SimpleScrollBar color='red' backGroundColor='white' hoverColor='black' width='15px' borderRadius='5px' backGroundShadow='rgba(0, 0, 0, 0.1)' />"
},
"SimpleButton1": {
"description": "This component is a customizable button with various styling options and an onClick event handler.",
"info": "Supports customizable appearance and behavior for a button",
"label": "string, optional, default='Click me!'",
"width": "string, optional, default='200px'",
"height": "string, optional, default='50px'",
"bgColor": "string, optional, default='#7553BB'",
"borderRadius": "string, optional, default='10px'",
"borderWidth": "string, optional",
"borderColor": "string, optional",
"boxShadowColor": "string, optional, default='#7553BB'",
"color": "string, optional, default='white'",
"fontSize": "string, optional, default='1.2em'",
"hoverBgColor": "string, optional",
"transformScale": "number, optional, default=1.1",
"transitionTime": "string, optional, default='0.3s'",
"onClick": "function, optional, default=console.log('Button clicked!')",
"example": "<SimpleButton1\n label='Submit'\n width='150px'\n height='40px'\n bgColor='#4CAF50'\n borderRadius='5px'\n borderWidth='2px'\n borderColor='#4CAF50'\n boxShadowColor='#888888'\n color='white'\n fontSize='1em'\n hoverBgColor='#45a049'\n transformScale={1.05}\n transitionTime='0.2s'\n onClick={() => alert('Button clicked!')}\n />"
},
"SimpleSmallPopUp": {
"description": "This component represents a small popup with customizable content and appearance.",
"info": "Supports display and customization of a small popup with optional auto-hide feature",
"label": "string, required",
"width": "string, optional, default='200px'",
"height": "string, optional, default='50px'",
"bgColor": "string, optional, default='grey'",
"borderRadius": "string, optional, default='1rem'",
"borderWidth": "string, optional",
"borderColor": "string, optional",
"color": "string, optional, default='white'",
"fontSize": "string, optional, default='1.2rem'",
"top": "string, optional, default='200px'",
"show": "boolean, optional, default=false",
"onClose": "function, required",
"stayTime": "number, optional, default=3000",
"example": "<SimpleSmallPopUp\n label='This is a PopUp!'\n show={showPopUp}\n onClose={() => setShowPopUp(false)}\n />"
}
}