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

Commita1f6fc5

Browse files
Navigation: Added horizontal mode and collapse menu option in vertical mode
1 parentb6d9047 commita1f6fc5

File tree

3 files changed

+52
-26
lines changed

3 files changed

+52
-26
lines changed

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

Lines changed: 49 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { EditorContainer, EmptyContent } from "pages/common/styledComponent";
1717
import{useCallback,useEffect,useMemo,useState}from"react";
1818
importstyledfrom"styled-components";
1919
import{isUserViewMode,useAppPathParam}from"util/hooks";
20-
import{StringControl,jsonControl}from"comps/controls/codeControl";
20+
import{BoolCodeControl,StringControl,jsonControl}from"comps/controls/codeControl";
2121
import{styleControl}from"comps/controls/styleControl";
2222
import{
2323
NavLayoutStyle,
@@ -41,6 +41,8 @@ import {
4141
menuItemStyleOptions
4242
}from"./navLayoutConstants";
4343

44+
const{ Header}=Layout;
45+
4446
constDEFAULT_WIDTH=240;
4547
typeMenuItemStyleOptionValue="normal"|"hover"|"active";
4648

@@ -99,10 +101,12 @@ const StyledMenu = styled(AntdMenu)<{
99101
.ant-menu-submenu {
100102
margin:${(props)=>props.$navItemStyle?.margin};
101103
width:${(props)=>props.$navItemStyle?.width};
104+
padding: 0;
102105
103106
.ant-menu-submenu-title {
104107
width: 100%;
105108
height: auto !important;
109+
max-height: 100%;
106110
background-color:${(props)=>props.$navItemStyle?.background};
107111
color:${(props)=>props.$navItemStyle?.text};
108112
border-radius:${(props)=>props.$navItemStyle?.radius} !important;
@@ -190,7 +194,8 @@ let NavTmpLayout = (function () {
190194
width:withDefault(StringControl,DEFAULT_WIDTH),
191195
backgroundImage:withDefault(StringControl,""),
192196
mode:dropdownControl(ModeOptions,"inline"),
193-
navStyle:withDefault(styleControl(NavLayoutStyle),defaultStyle),
197+
collapse:BoolCodeControl,
198+
navStyle:withDefault(styleControl(NavLayoutStyle),{...defaultStyle,padding:'1px'}),
194199
navItemStyle:withDefault(styleControl(NavLayoutItemStyle),defaultStyle),
195200
navItemHoverStyle:withDefault(styleControl(NavLayoutItemHoverStyle),{}),
196201
navItemActiveStyle:withDefault(styleControl(NavLayoutItemActiveStyle),{}),
@@ -226,6 +231,9 @@ let NavTmpLayout = (function () {
226231
label:trans("labelProp.position"),
227232
radioButton:true
228233
})}
234+
{children.collapse.propertyView({
235+
label:trans("labelProp.collapse"),
236+
})}
229237
{children.backgroundImage.propertyView({
230238
label:`Background Image`,
231239
placeholder:'https://temp.im/350x400',
@@ -266,6 +274,7 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
266274
constitems=comp.children.items.getView();
267275
constnavWidth=comp.children.width.getView();
268276
constnavMode=comp.children.mode.getView();
277+
constnavCollapse=comp.children.collapse.getView();
269278
constnavStyle=comp.children.navStyle.getView();
270279
constnavItemStyle=comp.children.navItemStyle.getView();
271280
constnavItemHoverStyle=comp.children.navItemHoverStyle.getView();
@@ -547,32 +556,46 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
547556
backgroundStyle=`center / cover url('${backgroundImage}') no-repeat,${backgroundStyle}`;
548557
}
549558

559+
letnavMenu=(
560+
<StyledMenu
561+
items={menuItems}
562+
mode={navMode}
563+
style={{
564+
height:`calc(100% -${getVerticalMargin(navStyle.margin.split(' '))})`,
565+
width:`calc(100% -${getHorizontalMargin(navStyle.margin.split(' '))})`,
566+
borderRight:navMode!=='horizontal' ?`1px solid${navStyle.border}` :'none',
567+
borderBottom:navMode==='horizontal' ?`1px solid${navStyle.border}` :'none',
568+
borderRadius:navStyle.radius,
569+
color:navStyle.text,
570+
margin:navStyle.margin,
571+
padding:navStyle.padding,
572+
background:backgroundStyle,
573+
flex:1,
574+
minWidth:0,
575+
}}
576+
defaultOpenKeys={defaultOpenKeys}
577+
selectedKeys={[selectedKey]}
578+
$navItemStyle={{
579+
// width: `calc(100% - ${getHorizontalMargin(navItemStyle.margin.split(' '))})`,
580+
width:'auto',
581+
...navItemStyle,
582+
}}
583+
$navItemHoverStyle={navItemHoverStyle}
584+
$navItemActiveStyle={navItemActiveStyle}
585+
/>
586+
);
587+
550588
letcontent=(
551589
<Layout>
552-
<StyledSidetheme="light"width={navWidth}>
553-
<StyledMenu
554-
items={menuItems}
555-
mode={navMode}
556-
style={{
557-
height:`calc(100% -${getVerticalMargin(navStyle.margin.split(' '))})`,
558-
width:`calc(100% -${getHorizontalMargin(navStyle.margin.split(' '))})`,
559-
borderRight:`1px solid${navStyle.border}`,
560-
borderRadius:navStyle.radius,
561-
color:navStyle.text,
562-
margin:navStyle.margin,
563-
padding:navStyle.padding,
564-
background:backgroundStyle,
565-
}}
566-
defaultOpenKeys={defaultOpenKeys}
567-
selectedKeys={[selectedKey]}
568-
$navItemStyle={{
569-
width:`calc(100% -${getHorizontalMargin(navItemStyle.margin.split(' '))})`,
570-
...navItemStyle,
571-
}}
572-
$navItemHoverStyle={navItemHoverStyle}
573-
$navItemActiveStyle={navItemActiveStyle}
574-
/>
575-
</StyledSide>
590+
{navMode==='horizontal' ?(
591+
<Headerstyle={{display:'flex',alignItems:'center',padding:0}}>
592+
{navMenu}
593+
</Header>
594+
) :(
595+
<StyledSidetheme="light"width={navWidth}collapsed={navCollapse}>
596+
{navMenu}
597+
</StyledSide>
598+
)}
576599
<MainContent>{pageView}</MainContent>
577600
</Layout>
578601
);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { trans } from "i18n";
33
exportconstModeOptions=[
44
{label:trans("navLayout.modeInline"),value:"inline"},
55
{label:trans("navLayout.modeVertical"),value:"vertical"},
6+
{label:trans("navLayout.modeHorizontal"),value:"horizontal"},
67
]asconst;
78

89
exportconstDataOption={

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,7 @@ export const en = {
229229
"text":"Label",
230230
"tooltip":"Tooltip",
231231
"position":"Position",
232+
"collapse":"Collapse",
232233
"left":"Left",
233234
"right":"Right",
234235
"top":"Top",
@@ -3470,6 +3471,7 @@ export const en = {
34703471
"mode":"Mode",
34713472
"modeInline":"Inline",
34723473
"modeVertical":"Vertical",
3474+
"modeHorizontal":"Horizontal",
34733475
"width":"Width",
34743476
"widthTooltip":"Pixel or Percentage, e.g. 520, 60%",
34753477
"navStyle":"Menu Style",

0 commit comments

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