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

Commit571122d

Browse files
committed
add desktop nav positions
1 parent409ea51 commit571122d

File tree

2 files changed

+39
-11
lines changed

2 files changed

+39
-11
lines changed

‎client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,14 @@ import history from "util/history";
3636
import{
3737
DataOption,
3838
DataOptionType,
39-
ModeOptions,
4039
jsonMenuItems,
4140
menuItemStyleOptions
4241
}from"./navLayoutConstants";
4342
import{clickEvent,eventHandlerControl}from"@lowcoder-ee/comps/controls/eventHandlerControl";
4443
import{childrenToProps}from"@lowcoder-ee/comps/generators/multi";
44+
import{NavPosition,NavPositionOptions}from"./navLayoutConstants";
4545

46-
const{ Header}=Layout;
46+
const{ Header, Footer}=Layout;
4747

4848
constDEFAULT_WIDTH=240;
4949
typeMenuItemStyleOptionValue="normal"|"hover"|"active";
@@ -197,7 +197,7 @@ let NavTmpLayout = (function () {
197197
jsonItems:jsonControl(convertTreeData,jsonMenuItems),
198198
width:withDefault(StringControl,DEFAULT_WIDTH),
199199
backgroundImage:withDefault(StringControl,""),
200-
mode:dropdownControl(ModeOptions,"inline"),
200+
position:dropdownControl(NavPositionOptions,NavPosition.Left),
201201
collapse:BoolCodeControl,
202202
navStyle:styleControl(NavLayoutStyle,'navStyle'),
203203
navItemStyle:styleControl(NavLayoutItemStyle,'navItemStyle'),
@@ -234,7 +234,7 @@ let NavTmpLayout = (function () {
234234
tooltip:trans("navLayout.widthTooltip"),
235235
placeholder:DEFAULT_WIDTH+"",
236236
})}
237-
{children.mode.propertyView({
237+
{children.position.propertyView({
238238
label:trans("labelProp.position"),
239239
radioButton:true
240240
})}
@@ -280,7 +280,7 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
280280
const[selectedKey,setSelectedKey]=useState("");
281281
constitems=comp.children.items.getView();
282282
constnavWidth=comp.children.width.getView();
283-
constnavMode=comp.children.mode.getView();
283+
constnavPosition=comp.children.position.getView();
284284
constnavCollapse=comp.children.collapse.getView();
285285
constnavStyle=comp.children.navStyle.getView();
286286
constnavItemStyle=comp.children.navItemStyle.getView();
@@ -568,12 +568,14 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
568568
letnavMenu=(
569569
<StyledMenu
570570
items={menuItems}
571-
mode={navMode}
571+
mode={(navPosition==='top'||navPosition==='bottom') ?'horizontal' :'inline'}
572572
style={{
573573
height:`calc(100% -${getVerticalMargin(navStyle.margin.split(' '))})`,
574574
width:`calc(100% -${getHorizontalMargin(navStyle.margin.split(' '))})`,
575-
borderRight:navMode!=='horizontal' ?`1px solid${navStyle.border}` :'none',
576-
borderBottom:navMode==='horizontal' ?`1px solid${navStyle.border}` :'none',
575+
borderRight:navPosition==='left' ?`1px solid${navStyle.border}` :'none',
576+
borderLeft:navPosition==='right' ?`1px solid${navStyle.border}` :'none',
577+
borderBottom:navPosition==='top' ?`1px solid${navStyle.border}` :'none',
578+
borderTop:navPosition==='bottom' ?`1px solid${navStyle.border}` :'none',
577579
borderRadius:navStyle.radius,
578580
color:navStyle.text,
579581
margin:navStyle.margin,
@@ -585,7 +587,7 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
585587
defaultOpenKeys={defaultOpenKeys}
586588
selectedKeys={[selectedKey]}
587589
$navItemStyle={{
588-
width:navMode==='horizontal' ?'auto' :`calc(100% -${getHorizontalMargin(navItemStyle.margin.split(' '))})`,
590+
width:(navPosition==='top'||navPosition==='bottom') ?'auto' :`calc(100% -${getHorizontalMargin(navItemStyle.margin.split(' '))})`,
589591
...navItemStyle,
590592
}}
591593
$navItemHoverStyle={navItemHoverStyle}
@@ -595,16 +597,27 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
595597

596598
letcontent=(
597599
<Layout>
598-
{navMode==='horizontal' ?(
600+
{(navPosition==='top')&&(
599601
<Headerstyle={{display:'flex',alignItems:'center',padding:0}}>
600602
{navMenu}
601603
</Header>
602-
) :(
604+
)}
605+
{(navPosition==='left')&&(
603606
<StyledSidetheme="light"width={navWidth}collapsed={navCollapse}>
604607
{navMenu}
605608
</StyledSide>
606609
)}
607610
<MainContent>{pageView}</MainContent>
611+
{(navPosition==='bottom')&&(
612+
<Footerstyle={{display:'flex',alignItems:'center',padding:0}}>
613+
{navMenu}
614+
</Footer>
615+
)}
616+
{(navPosition==='right')&&(
617+
<StyledSidetheme="light"width={navWidth}collapsed={navCollapse}>
618+
{navMenu}
619+
</StyledSide>
620+
)}
608621
</Layout>
609622
);
610623
returnisViewMode ?(

‎client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,21 @@ export const ModeOptions = [
66
{label:trans("navLayout.modeHorizontal"),value:"horizontal"},
77
]asconst;
88

9+
// Desktop navigation position
10+
exportconstNavPosition={
11+
Top:"top",
12+
Left:"left",
13+
Bottom:"bottom",
14+
Right:"right",
15+
}asconst;
16+
17+
exportconstNavPositionOptions=[
18+
{label:"Top",value:NavPosition.Top},
19+
{label:"Left",value:NavPosition.Left},
20+
{label:"Bottom",value:NavPosition.Bottom},
21+
{label:"Right",value:NavPosition.Right},
22+
]asconst;
23+
924
// Mobile navigation specific modes and options
1025
exportconstMobileMode={
1126
Vertical:"vertical",

0 commit comments

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