Skip to content

Commit ad12095

Browse files
adnanqaopsadnanqaops
committed
added changes to table and other components
1 parent 0c3c98a commit ad12095

File tree

8 files changed

+511
-11
lines changed

8 files changed

+511
-11
lines changed

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GeoMapChart.tsx

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export default function GeoMapChartExample() {
3232
width={500}
3333
height={300}
3434
config={{
35+
mapZoomLevel: "1",
3536
}}
3637
compFactory={ChartCompWithDefault}
3738
/>
@@ -40,6 +41,7 @@ export default function GeoMapChartExample() {
4041
width={500}
4142
height={300}
4243
config={{
44+
mapZoomLevel: "3",
4345
}}
4446
compFactory={ChartCompWithDefault}
4547
/>
@@ -48,30 +50,43 @@ export default function GeoMapChartExample() {
4850
width={500}
4951
height={300}
5052
config={{
53+
mapZoomLevel: "5",
5154
}}
5255
compFactory={ChartCompWithDefault}
5356
/>
5457
<Example
55-
title="Center Position ( Lat, Lon) - Spain"
56-
width={500}
58+
title="Center Position ( Lat, Long) - Spain"
59+
width={700}
5760
height={300}
61+
hideSettings={true}
5862
config={{
63+
mapCenterLng: "-0.5033",
64+
mapCenterLat: "40.5235",
65+
mapZoomLevel: "5",
5966
}}
6067
compFactory={ChartCompWithDefault}
6168
/>
6269
<Example
6370
title="Center Position ( Lat, Lon) - USA"
64-
width={500}
71+
width={700}
6572
height={300}
73+
hideSettings={true}
6674
config={{
75+
mapCenterLng: "-97.5348",
76+
mapCenterLat: "38.7946",
77+
mapZoomLevel: "5",
6778
}}
6879
compFactory={ChartCompWithDefault}
6980
/>
7081
<Example
7182
title="Center Position ( Lat, Lon) - Turkey"
72-
width={500}
83+
width={700}
7384
height={300}
85+
hideSettings={true}
7486
config={{
87+
mapCenterLng: "38.5348",
88+
mapCenterLat: "38.7946",
89+
mapZoomLevel: "5",
7590
}}
7691
compFactory={ChartCompWithDefault}
7792
/>

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/MermaidChart.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function MermaidChartExample() {
2626
width={500}
2727
height={300}
2828
config={{
29-
code: "graph LR\n Planning --> Defining --> Designing --> Building --> Testing --> Deployment --> Planning",
29+
code: "graph LR\n Planning --> Defining --> Designing --> Building --> Testing --> Deployment --> Planning",
3030
}}
3131
compFactory={ChartCompWithDefault}
3232
/>

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/OpenLayersGeoMap.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,42 @@ export default function OpenLayersGeoMapChartExample() {
2121
}}
2222
compFactory={ChartCompWithDefault}
2323
/>
24+
<Example
25+
title="Center Position - USA"
26+
width={500}
27+
height={300}
28+
config={{
29+
center: "[-92.5348,38.7946]",
30+
}}
31+
compFactory={ChartCompWithDefault}
32+
/>
33+
<Example
34+
title="Zoom Level - 3"
35+
width={500}
36+
height={300}
37+
config={{
38+
zoom: "3",
39+
}}
40+
compFactory={ChartCompWithDefault}
41+
/>
42+
<Example
43+
title="Zoom Level - 7"
44+
width={500}
45+
height={300}
46+
config={{
47+
zoom: "7",
48+
}}
49+
compFactory={ChartCompWithDefault}
50+
/>
51+
<Example
52+
title="Zoom Level - 10"
53+
width={500}
54+
height={300}
55+
config={{
56+
zoom: "10",
57+
}}
58+
compFactory={ChartCompWithDefault}
59+
/>
2460
</ExampleGroup>
2561
</>
2662
);

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

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
import { SplitLayoutComp } from "comps/comps/splitLayout/splitLayout";
2+
import Example from "../../common/Example";
3+
import ExampleGroup from "../../common/ExampleGroup";
4+
5+
const columns= {
6+
"manual": [
7+
{
8+
"id": 0,
9+
"label": "Area 1",
10+
"key": "Area1",
11+
"minWidth": "10%",
12+
"maxWidth": "90%",
13+
"width": "50%",
14+
"collapsible": false,
15+
"background": "",
16+
"backgroundImage": "",
17+
"padding": ""
18+
},
19+
{
20+
"id": 1,
21+
"label": "Area 2",
22+
"key": "Area2",
23+
"minWidth": "10%",
24+
"maxWidth": "90%",
25+
"width": "50%",
26+
"collapsible": true,
27+
"background": "",
28+
"backgroundImage": "",
29+
"padding": ""
30+
},
31+
{
32+
"id": 2,
33+
"label": "Option 1",
34+
"key": "Option 1",
35+
"minWidth": "10%",
36+
"maxWidth": "90%",
37+
"width": "50%",
38+
"collapsible": false,
39+
"background": "",
40+
"backgroundImage": "",
41+
"padding": ""
42+
}
43+
]
44+
};
45+
46+
const bodyStyle= {
47+
background: "#FFFFFF",
48+
border: "#222222",
49+
};
50+
51+
const columnStyle= {
52+
background: "#FFFFFF",
53+
border: "#222222",
54+
margin: "10px",
55+
};
56+
57+
export default function SplitLayoutExample() {
58+
return (
59+
<>
60+
<ExampleGroup
61+
title="Basic Usage"
62+
description="The Following Examples Show the Basic Usage of the Split Layout Component."
63+
>
64+
<Example
65+
title="Default Component"
66+
hideSettings={true}
67+
width={1000}
68+
config={{
69+
bodyStyle: bodyStyle,
70+
columnStyle: columnStyle,
71+
}}
72+
compFactory={SplitLayoutComp}
73+
/>
74+
<Example
75+
title="Multiple Split Layout containers ( Click on the icon at the center on right side ) "
76+
hideSettings={true}
77+
width={1000}
78+
config={{
79+
columns: columns,
80+
bodyStyle: bodyStyle,
81+
columnStyle: columnStyle,
82+
}}
83+
compFactory={SplitLayoutComp}
84+
/>
85+
<Example
86+
title="Setting Minimum Width - 30%"
87+
hideSettings={true}
88+
width={1000}
89+
config={{
90+
columns: {
91+
"manual": [
92+
{
93+
"id": 0,
94+
"label": "Area 1",
95+
"key": "Area1",
96+
"minWidth": "30%",
97+
"maxWidth": "90%",
98+
"width": "50%",
99+
"collapsible": false,
100+
"background": "",
101+
"backgroundImage": "",
102+
"padding": ""
103+
},
104+
{
105+
"id": 1,
106+
"label": "Area 2",
107+
"key": "Area2",
108+
"minWidth": "30%",
109+
"maxWidth": "90%",
110+
"width": "50%",
111+
"collapsible": true,
112+
"background": "",
113+
"backgroundImage": "",
114+
"padding": ""
115+
},
116+
{
117+
"id": 2,
118+
"label": "Option 1",
119+
"key": "Option 1",
120+
"minWidth": "30%",
121+
"maxWidth": "90%",
122+
"width": "50%",
123+
"collapsible": false,
124+
"background": "",
125+
"backgroundImage": "",
126+
"padding": ""
127+
}
128+
]
129+
},
130+
bodyStyle: bodyStyle,
131+
columnStyle: columnStyle,
132+
}}
133+
compFactory={SplitLayoutComp}
134+
/>
135+
<Example
136+
title="Setting Minimum Width - 10%"
137+
hideSettings={true}
138+
width={1000}
139+
config={{
140+
columns: columns,
141+
bodyStyle: bodyStyle,
142+
columnStyle: columnStyle,
143+
}}
144+
compFactory={SplitLayoutComp}
145+
/>
146+
</ExampleGroup>
147+
148+
<ExampleGroup
149+
title="Layout"
150+
description="The Following Examples Show the different layouts of the Split Layout Component."
151+
>
152+
<Example
153+
title="Split Layout Orientation - Vertical"
154+
hideSettings={true}
155+
width={1000}
156+
config={{
157+
bodyStyle: bodyStyle,
158+
columnStyle: columnStyle,
159+
orientation: "vertical",
160+
}}
161+
compFactory={SplitLayoutComp}
162+
/>
163+
<Example
164+
title="Split Layout Orientation - Horizontal"
165+
hideSettings={true}
166+
width={1000}
167+
config={{
168+
bodyStyle: bodyStyle,
169+
columnStyle: columnStyle,
170+
orientation: "horizontal",
171+
}}
172+
compFactory={SplitLayoutComp}
173+
/>
174+
</ExampleGroup>
175+
176+
<ExampleGroup
177+
title="Styling Properties"
178+
description="The Following Examples Show the different Styling properties on the Split Layout Component."
179+
>
180+
<Example
181+
title="Body Styling - Background Color, Border, Padding"
182+
hideSettings={true}
183+
width={1000}
184+
config={{
185+
bodyStyle: {
186+
"background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
187+
"border": "#222222",
188+
"borderWidth": "2px",
189+
"padding": "10px",
190+
},
191+
columnStyle: columnStyle,
192+
}}
193+
compFactory={SplitLayoutComp}
194+
/>
195+
<Example
196+
title="Column Styling - Background Color, Border, Margin"
197+
hideSettings={true}
198+
width={1000}
199+
config={{
200+
bodyStyle: bodyStyle,
201+
columnStyle: {
202+
"background": "linear-gradient(0deg, #f43b47 0%, #453a94 100%)",
203+
"border": "#222222",
204+
"borderWidth": "2px",
205+
"borderStyle": "solid",
206+
"margin": "10px",
207+
},
208+
}}
209+
compFactory={SplitLayoutComp}
210+
/>
211+
</ExampleGroup>
212+
</>
213+
);
214+
}

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