Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit a5bc94b

Browse files
adnanqaopsadnanqaops
committedMar 7, 2025·
added examples for different components
1 parent 1cbec0e commit a5bc94b

File tree

7 files changed

+924
-9
lines changed

7 files changed

+924
-9
lines changed
 

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx

Lines changed: 112 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,26 @@ export default function DividerExample() {
1717
description={trans("componentDoc.basicDemoDescription")}
1818
>
1919
<Example
20-
title=""
20+
title="Default Divider component"
2121
config={{
22-
style: {borderStyle: "solid", border: "#000",borderWidth: "2px"},
23-
}}
22+
style: {
23+
borderStyle: "solid",
24+
border: "#000",
25+
borderWidth: "2px"
26+
},
27+
}}
28+
compFactory={DividerComp}
29+
/>
30+
<Example
31+
title="Hiding Divider component"
32+
config={{
33+
style: {
34+
borderStyle: "solid",
35+
border: "#000",
36+
borderWidth: "2px",
37+
hidden: "true",
38+
},
39+
}}
2440
compFactory={DividerComp}
2541
/>
2642
</ExampleGroup>
@@ -58,7 +74,7 @@ export default function DividerExample() {
5874
/>
5975
</ExampleGroup>
6076

61-
<ExampleGroup title={trans("componentDoc.style")}>
77+
<ExampleGroup title="Styling Properties">
6278
<Example
6379
title="Dashed Border"
6480
nameMap={nameMap}
@@ -79,15 +95,107 @@ export default function DividerExample() {
7995
}}
8096
compFactory={DividerComp}
8197
/>
98+
<Example
99+
title="Border Width & Border Color"
100+
nameMap={nameMap}
101+
config={{
102+
title: "Divider",
103+
align: "center",
104+
style: {borderStyle: "solid", border: "#00FFFF",borderWidth: "10px"},
105+
}}
106+
compFactory={DividerComp}
107+
/>
108+
<Example
109+
title="Text Transform - Uppercase"
110+
nameMap={nameMap}
111+
config={{
112+
title: trans("componentDoc.imADivider"),
113+
align: "center",
114+
style: {borderStyle: "solid", border: "#000",borderWidth: "3px", textTransform: "uppercase"},
115+
}}
116+
compFactory={DividerComp}
117+
/>
118+
<Example
119+
title="Text Transform - Capitalize"
120+
nameMap={nameMap}
121+
config={{
122+
title: trans("componentDoc.imADivider"),
123+
align: "center",
124+
style: {borderStyle: "solid", border: "#000",borderWidth: "3px", textTransform: "capitalize"},
125+
}}
126+
compFactory={DividerComp}
127+
/>
128+
<Example
129+
title="Text Decoration - Underline"
130+
nameMap={nameMap}
131+
config={{
132+
title: trans("componentDoc.imADivider"),
133+
align: "center",
134+
style: {borderStyle: "solid", border: "#000",borderWidth: "3px", textDecoration: "underline"},
135+
}}
136+
compFactory={DividerComp}
137+
/>
138+
<Example
139+
title="Text Decoration - Line through"
140+
nameMap={nameMap}
141+
config={{
142+
title: trans("componentDoc.imADivider"),
143+
align: "center",
144+
style: {borderStyle: "solid", border: "#000",borderWidth: "3px", textDecoration: "line-through"},
145+
}}
146+
compFactory={DividerComp}
147+
/>
148+
<Example
149+
title="Other Text Properties"
150+
nameMap={nameMap}
151+
config={{
152+
title: trans("componentDoc.imADivider"),
153+
align: "center",
154+
style: {
155+
text: "#E67373",
156+
textSize: "10px",
157+
textWeight: "bold",
158+
fontFamily: "Courier New",
159+
fontStyle: "italic",
160+
border: "#000",
161+
borderWidth: "3px",
162+
borderStyle: "solid",
163+
}
164+
}}
165+
compFactory={DividerComp}
166+
/>
82167
<Example
83168
title="Vertical Divider"
84169
nameMap={nameMap}
170+
height={400}
85171
config={{
172+
title: trans("componentDoc.imADivider"),
173+
align: "center",
86174
style: {borderStyle: "solid", border: "#000",borderWidth: "2px"},
87175
type: true,
88176
}}
89177
compFactory={DividerComp}
90178
/>
179+
<Example
180+
title="Component Rotation - 90deg"
181+
nameMap={nameMap}
182+
config={{
183+
title: trans("componentDoc.imADivider"),
184+
align: "center",
185+
style: {borderStyle: "solid", border: "#000",borderWidth: "3px", rotation: "90deg"},
186+
}}
187+
compFactory={DividerComp}
188+
/>
189+
<Example
190+
title="Component Rotation - 180deg"
191+
nameMap={nameMap}
192+
config={{
193+
title: trans("componentDoc.imADivider"),
194+
align: "center",
195+
style: {borderStyle: "solid", border: "#000",borderWidth: "3px", rotation: "180deg"},
196+
}}
197+
compFactory={DividerComp}
198+
/>
91199
</ExampleGroup>
92200
</>
93201
);

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/progress.tsx

