Skip to content

Commit 83eec96

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1570 from lowcoder-org/doc/existing_components
added examples for different components
2 parents 9c574d5 + bcd7caf commit 83eec96

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+6866
-101
lines changed

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

+40
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,24 @@ export default function ButtonExample() {
2828
config={{ type: "default", text: trans("componentDoc.submit"), disabled: true }}
2929
compFactory={ButtonComp}
3030
/>
31+
<Example
32+
title="Hiding the Button component"
33+
width={120}
34+
config={{ type: "default", text: trans("componentDoc.submit"), hidden: true }}
35+
compFactory={ButtonComp}
36+
/>
37+
<Example
38+
title="Prefix Icon"
39+
width={120}
40+
config={{ type: "default", text: trans("componentDoc.submit"), prefixIcon: "/icon:solid/book", }}
41+
compFactory={ButtonComp}
42+
/>
43+
<Example
44+
title="Suffix Icon"
45+
width={120}
46+
config={{ type: "default", text: trans("componentDoc.submit"), suffixIcon : "/icon:solid/book-open-reader", }}
47+
compFactory={ButtonComp}
48+
/>
3149
</ExampleGroup>
3250

3351
<ExampleGroup title={trans("componentDoc.style")}>
@@ -55,6 +73,28 @@ export default function ButtonExample() {
5573
}}
5674
compFactory={ButtonComp}
5775
/>
76+
<Example
77+
title="Custom Styling"
78+
width={180}
79+
config={{
80+
style: {
81+
"background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
82+
"padding": "10px",
83+
"text": "#222222",
84+
"textTransform": "Uppercase",
85+
"textDecoration": "underline",
86+
"textSize": "16px",
87+
"textWeight": "bold",
88+
"fontFamily": "Courier New",
89+
"fontStyle": "italic",
90+
"border": "#222222",
91+
"borderStyle": "solid",
92+
"radius": "10px",
93+
"borderWidth": "2px"
94+
},
95+
}}
96+
compFactory={ButtonComp}
97+
/>
5898
</ExampleGroup>
5999
</>
60100
);

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

