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

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
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy