Skip to content

Commit 71f65b2

Browse files
adnanqaopsadnanqaops
committed
added examples for multiple components
1 parent 57e34bb commit 71f65b2

31 files changed

+11659
-97
lines changed

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/LinkButton.tsx

+115-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default function LinkExample() {
88
<>
99
<ExampleGroup
1010
title={trans("componentDoc.basicUsage")}
11-
description={trans("componentDoc.basicDemoDescription")}
11+
description="The Following Examples Show the Basic Usage of the Link Component."
1212
>
1313
<Example
1414
title={trans("componentDoc.default")}
@@ -25,12 +25,123 @@ export default function LinkExample() {
2525
config={{ text: trans("componentDoc.link"), disabled: true }}
2626
compFactory={LinkComp}
2727
/>
28+
<Example
29+
title="Hiding the Link component"
30+
config={{ text: trans("componentDoc.link"), hidden: true }}
31+
compFactory={LinkComp}
32+
/>
2833
</ExampleGroup>
29-
<ExampleGroup title={trans("componentDoc.style")}>
34+
35+
<ExampleGroup
36+
title="Layout Options"
37+
description="The Following Examples Show the Layout Options of the Link Component."
38+
>
39+
<Example
40+
title="Prefix Icon"
41+
config={{
42+
prefixIcon: "/icon:solid/arrow-down-wide-short",
43+
}}
44+
compFactory={LinkComp}
45+
/>
46+
<Example
47+
title="Suffix Icon"
48+
config={{
49+
suffixIcon: "/icon:solid/arrow-up-wide-short",
50+
}}
51+
compFactory={LinkComp}
52+
/>
53+
<Example
54+
title="Prefix & Suffix Icon"
55+
config={{
56+
prefixIcon: "/icon:solid/arrow-down-wide-short",
57+
suffixIcon: "/icon:solid/arrow-up-wide-short",
58+
}}
59+
compFactory={LinkComp}
60+
/>
61+
</ExampleGroup>
62+
63+
<ExampleGroup
64+
title="Styling Properties"
65+
description="The Following Examples Show the different Styling properties on the Link Component."
66+
>
67+
<Example
68+
title="Background Color, Border Radius,Style,Width,Color"
69+
config={{
70+
style: {
71+
"background": "#00FFFF",
72+
"border": "#3377FF",
73+
"radius": "10px",
74+
"borderWidth": "3px",
75+
"borderStyle": "solid",
76+
"hoverText": "#36B389",
77+
"activeText": "#222222",
78+
},
79+
}}
80+
compFactory={LinkComp}
81+
/>
82+
<Example
83+
title="Margin & Padding"
84+
config={{
85+
style: {
86+
"background": "#00FFFF",
87+
"border": "#3377FF",
88+
"radius": "10px",
89+
"borderWidth": "3px",
90+
"margin": "10px",
91+
"padding": "10px",
92+
"borderStyle": "dashed",
93+
},
94+
}}
95+
compFactory={LinkComp}
96+
/>
97+
<Example
98+
title="Rotation - 90deg"
99+
config={{
100+
style: {
101+
"rotation": "90deg",
102+
},
103+
}}
104+
compFactory={LinkComp}
105+
/>
106+
</ExampleGroup>
107+
108+
<ExampleGroup
109+
title="Animation Style"
110+
description="The Following Examples Show different animations on the Link Component."
111+
>
112+
<Example
113+
title="Bounce Animation"
114+
config={{
115+
animationStyle: {
116+
"animation": "bounce",
117+
"animationDelay": "1s",
118+
"animationDuration": "3s",
119+
"animationIterationCount": "infinite",
120+
},
121+
}}
122+
compFactory={LinkComp}
123+
/>
124+
<Example
125+
title="Swing Animation"
126+
config={{
127+
animationStyle: {
128+
"animation": "swing",
129+
"animationDelay": "1s",
130+
"animationDuration": "3s",
131+
"animationIterationCount": "infinite",
132+
},
133+
}}
134+
compFactory={LinkComp}
135+
/>
30136
<Example
31-
title={trans("componentDoc.customAppearance")}
137+
title="Tada Animation"
32138
config={{
33-
style: { color: "#A7392F" },
139+
animationStyle: {
140+
"animation": "tada",
141+
"animationDelay": "1s",
142+
"animationDuration": "3s",
143+
"animationIterationCount": "infinite",
144+
},
34145
}}
35146
compFactory={LinkComp}
36147
/>

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx

+175
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,15 @@ export default function CalendarExample() {
4545
}}
4646
compFactory={ChartCompWithDefault}
4747
/>
48+
<Example
49+
title="Non-Editable - New Events can't be added to a Calendar"
50+
width={700}
51+
height={600}
52+
config={{
53+
editable: false,
54+
}}
55+
compFactory={ChartCompWithDefault}
56+
/>
4857
<Example
4958
title="Hiding Event Times"
5059
width={700}
@@ -169,6 +178,172 @@ export default function CalendarExample() {
169178
compFactory={ChartCompWithDefault}
170179
/>
171180
</ExampleGroup>
181+
182+
<ExampleGroup
183+
title="Styling Properties"
184+
description="The Following Examples Show the different Styling properties of the Calendar Component."
185+
>
186+
<Example
187+
title="Background Color"
188+
width={700}
189+
height={600}
190+
config={{
191+
style: {
192+
"background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
193+
},
194+
}}
195+
compFactory={ChartCompWithDefault}
196+
/>
197+
<Example
198+
title="Border Properties : Color and Radius"
199+
width={700}
200+
height={600}
201+
config={{
202+
style: {
203+
"border": "#053AF9",
204+
"radius": "10px",
205+
},
206+
}}
207+
compFactory={ChartCompWithDefault}
208+
/>
209+
<Example
210+
title="Text Color"
211+
width={700}
212+
height={600}
213+
config={{
214+
style: {
215+
"text": "#EF0404",
216+
},
217+
}}
218+
compFactory={ChartCompWithDefault}
219+
/>
220+
<Example
221+
title="Button Background Color & Text Color"
222+
width={700}
223+
height={600}
224+
config={{
225+
style: {
226+
"headerBtnBackground": "#36B389",
227+
"btnText": "#080808",
228+
},
229+
}}
230+
compFactory={ChartCompWithDefault}
231+
/>
232+
<Example
233+
title="Title Color"
234+
width={700}
235+
height={600}
236+
config={{
237+
style: {
238+
"title": "#FFA608",
239+
},
240+
}}
241+
compFactory={ChartCompWithDefault}
242+
/>
243+
<Example
244+
title="Selected Background Color - Select any time slot to see the Color"
245+
width={700}
246+
height={600}
247+
config={{
248+
style: {
249+
"selectBackground": "#FFA608",
250+
},
251+
}}
252+
compFactory={ChartCompWithDefault}
253+
/>
254+
</ExampleGroup>
255+
256+
<ExampleGroup
257+
title="Modal Style"
258+
description="The Following Examples Show the different Styling properties on the Modal of the Calendar Component."
259+
>
260+
<Example
261+
title="Background Color"
262+
width={700}
263+
height={600}
264+
config={{
265+
modalStyle: {
266+
"background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
267+
},
268+
}}
269+
compFactory={ChartCompWithDefault}
270+
/>
271+
<Example
272+
title="Border Properties - Color, Width & Style"
273+
width={700}
274+
height={600}
275+
config={{
276+
modalStyle: {
277+
"background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
278+
"border": "#053CFF",
279+
"borderWidth": "2px",
280+
"borderStyle": "dashed",
281+
},
282+
}}
283+
compFactory={ChartCompWithDefault}
284+
/>
285+
<Example
286+
title="Input Text Color & Input fields Background Color"
287+
width={700}
288+
height={600}
289+
config={{
290+
modalStyle: {
291+
"background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
292+
"text": "#FFFFFF",
293+
"labelBackground": "#0702F2"
294+
},
295+
}}
296+
compFactory={ChartCompWithDefault}
297+
/>
298+
</ExampleGroup>
299+
300+
<ExampleGroup
301+
title="Animation Style"
302+
description="The Following Examples Show different Animation Styles on the Calendar Component."
303+
>
304+
<Example
305+
title="Bounce Animation"
306+
width={700}
307+
height={600}
308+
config={{
309+
animationStyle: {
310+
"animation": "bounce",
311+
"animationDelay": "1s",
312+
"animationDuration": "3s",
313+
"animationIterationCount": "infinite"
314+
},
315+
}}
316+
compFactory={ChartCompWithDefault}
317+
/>
318+
<Example
319+
title="Swing Animation"
320+
width={700}
321+
height={600}
322+
config={{
323+
animationStyle: {
324+
"animation": "swing",
325+
"animationDelay": "1s",
326+
"animationDuration": "3s",
327+
"animationIterationCount": "infinite"
328+
},
329+
}}
330+
compFactory={ChartCompWithDefault}
331+
/>
332+
<Example
333+
title="Tada Animation"
334+
width={700}
335+
height={600}
336+
config={{
337+
animationStyle: {
338+
"animation": "tada",
339+
"animationDelay": "1s",
340+
"animationDuration": "3s",
341+
"animationIterationCount": "infinite"
342+
},
343+
}}
344+
compFactory={ChartCompWithDefault}
345+
/>
346+
</ExampleGroup>
172347
</>
173348
);
174349
}

0 commit comments

Comments
 (0)