Skip to content

Commit 4a06cc4

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1403 from lowcoder-org/doc/existing_components
Doc/existing components
2 parents 744ec3d + 14a3a4a commit 4a06cc4

30 files changed

+2231
-15
lines changed

‎client/packages/lowcoder/src/comps/comps/transferComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ TransferBasicComp = class extends TransferBasicComp {
186186
}
187187
};
188188

189-
export const transferComp = withExposingConfigs(TransferBasicComp, [
189+
export const TransferComp = withExposingConfigs(TransferBasicComp, [
190190
new NameConfig("items", trans("transfer.items")),
191191
new NameConfig("targetKeys", trans("transfer.targetKeys")),
192192
new NameConfig("targerObject", trans("transfer.targerObject")),

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { FloatButtonComp } from "comps/comps/buttonComp/floatButtonComp"
2+
import { trans } from "i18n";
3+
import Example from "../../common/Example";
4+
import ExampleGroup from "../../common/ExampleGroup";
5+
6+
export default function FloatButtonExample() {
7+
return (
8+
<>
9+
<ExampleGroup
10+
title={trans("componentDoc.basicUsage")}
11+
description={trans("componentDoc.basicDemoDescription")}
12+
>
13+
<Example
14+
title={trans("componentDoc.default")}
15+
config={{
16+
icon: "/icon:antd/questioncircleoutlined",
17+
value: "",
18+
shape: "circle",
19+
manual: [
20+
{
21+
badge: "1",
22+
description: "",
23+
icon: "/icon:antd/filetextoutlined",
24+
id: 0,
25+
label: "Option 1"
26+
},
27+
{
28+
badge: "1",
29+
description: "",
30+
icon: "/icon:antd/filetextoutlined",
31+
id: 1,
32+
label: "Option 2"
33+
}
34+
]
35+
36+
}}
37+
compFactory={FloatButtonComp}
38+
/>
39+
<Example
40+
title={trans("componentDoc.loading")}
41+
width={120}
42+
config={{
43+
text: trans("componentDoc.submit"),
44+
loading: true
45+
}}
46+
compFactory={FloatButtonComp}
47+
/>
48+
<Example
49+
title={trans("componentDoc.disabled")}
50+
width={120}
51+
config={{
52+
text: trans("componentDoc.submit"),
53+
disabled: true
54+
}}
55+
compFactory={FloatButtonComp}
56+
/>
57+
</ExampleGroup>
58+
59+
</>
60+
);
61+
}

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { IconComp } from "comps/comps/iconComp";
2+
import { trans } from "i18n";
3+
import Example from "../../common/Example";
4+
import ExampleGroup from "../../common/ExampleGroup";
5+
6+
export default function IconButtonExample() {
7+
return (
8+
<>
9+
<ExampleGroup
10+
title={trans("componentDoc.basicUsage")}
11+
description={trans("componentDoc.basicDemoDescription")}
12+
>
13+
<Example
14+
title={trans("componentDoc.default")}
15+
width={20}
16+
config={{
17+
form: "",
18+
type: "",
19+
prefixIcon: "/icon:solid/align-justify",
20+
iconSize: "30px",
21+
aspectRatio: "1 / 1",
22+
autoHeight: "fixed",
23+
}}
24+
compFactory={IconComp}
25+
/>
26+
<Example
27+
title={trans("componentDoc.loading")}
28+
width={120}
29+
config={{ type: "default", text: trans("componentDoc.submit"), loading: true }}
30+
compFactory={IconComp}
31+
/>
32+
<Example
33+
title={trans("componentDoc.disabled")}
34+
width={120}
35+
config={{ type: "default", text: trans("componentDoc.submit"), disabled: true }}
36+
compFactory={IconComp}
37+
/>
38+
</ExampleGroup>
39+
40+
<ExampleGroup title={trans("componentDoc.style")}>
41+
<Example
42+
title={trans("componentDoc.danger")}
43+
width={120}
44+
config={{
45+
style: { backgroundColor: "#CD574C", borderColor: "#AC3A32", color: "#E0ECF6" },
46+
}}
47+
compFactory={IconComp}
48+
/>
49+
<Example
50+
title={trans("componentDoc.warning")}
51+
width={120}
52+
config={{
53+
style: { backgroundColor: "#F4A125", borderColor: "#DA7D16", color: "#000000" },
54+
}}
55+
compFactory={IconComp}
56+
/>
57+
<Example
58+
title={trans("componentDoc.success")}
59+
width={120}
60+
config={{
61+
style: { backgroundColor: "#5E8D6E", borderColor: "#40694E", color: "#E0ECF6" },
62+
}}
63+
compFactory={IconComp}
64+
/>
65+
</ExampleGroup>
66+
</>
67+
);
68+
}

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import { ToggleButtonComp } from "comps/comps/buttonComp/toggleButtonComp"
2+
import { trans } from "i18n";
3+
import Example from "../../common/Example";
4+
import ExampleGroup from "../../common/ExampleGroup";
5+
6+
export default function ToggleButtonExample() {
7+
return (
8+
<>
9+
<ExampleGroup
10+
title={trans("componentDoc.basicUsage")}
11+
description={trans("componentDoc.basicDemoDescription")}
12+
>
13+
<Example
14+
title={trans("componentDoc.default")}
15+
width={120}
16+
config={{
17+
text: trans("componentDoc.submit")
18+
}}
19+
compFactory={ToggleButtonComp}
20+
/>
21+
<Example
22+
title={trans("componentDoc.loading")}
23+
width={120}
24+
config={{
25+
text: trans("componentDoc.submit"),
26+
loading: true
27+
}}
28+
compFactory={ToggleButtonComp}
29+
/>
30+
<Example
31+
title={trans("componentDoc.disabled")}
32+
width={120}
33+
config={{
34+
text: trans("componentDoc.submit"),
35+
disabled: true
36+
}}
37+
compFactory={ToggleButtonComp}
38+
/>
39+
</ExampleGroup>
40+
41+
<ExampleGroup title="Advanced">
42+
<Example
43+
title="Hide Text"
44+
width={120}
45+
config={{
46+
text: trans("componentDoc.submit"),
47+
showText: false,
48+
}}
49+
compFactory={ToggleButtonComp}
50+
/>
51+
<Example
52+
title="Text for True & False"
53+
width={120}
54+
config={{
55+
text: trans("componentDoc.submit"),
56+
showText: true,
57+
trueText: "True",
58+
falseText: "False",
59+
}}
60+
compFactory={ToggleButtonComp}
61+
/>
62+
<Example
63+
title="Icon Position"
64+
width={120}
65+
config={{
66+
text: trans("componentDoc.submit"),
67+
iconPosition: "left",
68+
}}
69+
compFactory={ToggleButtonComp}
70+
/>
71+
<Example
72+
title="Content Alignment - Left"
73+
width={180}
74+
config={{
75+
text: trans("componentDoc.submit"),
76+
alignment: "left",
77+
}}
78+
compFactory={ToggleButtonComp}
79+
/>
80+
<Example
81+
title="Content Alignment - Right"
82+
width={180}
83+
config={{
84+
text: trans("componentDoc.submit"),
85+
alignment: "right",
86+
}}
87+
compFactory={ToggleButtonComp}
88+
/>
89+
<Example
90+
title="Content Alignment - Center"
91+
width={180}
92+
config={{
93+
text: trans("componentDoc.submit"),
94+
alignment: "center",
95+
}}
96+
compFactory={ToggleButtonComp}
97+
/>
98+
<Example
99+
title="Content Alignment - Justified"
100+
width={180}
101+
config={{
102+
text: trans("componentDoc.submit"),
103+
alignment: "stretch",
104+
}}
105+
compFactory={ToggleButtonComp}
106+
/>
107+
</ExampleGroup>
108+
</>
109+
);
110+
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { TimerComp } from "comps/comps/timerComp";
2+
import Example from "../../common/Example";
3+
import ExampleGroup from "../../common/ExampleGroup";
4+
5+
export default function TimerExample() {
6+
return (
7+
<>
8+
<ExampleGroup
9+
title="Basic Usage"
10+
>
11+
<Example
12+
title="Default Value"
13+
config={{
14+
defaultValue: "00:00:03:000",
15+
}}
16+
compFactory={TimerComp}
17+
/>
18+
<Example
19+
title="Hide Buttons"
20+
config={{
21+
defaultValue: "00:00:00:000",
22+
hideButton: true,
23+
}}
24+
compFactory={TimerComp}
25+
/>
26+
</ExampleGroup>
27+
</>
28+
);
29+
}

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { ColumnLayoutComp } from "comps/comps/columnLayout/columnLayout";
2+
import Example from "../../common/Example";
3+
import ExampleGroup from "../../common/ExampleGroup";
4+
5+
export default function ColumnLayoutExample() {
6+
return (
7+
<>
8+
<ExampleGroup
9+
title="Basic Usage"
10+
description="The Following Examples Show the Basic Usage of the Column Layout Component."
11+
>
12+
<Example
13+
title="Hiding the Component"
14+
config={{
15+
hidden: true,
16+
}}
17+
compFactory={ColumnLayoutComp}
18+
/>
19+
<Example
20+
title="Disabling the Component"
21+
config={{
22+
disabled: true,
23+
}}
24+
compFactory={ColumnLayoutComp}
25+
/>
26+
<Example
27+
title="Multiple Columns"
28+
config={{
29+
columns:{
30+
manual:[
31+
{
32+
id:0,
33+
label:"Column1",
34+
},
35+
{
36+
id:1,
37+
label:"Column2",
38+
},
39+
{
40+
id:2,
41+
label:"Column3",
42+
},
43+
]
44+
}
45+
}}
46+
compFactory={ColumnLayoutComp}
47+
/>
48+
</ExampleGroup>
49+
50+
<ExampleGroup
51+
title="Column's Layout"
52+
description="The Following Examples Show the Column Layout options on Column Layout Component."
53+
>
54+
<Example
55+
title="Column Definition"
56+
config={{
57+
templateColumns: "1fr 1fr 1fr 1fr",
58+
}}
59+
compFactory={ColumnLayoutComp}
60+
/>
61+
<Example
62+
title="Row Definition"
63+
config={{
64+
templateRows: "1fr 1fr",
65+
}}
66+
compFactory={ColumnLayoutComp}
67+
/>
68+
<Example
69+
title="Column Gap"
70+
config={{
71+
columnGap: "50px",
72+
}}
73+
compFactory={ColumnLayoutComp}
74+
/>
75+
</ExampleGroup>
76+
</>
77+
);
78+
}

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