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

Commit2eb4675

Browse files
committed
add ability to add icon on nav items / sub menu
1 parent5c5d19b commit2eb4675

File tree

3 files changed

+19
-4
lines changed

3 files changed

+19
-4
lines changed

‎client/packages/lowcoder/src/comps/comps/navComp/components/NavItemsControl.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { dropdownControl } from "comps/controls/dropdownControl";
55
import{mapOptionsControl}from"comps/controls/optionsControl";
66
import{trans}from"i18n";
77
import{navListComp}from"../navItemComp";
8+
import{IconControl}from"comps/controls/iconControl";
89
import{controlItem}from"lowcoder-design";
910
import{menuPropertyView}from"./MenuItemList";
1011

@@ -17,6 +18,7 @@ export function createNavItemsControl() {
1718
constNavMapOption=newMultiCompBuilder(
1819
{
1920
label:StringControl,
21+
icon:IconControl,
2022
hidden:BoolCodeControl,
2123
disabled:BoolCodeControl,
2224
active:BoolCodeControl,
@@ -27,6 +29,7 @@ export function createNavItemsControl() {
2729
.setPropertyViewFn((children)=>(
2830
<>
2931
{children.label.propertyView({label:trans("label"),placeholder:"{{item}}"})}
32+
{children.icon.propertyView({label:trans("icon")})}
3033
{children.active.propertyView({label:trans("navItemComp.active")})}
3134
{children.hidden.propertyView({label:trans("hidden")})}
3235
{children.disabled.propertyView({label:trans("disabled")})}

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,6 @@ const Item = styled.div<{
107107
$radius?:string;
108108
$disabled?:boolean;
109109
}>`
110-
height: 30px;
111110
line-height: 30px;
112111
padding:${(props)=>props.$padding ?props.$padding :'0 16px'};
113112
color:${(props)=>props.$disabled ?`${props.$color}80` :(props.$active ?props.$activeColor :props.$color)};
@@ -303,7 +302,7 @@ function renderStyleSections(children: any, styleSegment: MenuItemStyleOptionVal
303302
{children.style.getPropertyView()}
304303
</Section>
305304
)}
306-
<Sectionname={isHamburger ?"Drawer Item Style" :trans("navLayout.navItemStyle")}>
305+
<Sectionname={trans("navLayout.navItemStyle")}>
307306
{controlItem({},(
308307
<Segmented
309308
block
@@ -391,12 +390,13 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
391390
}
392391

393392
constlabel=view?.label;
393+
consticon=hasIcon(view?.icon) ?view.icon :undefined;
394394
constactive=!!view?.active;
395395
constonEvent=view?.onEvent;
396396
constdisabled=!!view?.disabled;
397397
constsubItems=isCompItem ?view?.items :[];
398398

399-
constsubMenuItems:Array<{key:string;label:any;disabled?:boolean}>=[];
399+
constsubMenuItems:Array<{key:string;label:any;icon?:any;disabled?:boolean}>=[];
400400
constsubMenuSelectedKeys:Array<string>=[];
401401

402402
if(Array.isArray(subItems)){
@@ -406,9 +406,11 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
406406
}
407407
constkey=originalIndex+"";
408408
subItem.children.active.getView()&&subMenuSelectedKeys.push(key);
409+
constsubIcon=hasIcon(subItem.children.icon?.getView?.()) ?subItem.children.icon.getView() :undefined;
409410
subMenuItems.push({
410411
key:key,
411412
label:subItem.children.label.getView(),
413+
icon:subIcon,
412414
disabled:!!subItem.children.disabled.getView(),
413415
});
414416
});
@@ -439,6 +441,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
439441
$disabled={disabled}
440442
onClick={()=>{if(!disabled&&onEvent)onEvent("click");}}
441443
>
444+
{icon&&<spanstyle={{display:'inline-flex',marginRight:'8px'}}>{icon}</span>}
442445
{label}
443446
{Array.isArray(subItems)&&subItems.length>0&&<DownOutlined/>}
444447
</Item>
@@ -455,7 +458,10 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
455458
onSubEvent&&onSubEvent("click");
456459
}}
457460
selectedKeys={subMenuSelectedKeys}
458-
items={subMenuItems}
461+
items={subMenuItems.map(item=>({
462+
...item,
463+
icon:item.icon||undefined,
464+
}))}
459465
/>
460466
);
461467
return(

‎client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@ import { trans } from "i18n";
88
import_from"lodash";
99
import{fromRecord,MultiBaseComp,Node,RecordNode,RecordNodeToValue}from"lowcoder-core";
1010
import{ReactNode}from"react";
11+
import{IconControl}from"comps/controls/iconControl";
1112

1213
constevents=[clickEvent];
1314

1415
constchildrenMap={
1516
label:StringControl,
17+
icon:IconControl,
1618
hidden:BoolCodeControl,
1719
disabled:BoolCodeControl,
1820
active:BoolCodeControl,
@@ -29,6 +31,7 @@ const childrenMap = {
2931

3032
typeChildrenType={
3133
label:InstanceType<typeofStringControl>;
34+
icon:InstanceType<typeofIconControl>;
3235
hidden:InstanceType<typeofBoolCodeControl>;
3336
disabled:InstanceType<typeofBoolCodeControl>;
3437
active:InstanceType<typeofBoolCodeControl>;
@@ -45,6 +48,7 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
4548
return(
4649
<>
4750
{this.children.label.propertyView({label:trans("label")})}
51+
{this.children.icon.propertyView({label:trans("icon")})}
4852
{hiddenPropertyView(this.children)}
4953
{this.children.active.propertyView({label:trans("navItemComp.active")})}
5054
{disabledPropertyView(this.children)}
@@ -71,6 +75,7 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
7175
exposingNode():RecordNode<NavItemExposing>{
7276
returnfromRecord({
7377
label:this.children.label.exposingNode(),
78+
icon:this.children.icon.exposingNode(),
7479
hidden:this.children.hidden.exposingNode(),
7580
disabled:this.children.disabled.exposingNode(),
7681
active:this.children.active.exposingNode(),
@@ -81,6 +86,7 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
8186

8287
typeNavItemExposing={
8388
label:Node<string>;
89+
icon:Node<any>;
8490
hidden:Node<boolean>;
8591
disabled:Node<boolean>;
8692
active:Node<boolean>;

0 commit comments

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