Skip to content

Commit 36c69ee

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1600 from lowcoder-org/doc/existing_components
added examples for multiple components
2 parents f700230 + 131a2e2 commit 36c69ee

31 files changed

+11659
-97
lines changed

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

Lines changed: 115 additions & 4 deletions
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

Lines changed: 175 additions & 0 deletions
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)
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