Skip to content

Commit 8fd5b06

Browse files
adnanqaopsadnanqaops
committed
added examples for different components
1 parent c8b9c18 commit 8fd5b06

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

+112-4
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

+136-1
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
}

0 commit comments

Comments
 (0)