Lines changed: 136 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,35 @@ export default function ProgressExample() {
88
<>
99
<ExampleGroup
1010
title={trans("componentDoc.basicUsage")}
11-
description={trans("componentDoc.basicDemoDescription")}
11+
description="The Following Examples Show the Basic Usage of the Progress Bar Component."
1212
>
13+
<Example
14+
title="Default Component"
15+
config={{
16+
}}
17+
compFactory={ProgressComp}
18+
/>
19+
<Example
20+
title="Showing Progress Value"
21+
config={{
22+
value: "80",
23+
showInfo: true,
24+
}}
25+
compFactory={ProgressComp}
26+
/>
27+
</ExampleGroup>
28+
29+
<ExampleGroup
30+
title="Other Examples"
31+
description="The Following Examples Show the different examples on the Progress Bar Component."
32+
>
33+
<Example
34+
title="Hiding the Progress Bar component"
35+
config={{
36+
hidden: true,
37+
}}
38+
compFactory={ProgressComp}
39+
/>
1340
<Example
1441
title={trans("componentDoc.notComplete")}
1542
config={{
@@ -27,6 +54,114 @@ export default function ProgressExample() {
2754
compFactory={ProgressComp}
2855
/>
2956
</ExampleGroup>
57+
58+
<ExampleGroup
59+
title="Styling Properties"
60+
description="The Following Examples Show the different Styling properties on the Progress Bar Component."
61+
>
62+
<Example
63+
title="Margin & Padding"
64+
config={{
65+
showInfo: true,
66+
style:{
67+
"margin": "10px",
68+
"padding": "50px",
69+
},
70+
}}
71+
compFactory={ProgressComp}
72+
/>
73+
<Example
74+
title="Text Properties"
75+
config={{
76+
showInfo: true,
77+
style:{
78+
"text": "#E67373",
79+
"textSize": "25px",
80+
"textWeight": "bold",
81+
"fontStyle": "italic",
82+
},
83+
}}
84+
compFactory={ProgressComp}
85+
/>
86+
<Example
87+
title="Track Color"
88+
config={{
89+
showInfo: true,
90+
value: "20",
91+
style:{
92+
"track": "#E68E50",
93+
},
94+
}}
95+
compFactory={ProgressComp}
96+
/>
97+
<Example
98+
title="Fill Color"
99+
config={{
100+
showInfo: true,
101+
value: "70",
102+
style:{
103+
"fill": "#36b389",
104+
},
105+
}}
106+
compFactory={ProgressComp}
107+
/>
108+
<Example
109+
title="Success Color"
110+
config={{
111+
showInfo: true,
112+
value: "100",
113+
style:{
114+
"success": "#D7D9E0",
115+
},
116+
}}
117+
compFactory={ProgressComp}
118+
/>
119+
</ExampleGroup>
120+
121+
<ExampleGroup
122+
title="Animation Style"
123+
description="The Following Examples Show different animations on the Progress Bar Component."
124+
>
125+
<Example
126+
title="Bounce Animation"
127+
config={{
128+
showInfo: true,
129+
animationStyle: {
130+
"animation": "bounce",
131+
"animationDelay": "1s",
132+
"animationDuration": "3s",
133+
"animationIterationCount": "infinite"
134+
},
135+
}}
136+
compFactory={ProgressComp}
137+
/>
138+
<Example
139+
title="Swing Animation"
140+
config={{
141+
showInfo: true,
142+
animationStyle: {
143+
"animation": "swing",
144+
"animationDelay": "1s",
145+
"animationDuration": "3s",
146+
"animationIterationCount": "infinite"
147+
},
148+
}}
149+
compFactory={ProgressComp}
150+
/>
151+
<Example
152+
title="Tada Animation"
153+
config={{
154+
showInfo: true,
155+
animationStyle: {
156+
"animation": "tada",
157+
"animationDelay": "1s",
158+
"animationDuration": "3s",
159+
"animationIterationCount": "infinite"
160+
},
161+
}}
162+
compFactory={ProgressComp}
163+
/>
164+
</ExampleGroup>
30165
</>
31166
);
32167
}

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/progressCircle.tsx

Lines changed: 110 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,128 @@ export default function ProgressCircleExample() {
1212
>
1313
<Example
1414
title={trans("componentDoc.notComplete")}
15-
width={100}
16-
height={100}
1715
config={{
1816
value: "60",
1917
}}
2018
compFactory={ProgressCircleComp}
2119
/>
2220
<Example
2321
title={trans("componentDoc.complete")}
24-
width={100}
25-
height={100}
2622
config={{
2723
value: "100",
2824
}}
2925
compFactory={ProgressCircleComp}
3026
/>
27+
<Example
28+
title="Hiding the Progress Circle component"
29+
config={{
30+
hidden: true,
31+
}}
32+
compFactory={ProgressCircleComp}
33+
/>
34+
</ExampleGroup>
35+
36+
<ExampleGroup
37+
title="Styling Properties"
38+
description="The Following Examples Show the different Styling properties on the Progress Bar Component."
39+
>
40+
<Example
41+
title="Margin & Padding"
42+
config={{
43+
style:{
44+
"margin": "10px",
45+
"padding": "50px",
46+
},
47+
}}
48+
compFactory={ProgressCircleComp}
49+
/>
50+
<Example
51+
title="Text Properties"
52+
config={{
53+
style:{
54+
"text": "#E67373",
55+
"textSize": "50px",
56+
"textWeight": "bold",
57+
"fontStyle": "italic",
58+
},
59+
}}
60+
compFactory={ProgressCircleComp}
61+
/>
62+
<Example
63+
title="Track Color"
64+
config={{
65+
value: "20",
66+
style:{
67+
"track": "#E68E50",
68+
},
69+
}}
70+
compFactory={ProgressCircleComp}
71+
/>
72+
<Example
73+
title="Fill Color"
74+
config={{
75+
value: "70",
76+
style:{
77+
"fill": "#36b389",
78+
},
79+
}}
80+
compFactory={ProgressCircleComp}
81+
/>
82+
<Example
83+
title="Success Color"
84+
config={{
85+
value: "100",
86+
style:{
87+
"success": "#D7D9E0",
88+
},
89+
}}
90+
compFactory={ProgressCircleComp}
91+
/>
92+
</ExampleGroup>
93+
94+
<ExampleGroup
95+
title="Animation Style"
96+
description="The Following Examples Show different animations on the Progress Bar Component."
97+
>
98+
<Example
99+
title="Bounce Animation"
100+
config={{
101+
showInfo: true,
102+
animationStyle: {
103+
"animation": "bounce",
104+
"animationDelay": "1s",
105+
"animationDuration": "3s",
106+
"animationIterationCount": "infinite"
107+
},
108+
}}
109+
compFactory={ProgressCircleComp}
110+
/>
111+
<Example
112+
title="Swing Animation"
113+
config={{
114+
showInfo: true,
115+
animationStyle: {
116+
"animation": "swing",
117+
"animationDelay": "1s",
118+
"animationDuration": "3s",
119+
"animationIterationCount": "infinite"
120+
},
121+
}}
122+
compFactory={ProgressCircleComp}
123+
/>
124+
<Example
125+
title="Tada Animation"
126+
config={{
127+
showInfo: true,
128+
animationStyle: {
129+
"animation": "tada",
130+
"animationDelay": "1s",
131+
"animationDuration": "3s",
132+
"animationIterationCount": "infinite"
133+
},
134+
}}
135+
compFactory={ProgressCircleComp}
136+
/>
31137
</ExampleGroup>
32138
</>
33139
);

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/text.tsx

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,16 @@ export default function TextExample() {
3333
nameMap={nameMap}
3434
compFactory={TextComp}
3535
/>
36+
<Example
37+
title="Hiding the Text component"
38+
config={{
39+
text: trans("componentDoc.markdownDemoText"),
40+
type: "markdown",
41+
hidden: true,
42+
}}
43+
nameMap={nameMap}
44+
compFactory={TextComp}
45+
/>
3646
</ExampleGroup>
3747

3848
<ExampleGroup
@@ -80,6 +90,133 @@ export default function TextExample() {
8090
compFactory={TextComp}
8191
/>
8292
</ExampleGroup>
93+
94+
<ExampleGroup
95+
title="Styling Properties"
96+
description="The Following Examples Show the different Styling properties on the Progress Bar Component."
97+
>
98+
<Example
99+
title="Margin & Padding"
100+
width={500}
101+
config={{
102+
text: trans("componentDoc.markdownDemoText"),
103+
type: "markdown",
104+
style:{
105+
"margin": "10px",
106+
"padding": "10px",
107+
"border": "#222222",
108+
"borderStyle": "solid",
109+
"borderWidth": "2px",
110+
},
111+
}}
112+
compFactory={TextComp}
113+
/>
114+
<Example
115+
title="Text Properties"
116+
width={500}
117+
config={{
118+
text: trans("componentDoc.markdownDemoText"),
119+
type: "markdown",
120+
style:{
121+
"text": "#E67373",
122+
"textSize": "20px",
123+
"textWeight": "bold",
124+
"fontStyle": "italic",
125+
"fontFamily": "Courier New",
126+
},
127+
}}
128+
compFactory={TextComp}
129+
/>
130+
<Example
131+
title="Border Properties"
132+
width={500}
133+
config={{
134+
text: trans("componentDoc.markdownDemoText"),
135+
type: "markdown",
136+
style:{
137+
"borderStyle": "solid",
138+
"border": "#00FFFF",
139+
"borderWidth": "3px",
140+
"radius": "10px",
141+
"padding": "10px",
142+
},
143+
}}
144+
compFactory={TextComp}
145+
/>
146+
<Example
147+
title="Text Rotation - 90 deg"
148+
width={500}
149+
config={{
150+
text: trans("componentDoc.markdownDemoText"),
151+
type: "markdown",
152+
style:{
153+
"rotation": "90deg",
154+
},
155+
}}
156+
compFactory={TextComp}
157+
/>
158+
159+
<Example
160+
title="Text Rotation - 180 deg"
161+
width={500}
162+
config={{
163+
text: trans("componentDoc.markdownDemoText"),
164+
type: "markdown",
165+
style:{
166+
"rotation": "180deg",
167+
},
168+
}}
169+
compFactory={TextComp}
170+
/>
171+
</ExampleGroup>
172+
173+
<ExampleGroup
174+
title="Animation Style"
175+
description="The Following Examples Show different animations on the Progress Bar Component."
176+
>
177+
<Example
178+
title="Bounce Animation"
179+
config={{
180+
text: "### 👋 Hello! Welcome to Lowcoder",
181+
showInfo: true,
182+
animationStyle: {
183+
"animation": "bounce",
184+
"animationDelay": "1s",
185+
"animationDuration": "3s",
186+
"animationIterationCount": "infinite"
187+
},
188+
}}
189+
compFactory={TextComp}
190+
/>
191+
<Example
192+
title="Swing Animation"
193+
config={{
194+
text: "### 👋 Hello! Welcome to Lowcoder",
195+
showInfo: true,
196+
animationStyle: {
197+
"animation": "swing",
198+
"animationDelay": "1s",
199+
"animationDuration": "3s",
200+
"animationIterationCount": "infinite"
201+
},
202+
}}
203+
compFactory={TextComp}
204+
/>
205+
<Example
206+
title="Tada Animation"
207+
config={{
208+
text: "### 👋 Hello! Welcome to Lowcoder",
209+
showInfo: true,
210+
animationStyle: {
211+
"animation": "tada",
212+
"animationDelay": "1s",
213+
"animationDuration": "3s",
214+
"animationIterationCount": "infinite"
215+
},
216+
}}
217+
compFactory={TextComp}
218+
/>
219+
</ExampleGroup>
83220
</>
84221
);
85222
}

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/timeline.tsx

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,49 +10,129 @@ export default function TimeLineExample() {
1010
title={trans("componentDoc.basicUsage")}
1111
description="The Following Examples Show the Basic Usage of the TimeLine Component."
1212
>
13+
<Example
14+
title="Default Timeline Component"
15+
width={500}
16+
hideSettings={true}
17+
config={{
18+
}}
19+
compFactory={TimeLineComp}
20+
/>
1321
<Example
1422
title="Hiding the TimeLine Component"
23+
width={500}
1524
config={{
1625
hidden: true,
1726
}}
1827
compFactory={TimeLineComp}
1928
/>
29+
</ExampleGroup>
30+
31+
<ExampleGroup
32+
title="Layout Options"
33+
description="The Following Examples Show the different Layout options of the TimeLine Component."
34+
>
2035
<Example
2136
title="Display Order - Alternate Content Order"
37+
width={500}
2238
config={{
2339
mode: "alternate",
2440
}}
2541
compFactory={TimeLineComp}
2642
/>
2743
<Example
2844
title="Display Order - Content Right"
45+
width={500}
2946
config={{
3047
mode: "left",
3148
}}
3249
compFactory={TimeLineComp}
3350
/>
3451
<Example
3552
title="Display Order - Content Left"
53+
width={500}
3654
config={{
3755
mode: "right",
3856
}}
3957
compFactory={TimeLineComp}
4058
/>
4159
<Example
4260
title="Pending Node Text - Empty [ When Set, Then a Last Node With the Text and a Waiting Indicator Will Be Displayed. ]"
61+
width={500}
4362
config={{
4463
pending: "",
4564
}}
4665
compFactory={TimeLineComp}
4766
/>
4867
<Example
4968
title="Newest Event First"
69+
width={500}
5070
config={{
5171
reverse: true,
5272
}}
5373
compFactory={TimeLineComp}
5474
/>
5575
</ExampleGroup>
76+
77+
<ExampleGroup
78+
title="Styling Properties"
79+
description="The Following Examples Show the different Styling properties of the TimeLine Component."
80+
>
81+
<Example
82+
title="Background Color"
83+
width={500}
84+
config={{
85+
style:{
86+
"background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
87+
},
88+
}}
89+
compFactory={TimeLineComp}
90+
/>
91+
<Example
92+
title="Title and Sub-Title Color"
93+
width={500}
94+
config={{
95+
style:{
96+
"titleColor": "#E68E50",
97+
"subTitleColor": "#36B389",
98+
},
99+
}}
100+
compFactory={TimeLineComp}
101+
/>
102+
<Example
103+
title="Label Color"
104+
width={500}
105+
config={{
106+
style:{
107+
"labelColor": "#FF01B8",
108+
},
109+
}}
110+
compFactory={TimeLineComp}
111+
/>
112+
<Example
113+
title="Margin & Padding"
114+
width={500}
115+
config={{
116+
style:{
117+
"background": "linear-gradient(135deg, #00FFFF 0%, #00FFFF 100%)",
118+
"margin": "10px",
119+
"padding": "50px",
120+
},
121+
}}
122+
compFactory={TimeLineComp}
123+
/>
124+
<Example
125+
title="Border Radius"
126+
width={500}
127+
config={{
128+
style:{
129+
"background": "linear-gradient(135deg, #00FFFF 0%, #00FFFF 100%)",
130+
"radius": "15px"
131+
},
132+
}}
133+
compFactory={TimeLineComp}
134+
/>
135+
</ExampleGroup>
56136
</>
57137
);
58138
}

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Tree.tsx

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { TreeComp } from "comps/comps/treeComp/treeComp";
22
import { trans } from "i18n";
33
import Example from "../../common/Example";
44
import ExampleGroup from "../../common/ExampleGroup";
5+
import { InputFieldStyle } from "@lowcoder-ee/index.sdk";
56

67
export default function TreeExample() {
78
const blackListConfig: string[] = ["options.manual.manual"];
@@ -263,6 +264,180 @@ export default function TreeExample() {
263264
compFactory={TreeComp}
264265
/>
265266
</ExampleGroup>
267+
268+
<ExampleGroup
269+
title="Styling Properties"
270+
description="The Following Examples Show the different Styling properties on Tree Component."
271+
>
272+
<Example
273+
title="Background Color, Border Radius,Style,Width,Color"
274+
width={500}
275+
config={{
276+
defaultExpandAll: true,
277+
label: {
278+
text: "Select Your Place",
279+
position: "row",
280+
},
281+
style: {
282+
"background": "#00FFFF",
283+
"border": "#3377FF",
284+
"radius": "10px",
285+
"borderWidth": "3px",
286+
"borderStyle": "solid",
287+
},
288+
}}
289+
compFactory={TreeComp}
290+
/>
291+
<Example
292+
title="Margin & Padding"
293+
width={500}
294+
config={{
295+
defaultExpandAll: true,
296+
label: {
297+
text: "Select Your Place",
298+
position: "row",
299+
},
300+
style: {
301+
"background": "#00FFFF",
302+
"border": "#3377FF",
303+
"radius": "10px",
304+
"borderWidth": "3px",
305+
"margin": "10px",
306+
"padding": "10px",
307+
"borderStyle": "dashed",
308+
},
309+
}}
310+
compFactory={TreeComp}
311+
/>
312+
<Example
313+
title="Opacity - 0.2"
314+
width={500}
315+
config={{
316+
defaultExpandAll: true,
317+
label: {
318+
text: "Select Your Place",
319+
position: "row",
320+
},
321+
style: {
322+
"opacity": "0.2",
323+
},
324+
}}
325+
compFactory={TreeComp}
326+
/>
327+
<Example
328+
title="Opacity - 0.5"
329+
width={500}
330+
config={{
331+
defaultExpandAll: true,
332+
label: {
333+
text: "Select Your Place",
334+
position: "row",
335+
},
336+
style: {
337+
"opacity": "0.5",
338+
},
339+
}}
340+
compFactory={TreeComp}
341+
/>
342+
<Example
343+
title="Opacity - 0.7"
344+
width={500}
345+
config={{
346+
defaultExpandAll: true,
347+
label: {
348+
text: "Select Your Place",
349+
position: "row",
350+
},
351+
style: {
352+
"opacity": "0.7",
353+
},
354+
}}
355+
compFactory={TreeComp}
356+
/>
357+
<Example
358+
title="Opacity - 1"
359+
width={500}
360+
config={{
361+
defaultExpandAll: true,
362+
label: {
363+
text: "Select Your Place",
364+
position: "row",
365+
},
366+
style: {
367+
"opacity": "1",
368+
},
369+
}}
370+
compFactory={TreeComp}
371+
/>
372+
<Example
373+
title="Rotation - 90deg"
374+
width={500}
375+
config={{
376+
defaultExpandAll: true,
377+
label: {
378+
text: "Select Your Place",
379+
position: "row",
380+
},
381+
style: {
382+
"rotation": "90deg",
383+
},
384+
}}
385+
compFactory={TreeComp}
386+
/>
387+
<Example
388+
title="Label - Text Color, Size, Weight, Font family, Border properties"
389+
width={500}
390+
config={{
391+
defaultExpandAll: true,
392+
label: {
393+
text: "Select Your Place",
394+
position: "row",
395+
},
396+
labelStyle: {
397+
"margin": "5px",
398+
"padding": "5px",
399+
"label": "#3377FF",
400+
"textTransform": "Uppercase",
401+
"textDecoration": "underline",
402+
"textSize": "13px",
403+
"textWeight": "bold",
404+
"fontFamily": "Courier New",
405+
"fontStyle": "Italic",
406+
"border": "#36B389",
407+
"borderStyle": "solid",
408+
"borderWidth": "2px"
409+
},
410+
}}
411+
compFactory={TreeComp}
412+
/>
413+
<Example
414+
title="Input Field Style"
415+
width={500}
416+
config={{
417+
defaultExpandAll: true,
418+
label: {
419+
text: "Select Your Place",
420+
position: "row",
421+
},
422+
style: {
423+
"background": "#00FFFF",
424+
"border": "#3377FF",
425+
"radius": "10px",
426+
"borderWidth": "3px",
427+
"margin": "10px",
428+
"padding": "10px",
429+
"borderStyle": "solid",
430+
},
431+
inputFieldStyle: {
432+
"background": "#00BCA1",
433+
"border": "#013AFF",
434+
"radius": "10px",
435+
"text": "#222222"
436+
},
437+
}}
438+
compFactory={TreeComp}
439+
/>
440+
</ExampleGroup>
266441
</>
267442

268443
);

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/TreeSelect.tsx

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -294,6 +294,180 @@ export default function TreeSelectExample() {
294294
compFactory={TreeSelectComp}
295295
/>
296296
</ExampleGroup>
297+
298+
<ExampleGroup
299+
title="Styling Properties"
300+
description="The Following Examples Show the different Styling properties on Tree Select Component."
301+
>
302+
<Example
303+
title="Background Color, Border Radius,Style,Width,Color"
304+
width={500}
305+
config={{
306+
defaultExpandAll: true,
307+
label: {
308+
text: "Select Your Place",
309+
position: "row",
310+
},
311+
style: {
312+
"background": "#00FFFF",
313+
"border": "#3377FF",
314+
"radius": "10px",
315+
"borderWidth": "3px",
316+
"borderStyle": "solid",
317+
},
318+
}}
319+
compFactory={TreeSelectComp}
320+
/>
321+
<Example
322+
title="Margin & Padding"
323+
width={500}
324+
config={{
325+
defaultExpandAll: true,
326+
label: {
327+
text: "Select Your Place",
328+
position: "row",
329+
},
330+
style: {
331+
"background": "#00FFFF",
332+
"border": "#3377FF",
333+
"radius": "10px",
334+
"borderWidth": "3px",
335+
"margin": "10px",
336+
"padding": "10px",
337+
"borderStyle": "dashed",
338+
},
339+
}}
340+
compFactory={TreeSelectComp}
341+
/>
342+
<Example
343+
title="Opacity - 0.2"
344+
width={500}
345+
config={{
346+
defaultExpandAll: true,
347+
label: {
348+
text: "Select Your Place",
349+
position: "row",
350+
},
351+
style: {
352+
"opacity": "0.2",
353+
},
354+
}}
355+
compFactory={TreeSelectComp}
356+
/>
357+
<Example
358+
title="Opacity - 0.5"
359+
width={500}
360+
config={{
361+
defaultExpandAll: true,
362+
label: {
363+
text: "Select Your Place",
364+
position: "row",
365+
},
366+
style: {
367+
"opacity": "0.5",
368+
},
369+
}}
370+
compFactory={TreeSelectComp}
371+
/>
372+
<Example
373+
title="Opacity - 0.7"
374+
width={500}
375+
config={{
376+
defaultExpandAll: true,
377+
label: {
378+
text: "Select Your Place",
379+
position: "row",
380+
},
381+
style: {
382+
"opacity": "0.7",
383+
},
384+
}}
385+
compFactory={TreeSelectComp}
386+
/>
387+
<Example
388+
title="Opacity - 1"
389+
width={500}
390+
config={{
391+
defaultExpandAll: true,
392+
label: {
393+
text: "Select Your Place",
394+
position: "row",
395+
},
396+
style: {
397+
"opacity": "1",
398+
},
399+
}}
400+
compFactory={TreeSelectComp}
401+
/>
402+
<Example
403+
title="Rotation - 90deg"
404+
width={500}
405+
config={{
406+
defaultExpandAll: true,
407+
label: {
408+
text: "Select Your Place",
409+
position: "row",
410+
},
411+
style: {
412+
"rotation": "90deg",
413+
},
414+
}}
415+
compFactory={TreeSelectComp}
416+
/>
417+
<Example
418+
title="Label - Text Color, Size, Weight, Font family, Border properties"
419+
width={500}
420+
config={{
421+
defaultExpandAll: true,
422+
label: {
423+
text: "Select Your Place",
424+
position: "row",
425+
},
426+
labelStyle: {
427+
"margin": "5px",
428+
"padding": "5px",
429+
"label": "#3377FF",
430+
"textTransform": "Uppercase",
431+
"textDecoration": "underline",
432+
"textSize": "13px",
433+
"textWeight": "bold",
434+
"fontFamily": "Courier New",
435+
"fontStyle": "Italic",
436+
"border": "#36B389",
437+
"borderStyle": "solid",
438+
"borderWidth": "2px"
439+
},
440+
}}
441+
compFactory={TreeSelectComp}
442+
/>
443+
<Example
444+
title="Input Field Style"
445+
width={500}
446+
config={{
447+
defaultExpandAll: true,
448+
label: {
449+
text: "Select Your Place",
450+
position: "row",
451+
},
452+
style: {
453+
"background": "#00FFFF",
454+
"border": "#3377FF",
455+
"radius": "10px",
456+
"borderWidth": "3px",
457+
"margin": "10px",
458+
"padding": "10px",
459+
"borderStyle": "solid",
460+
},
461+
inputFieldStyle: {
462+
"background": "#00BCA1",
463+
"border": "#013AFF",
464+
"radius": "10px",
465+
"text": "#222222"
466+
},
467+
}}
468+
compFactory={TreeSelectComp}
469+
/>
470+
</ExampleGroup>
297471
</>
298472
);
299473
}

0 commit comments

Comments
 (0)
Please sign in to comment.