+90-3
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,11 @@ export default function DropdownExample() {
3232
};
3333
return (
3434
<>
35+
3536
<ExampleGroup
3637
title={trans("componentDoc.basicUsage")}
37-
description={trans("componentDoc.basicDemoDescription")}
38+
description="The Following Examples Show the Basic Usage of the Dropdown Component."
39+
3840
>
3941
<Example
4042
title={trans("componentDoc.default")}
@@ -55,14 +57,99 @@ export default function DropdownExample() {
5557
blackListConfig={blackListConfig}
5658
compFactory={DropdownComp}
5759
/>
60+
<Example
61+
title="Hiding the Dropdown component"
62+
width={120}
63+
config={{
64+
type: "default",
65+
text: trans("componentDoc.menu"),
66+
hidden: true,
67+
options: options,
68+
}}
69+
blackListConfig={blackListConfig}
70+
compFactory={DropdownComp}
71+
/>
5872
</ExampleGroup>
5973

60-
<ExampleGroup title={trans("componentDoc.style")}>
74+
<ExampleGroup
75+
title="Layout"
76+
description="The Following Examples Show the Layout options of the Dropdown Component."
77+
>
78+
<Example
79+
title="Display Dropdown without the Dots"
80+
width={120}
81+
config={{
82+
onlyMenu: true,
83+
}}
84+
compFactory={DropdownComp}
85+
/>
86+
<Example
87+
title="Show Dropdown options on Hover"
88+
width={120}
89+
config={{
90+
onlyMenu: true,
91+
triggerMode: "hover",
92+
}}
93+
compFactory={DropdownComp}
94+
/>
6195
<Example
62-
title={trans("componentDoc.onlyMenu")}
96+
title="Show Dropdown options on Click"
6397
width={120}
6498
config={{
6599
onlyMenu: true,
100+
triggerMode: "click",
101+
}}
102+
compFactory={DropdownComp}
103+
/>
104+
</ExampleGroup>
105+
106+
<ExampleGroup
107+
title="Styling Properties"
108+
description="The Following Examples Show the different Styling properties on the Dropdown Component."
109+
>
110+
<Example
111+
title="Background Color"
112+
width={120}
113+
config={{
114+
style:{
115+
"background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
116+
},
117+
}}
118+
compFactory={DropdownComp}
119+
/>
120+
<Example
121+
title="Margin & Padding"
122+
width={120}
123+
config={{
124+
style:{
125+
"background": "linear-gradient(135deg, #00FFFF 0%, #00FFFF 100%)",
126+
"margin": "10px",
127+
"padding": "10px",
128+
},
129+
}}
130+
compFactory={DropdownComp}
131+
/>
132+
<Example
133+
title="Border Radius"
134+
width={120}
135+
config={{
136+
style:{
137+
"background": "linear-gradient(135deg, #00FFFF 0%, #00FFFF 100%)",
138+
"radius": "15px"
139+
},
140+
}}
141+
compFactory={DropdownComp}
142+
/>
143+
<Example
144+
title="Text Properties"
145+
width={120}
146+
config={{
147+
style:{
148+
"text": "#E67373",
149+
"textSize": "25px",
150+
"textWeight": "bold",
151+
"fontStyle": "italic",
152+
},
66153
}}
67154
compFactory={DropdownComp}
68155
/>

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

+99
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,15 @@ export default function FloatButtonExample() {
3131
>
3232
<Example
3333
title="A Simple Float Button"
34+
height={150}
3435
config={{
3536
buttons: buttons,
3637
}}
3738
compFactory={FloatButtonComp}
3839
/>
3940
<Example
4041
title="Hiding the Float Button"
42+
height={150}
4143
config={{
4244
buttons: buttons,
4345
hidden: true,
@@ -46,6 +48,7 @@ export default function FloatButtonExample() {
4648
/>
4749
<Example
4850
title="Different Icon on Float Button"
51+
height={150}
4952
config={{
5053
buttons: buttons,
5154
icon: "/icon:solid/align-justify",
@@ -54,6 +57,7 @@ export default function FloatButtonExample() {
5457
/>
5558
<Example
5659
title="Button Theme - Default"
60+
height={150}
5761
config={{
5862
buttons: buttons,
5963
buttonTheme: "default",
@@ -66,12 +70,107 @@ export default function FloatButtonExample() {
6670
/>
6771
<Example
6872
title="Button Shape - Square"
73+
height={150}
6974
config={{
7075
buttons: buttons,
7176
shape: "square",
7277
}}
7378
compFactory={FloatButtonComp}
7479
/>
80+
<Example
81+
title="Show Badge - True"
82+
height={150}
83+
config={{
84+
buttons: buttons,
85+
dot: true,
86+
}}
87+
compFactory={FloatButtonComp}
88+
/>
89+
<Example
90+
title="Show Badge - False"
91+
height={150}
92+
config={{
93+
buttons: buttons,
94+
}}
95+
compFactory={FloatButtonComp}
96+
/>
97+
</ExampleGroup>
98+
99+
<ExampleGroup
100+
title="Styling Properties"
101+
description="The Following Examples Show the different Styling properties of the Float Button Component."
102+
>
103+
<Example
104+
title="Badge Color"
105+
height={150}
106+
config={{
107+
buttons: buttons,
108+
dot: true,
109+
badgeStyle: {
110+
"badgeColor": "#E68E50",
111+
},
112+
}}
113+
compFactory={FloatButtonComp}
114+
/>
115+
<Example
116+
title="Styling properties"
117+
height={150}
118+
config={{
119+
buttons: buttons,
120+
style: {
121+
"background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
122+
"border": "#3377FF",
123+
"borderStyle": "dashed",
124+
"borderWidth": "3px"
125+
},
126+
}}
127+
compFactory={FloatButtonComp}
128+
/>
129+
</ExampleGroup>
130+
131+
<ExampleGroup
132+
title="Animation Style"
133+
description="The Following Examples Show different animations on the Float Button Component."
134+
>
135+
<Example
136+
title="Bounce Animation"
137+
height={150}
138+
config={{
139+
animationStyle: {
140+
"animation": "bounce",
141+
"animationDelay": "1s",
142+
"animationDuration": "3s",
143+
"animationIterationCount": "infinite"
144+
},
145+
}}
146+
compFactory={FloatButtonComp}
147+
/>
148+
<Example
149+
title="Swing Animation"
150+
height={150}
151+
config={{
152+
animationStyle: {
153+
"animation": "swing",
154+
"animationDelay": "1s",
155+
"animationDuration": "3s",
156+
"animationIterationCount": "infinite"
157+
},
158+
}}
159+
compFactory={FloatButtonComp}
160+
/>
161+
<Example
162+
title="Tada Animation"
163+
height={150}
164+
config={{
165+
animationStyle: {
166+
"animation": "tada",
167+
"animationDelay": "1s",
168+
"animationDuration": "3s",
169+
"animationIterationCount": "infinite"
170+
},
171+
}}
172+
compFactory={FloatButtonComp}
173+
/>
75174
</ExampleGroup>
76175

77176
</>

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

+26
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ export default function IconButtonExample() {
9090
<Example
9191
title="Icon Size - 30px"
9292
width={120}
93+
height={50}
9394
config={{
9495
prefixIcon: "/icon:antd/audiofilled",
9596
iconSize: "30px",
@@ -103,6 +104,7 @@ export default function IconButtonExample() {
103104
<Example
104105
title="Icon Size - 40px"
105106
width={120}
107+
height={60}
106108
config={{
107109
prefixIcon: "/icon:antd/audiofilled",
108110
iconSize: "40px",
@@ -113,6 +115,30 @@ export default function IconButtonExample() {
113115
}}
114116
compFactory={ControlButton}
115117
/>
118+
<Example
119+
title="Custom Styling"
120+
width={120}
121+
height={50}
122+
config={{
123+
prefixIcon: "/icon:antd/audiofilled",
124+
style: {
125+
"background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
126+
"padding": "10px",
127+
"text": "#222222",
128+
"textTransform": "Uppercase",
129+
"textDecoration": "underline",
130+
"textSize": "16px",
131+
"textWeight": "bold",
132+
"fontFamily": "Courier New",
133+
"fontStyle": "italic",
134+
"border": "#222222",
135+
"borderStyle": "solid",
136+
"radius": "10px",
137+
"borderWidth": "2px"
138+
},
139+
}}
140+
compFactory={ControlButton}
141+
/>
116142
</ExampleGroup>
117143
</>
118144
);

0 commit comments

Comments
 (0)