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)