Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 36c69ee

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

File tree

31 files changed

+11659
-97
lines changed

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)

AltStyle によって変換されたページ (->オリジナル) /