Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite035ee2

Browse files
committed
[Fix]:#1626 Add Toggle between Grid/Flex Layout
1 parent624d349 commite035ee2

File tree

3 files changed

+98
-27
lines changed

3 files changed

+98
-27
lines changed

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

Lines changed: 86 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,34 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
4343
import{SliderControl}from"@lowcoder-ee/comps/controls/sliderControl";
4444
import{getBackgroundStyle}from"@lowcoder-ee/util/styleUtils";
4545

46+
// Extended ContainerStyleType for our specific needs
47+
interfaceExtendedContainerStyleTypeextendsContainerStyleType{
48+
display?:string;
49+
gridTemplateColumns?:string;
50+
gridTemplateRows?:string;
51+
columnGap?:string;
52+
rowGap?:string;
53+
[key:string]:string|undefined;
54+
}
55+
4656
constContainWrapper=styled.div<{
47-
$style:ContainerStyleType&{
48-
display:string,
49-
flexWrap:string,
50-
gap:string,
51-
}|undefined;
57+
$style:ExtendedContainerStyleType|undefined;
58+
$useFlexLayout:boolean;
5259
}>`
53-
display:${(props)=>props.$style?.display};
54-
flex-wrap:${(props)=>props.$style?.flexWrap};
55-
gap:${(props)=>props.$style?.gap};
60+
display:${(props)=>props.$useFlexLayout ?'flex' :props.$style?.display};
61+
flex-wrap:${(props)=>props.$useFlexLayout ?'wrap' :'nowrap'};
62+
63+
${(props)=>!props.$useFlexLayout&&`
64+
grid-template-columns:${props.$style?.gridTemplateColumns};
65+
grid-template-rows:${props.$style?.gridTemplateRows};
66+
column-gap:${props.$style?.columnGap};
67+
row-gap:${props.$style?.rowGap};
68+
`}
69+
70+
${(props)=>props.$useFlexLayout&&`
71+
column-gap:${props.$style?.columnGap||'0'};
72+
row-gap:${props.$style?.rowGap||'0'};
73+
`}
5674
5775
border-radius:${(props)=>props.$style?.radius};
5876
border-width:${(props)=>props.$style?.borderWidth};
@@ -65,11 +83,14 @@ const ContainWrapper = styled.div<{
6583

6684
constColWrapper=styled.div<{
6785
$style:ResponsiveLayoutColStyleType|undefined,
68-
$width?:string,
86+
$width:string,
6987
$matchColumnsHeight:boolean,
88+
$useFlexLayout:boolean,
7089
}>`
71-
flex:${props=>props.$width ?"0 0 "+props.$width :"1 1 0"};
72-
min-width: 0; /* Prevent flex items from overflowing */
90+
${props=>props.$useFlexLayout ?`
91+
flex:${props.$width==='100%' ?'1 0 100%' :`0 0${props.$width}`};
92+
max-width:${props.$width};
93+
` :''}
7394
7495
> div {
7596
height:${(props)=>props.$matchColumnsHeight ?`calc(100% -${props.$style?.padding||0} -${props.$style?.padding||0})` :'auto'};
@@ -93,10 +114,14 @@ const childrenMap = {
93114
horizontalGridCells:SliderControl,
94115
autoHeight:AutoHeightControl,
95116
matchColumnsHeight:withDefault(BoolControl,true),
96-
gap:withDefault(StringControl,"20px"),
117+
templateRows:withDefault(StringControl,"1fr"),
118+
rowGap:withDefault(StringControl,"0"),
119+
templateColumns:withDefault(StringControl,"1fr 1fr"),
97120
mainScrollbar:withDefault(BoolControl,false),
121+
columnGap:withDefault(StringControl,"0"),
98122
style:styleControl(ContainerStyle,'style'),
99-
columnStyle:styleControl(ResponsiveLayoutColStyle,'columnStyle')
123+
columnStyle:styleControl(ResponsiveLayoutColStyle,'columnStyle'),
124+
useFlexLayout:withDefault(BoolControl,true),
100125
};
101126

102127
typeViewProps=RecordConstructorToView<typeofchildrenMap>;
@@ -118,42 +143,66 @@ const ColumnContainer = (props: ColumnContainerProps) => {
118143
);
119144
};
120145

