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

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

Lines changed: 90 additions & 3 deletions
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

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

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