146+
constgetColumnWidth=(column:any):string=>{
147+
// Use explicit width if available
148+
if(column.width){
149+
// For percentage values, calculate precisely to accommodate gaps
150+
if(column.width.endsWith('%')){
151+
returncolumn.width;
152+
}
153+
returncolumn.width;
154+
}
155+
156+
// If minWidth is set, use it or default to equal distribution
157+
returncolumn.minWidth||'auto';
158+
};
121159

122160
constColumnLayout=(props:ColumnLayoutProps)=>{
123161
let{
124162
columns,
125163
containers,
126164
dispatch,
127165
matchColumnsHeight,
128-
gap,
166+
templateRows,
167+
rowGap,
168+
templateColumns,
169+
columnGap,
129170
columnStyle,
130171
horizontalGridCells,
131-
mainScrollbar
172+
mainScrollbar,
173+
useFlexLayout,
132174
}=props;
133175

134176
return(
135177
<BackgroundColorContext.Providervalue={props.style.background}>
136178
<DisabledContext.Providervalue={props.disabled}>
137179
<divstyle={{height:"inherit",overflow:"auto"}}>
138180
<ScrollBarstyle={{margin:"0px",padding:"0px"}}overflow="scroll"hideScrollbar={!mainScrollbar}>
139-
<ContainWrapper$style={{
140-
...props.style,
141-
display:"flex",
142-
flexWrap:"wrap",
143-
gap:gap,
144-
}}>
181+
<ContainWrapper
182+
$style={{
183+
...props.style,
184+
display:"grid",
185+
gridTemplateColumns:templateColumns,
186+
columnGap,
187+
gridTemplateRows:templateRows,
188+
rowGap,
189+
}}
190+
$useFlexLayout={useFlexLayout}
191+
>
145192
{columns.map(column=>{
146193
constid=String(column.id);
147194
constchildDispatch=wrapDispatch(wrapDispatch(dispatch,"containers"),id);
148195
if(!containers[id])returnnull
149196
constcontainerProps=containers[id].children;
197+
constcolumnWidth=getColumnWidth(column);
150198

151199
return(
152-
<BackgroundColorContext.Providervalue={props.columnStyle.background}key={id}>
200+
<BackgroundColorContext.Providerkey={id}value={props.columnStyle.background}>
153201
<ColWrapper
154202
$style={props.columnStyle}
155-
$width={column.minWidth}
203+
$width={columnWidth}
156204
$matchColumnsHeight={matchColumnsHeight}
205+
$useFlexLayout={useFlexLayout}
157206
>
158207
<ColumnContainer
159208
layout={containerProps.layout.getView()}
@@ -210,14 +259,27 @@ export const ResponsiveLayoutBaseComp = (function () {
210259
{children.horizontalGridCells.propertyView({
211260
label:trans('prop.horizontalGridCells'),
212261
})}
262+
{children.useFlexLayout.propertyView({
263+
label:trans("responsiveLayout.useFlexLayout"),
264+
tooltip:trans("responsiveLayout.useFlexLayoutTooltip")
265+
})}
213266
</Section>
214267
<Sectionname={trans("responsiveLayout.columnsLayout")}>
215268
{children.matchColumnsHeight.propertyView({label:trans("responsiveLayout.matchColumnsHeight")
216269
})}
217270
{controlItem({},(
218271
<divstyle={{marginTop:'8px'}}>{trans("responsiveLayout.columnsSpacing")}</div>
219272
))}
220-
{children.gap.propertyView({label:trans("responsiveLayout.gap")})}
273+
{!children.useFlexLayout.getView()&&children.templateColumns.propertyView({
274+
label:trans("responsiveLayout.columnDefinition"),
275+
tooltip:trans("responsiveLayout.columnsDefinitionTooltip")
276+
})}
277+
{!children.useFlexLayout.getView()&&children.templateRows.propertyView({
278+
label:trans("responsiveLayout.rowDefinition"),
279+
tooltip:trans("responsiveLayout.rowsDefinitionTooltip")
280+
})}
281+
{children.columnGap.propertyView({label:trans("responsiveLayout.columnGap")})}
282+
{children.rowGap.propertyView({label:trans("responsiveLayout.rowGap")})}
221283
</Section>
222284
</>
223285
)}

‎client/packages/lowcoder/src/comps/controls/optionsControl.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -582,6 +582,7 @@ const ColumnOption = new MultiCompBuilder(
582582
label:StringControl,
583583
key:StringControl,
584584
minWidth:withDefault(RadiusControl,""),
585+
width:withDefault(RadiusControl,""),
585586
background:withDefault(ColorControl,""),
586587
backgroundImage:withDefault(StringControl,""),
587588
border:withDefault(ColorControl,""),
@@ -598,6 +599,11 @@ const ColumnOption = new MultiCompBuilder(
598599
preInputNode:<StyledIconas={WidthIcon}title=""/>,
599600
placeholder:'3px',
600601
})}
602+
{children.width.propertyView({
603+
label:trans('responsiveLayout.width'),
604+
preInputNode:<StyledIconas={WidthIcon}title=""/>,
605+
placeholder:'50%',
606+
})}
601607
{children.background.propertyView({
602608
label:trans('style.background'),
603609
})}
@@ -630,8 +636,8 @@ const ColumnOption = new MultiCompBuilder(
630636

631637
exportconstColumnOptionControl=manualOptionsControl(ColumnOption,{
632638
initOptions:[
633-
{id:0,key:"Column1",label:"Column1"},
634-
{id:1,key:"Column2",label:"Column2"},
639+
{id:0,key:"Column1",label:"Column1",width:"50%"},
640+
{id:1,key:"Column2",label:"Column2",width:"50%"},
635641
],
636642
uniqField:"key",
637643
autoIncField:"id",

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3899,7 +3899,6 @@ export const en = {
38993899
"rowDefinition":"Row Definition",
39003900
"columnGap":"Column Gap",
39013901
"rowGap":"Row Gap",
3902-
"gap":"Gap",
39033902
"atLeastOneColumnError":"Responsive Layout Keeps at Least One Column",
39043903
"columnsPerRow":"Columns per Row",
39053904
"columnsSpacing":"Columns Spacing (px)",
@@ -3911,6 +3910,8 @@ export const en = {
39113910
"rowStyle":"Row Style",
39123911
"columnStyle":"Column Style",
39133912
"minWidth":"Min. Width",
3913+
"width":"Width",
3914+
"widthTooltip":"Set the column width (e.g., '300px', '50%', '100%'). When set to 100%, columns will stack vertically.",
39143915
"rowBreak":"Row Break",
39153916
"useComponentWidth" :"Use Self Size",
39163917
"useComponentWidthDesc" :"Use the container width instead the App width",
@@ -3919,6 +3920,8 @@ export const en = {
39193920
"columnsLayout":"Columns Layout",
39203921
"columnsDefinitionTooltip":"Columns can be defined freely based on the CSS columns properties. For example, 'auto auto' will create two columns with equal width. Read more here: https://css-tricks.com/almanac/properties/g/grid-template-columns",
39213922
"rowsDefinitionTooltip":"Rows can be defined freely based on the CSS rows properties. For example, 'auto auto' will create two rows with equal height. Read more here: https://css-tricks.com/almanac/properties/g/grid-template-rows",
3923+
"useFlexLayout":"Use Flexible Layout",
3924+
"useFlexLayoutTooltip":"Enable responsive behavior where columns can wrap when there's not enough space"
39223925
},
39233926
"splitLayout" :{
39243927
"column":"View Areas",

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp