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

Commit978c641

Browse files
committed
add styles for the submenu
1 parent7c1837a commit978c641

File tree

3 files changed

+145
-15
lines changed

3 files changed

+145
-15
lines changed

‎client/packages/lowcoder-design/src/components/Dropdown.tsx‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -159,16 +159,6 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
159159
const{ placement="right"}=props;
160160
constvalueInfoMap=_.fromPairs(props.options.map((option)=>[option.value,option]));
161161

162-
useEffect(()=>{
163-
constdropdownElems=document.querySelectorAll<HTMLElement>("div.ant-dropdown ul.ant-dropdown-menu");
164-
for(letindex=0;index<dropdownElems.length;index++){
165-
constelement=dropdownElems[index];
166-
element.style.maxHeight="300px";
167-
element.style.overflowY="scroll";
168-
element.style.minWidth="150px";
169-
element.style.paddingRight="10px";
170-
}
171-
},[]);
172162

173163
return(
174164
<FlexDivstyle={props.style}className={props.className}>

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

Lines changed: 102 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ import {
2929
NavLayoutItemStyle,
3030
NavLayoutItemHoverStyle,
3131
NavLayoutItemActiveStyle,
32+
NavSubMenuItemStyle,
33+
NavSubMenuItemHoverStyle,
34+
NavSubMenuItemActiveStyle,
3235
}from"comps/controls/styleControlConstants";
3336
import{hiddenPropertyView,showDataLoadingIndicatorsPropertyView}from"comps/utils/propertyUtils";
3437
import{trans}from"i18n";
@@ -152,9 +155,61 @@ const ItemList = styled.div<{ $align: string, $orientation?: string }>`
152155
justify-content:${(props)=>props.$align};
153156
`;
154157

155-
constStyledMenu=styled(Menu)<MenuProps>`
156-
&.ant-dropdown-menu {
157-
min-width: 160px;
158+
constStyledMenu=styled(Menu)<
159+
MenuProps&{
160+
$color:string;
161+
$hoverColor:string;
162+
$activeColor:string;
163+
$bg?:string;
164+
$hoverBg?:string;
165+
$activeBg?:string;
166+
$border?:string;
167+
$hoverBorder?:string;
168+
$activeBorder?:string;
169+
$radius?:string;
170+
$fontFamily?:string;
171+
$fontStyle?:string;
172+
$textWeight?:string;
173+
$textSize?:string;
174+
$padding?:string;
175+
$margin?:string;
176+
$textTransform?:string;
177+
$textDecoration?:string;
178+
}
179+
>`
180+
/* Base submenu item styles */
181+
.ant-dropdown-menu-item{
182+
color:${(p)=>p.$color};
183+
background-color:${(p)=>p.$bg||"transparent"};
184+
border-radius:${(p)=>p.$radius||"0px"};
185+
font-weight:${(p)=>p.$textWeight||500};
186+
font-family:${(p)=>p.$fontFamily||"sans-serif"};
187+
font-style:${(p)=>p.$fontStyle||"normal"};
188+
font-size:${(p)=>p.$textSize||"14px"};
189+
text-transform:${(p)=>p.$textTransform||"none"};
190+
text-decoration:${(p)=>p.$textDecoration||"none"};
191+
padding:${(p)=>p.$padding||"0 16px"};
192+
margin:${(p)=>p.$margin||"0px"};
193+
line-height: 30px;
194+
}
195+
/* Hover state */
196+
.ant-dropdown-menu-item:hover{
197+
color:${(p)=>p.$hoverColor||p.$activeColor};
198+
background-color:${(p)=>p.$hoverBg||"transparent"};
199+
cursor: pointer;
200+
}
201+
/* Selected/active state */
202+
.ant-dropdown-menu-item-selected,
203+
.ant-menu-item-selected {
204+
color:${(p)=>p.$activeColor};
205+
background-color:${(p)=>p.$activeBg||p.$bg||"transparent"};
206+
border:${(p)=>(p.$activeBorder ?`1px solid${p.$activeBorder}` :"1px solid transparent")};
207+
}
208+
/* Disabled state */
209+
.ant-dropdown-menu-item-disabled,
210+
.ant-menu-item-disabled {
211+
opacity: 0.5;
212+
cursor: not-allowed;
158213
}
159214
`;
160215

@@ -333,7 +388,13 @@ function renderAdvancedSection(children: any) {
333388
);
334389
}
335390

336-
functionrenderStyleSections(children:any,styleSegment:MenuItemStyleOptionValue,setStyleSegment:(k:MenuItemStyleOptionValue)=>void){
391+
functionrenderStyleSections(
392+
children:any,
393+
styleSegment:MenuItemStyleOptionValue,
394+
setStyleSegment:(k:MenuItemStyleOptionValue)=>void,
395+
subStyleSegment:MenuItemStyleOptionValue,
396+
setSubStyleSegment:(k:MenuItemStyleOptionValue)=>void
397+
){
337398
constisHamburger=children.displayMode.getView()==='hamburger';
338399
return(
339400
<>
@@ -355,6 +416,19 @@ function renderStyleSections(children: any, styleSegment: MenuItemStyleOptionVal
355416
{styleSegment==="hover"&&children.navItemHoverStyle.getPropertyView()}
356417
{styleSegment==="active"&&children.navItemActiveStyle.getPropertyView()}
357418
</Section>
419+
<Sectionname={"Submenu Item Style"}>
420+
{controlItem({},(
421+
<Segmented
422+
block
423+
options={menuItemStyleOptionsasany}
424+
value={subStyleSegment}
425+
onChange={(k)=>setSubStyleSegment(kasMenuItemStyleOptionValue)}
426+
/>
427+
))}
428+
{subStyleSegment==="normal"&&children.subNavItemStyle.getPropertyView()}
429+
{subStyleSegment==="hover"&&children.subNavItemHoverStyle.getPropertyView()}
430+
{subStyleSegment==="active"&&children.subNavItemActiveStyle.getPropertyView()}
431+
</Section>
358432
{isHamburger&&(
359433
<>
360434
<Sectionname={"Hamburger Button Style"}>
@@ -402,6 +476,9 @@ const childrenMap = {
402476
hamburgerButtonStyle:styleControl(HamburgerButtonStyle,'hamburgerButtonStyle'),
403477
drawerContainerStyle:styleControl(DrawerContainerStyle,'drawerContainerStyle'),
404478
animationStyle:styleControl(AnimationStyle,'animationStyle'),
479+
subNavItemStyle:styleControl(NavSubMenuItemStyle,'subNavItemStyle'),
480+
subNavItemHoverStyle:styleControl(NavSubMenuItemHoverStyle,'subNavItemHoverStyle'),
481+
subNavItemActiveStyle:styleControl(NavSubMenuItemActiveStyle,'subNavItemActiveStyle'),
405482
items:withDefault(migrateOldData(createNavItemsControl(),fixOldItemsData),{
406483
optionType:"manual",
407484
manual:[
@@ -502,13 +579,32 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
502579
...item,
503580
icon:item.icon||undefined,
504581
}))}
582+
$color={(props.subNavItemStyle&&props.subNavItemStyle.text)||props.style.text}
583+
$hoverColor={(props.subNavItemHoverStyle&&props.subNavItemHoverStyle.text)||props.style.accent}
584+
$activeColor={(props.subNavItemActiveStyle&&props.subNavItemActiveStyle.text)||props.style.accent}
585+
$bg={(props.subNavItemStyle&&props.subNavItemStyle.background)||undefined}
586+
$hoverBg={(props.subNavItemHoverStyle&&props.subNavItemHoverStyle.background)||undefined}
587+
$activeBg={(props.subNavItemActiveStyle&&props.subNavItemActiveStyle.background)||undefined}
588+
$border={(props.subNavItemStyle&&props.subNavItemStyle.border)||undefined}
589+
$hoverBorder={(props.subNavItemHoverStyle&&props.subNavItemHoverStyle.border)||undefined}
590+
$activeBorder={(props.subNavItemActiveStyle&&props.subNavItemActiveStyle.border)||undefined}
591+
$radius={(props.subNavItemStyle&&props.subNavItemStyle.radius)||undefined}
592+
$fontFamily={props.style.fontFamily}
593+
$fontStyle={props.style.fontStyle}
594+
$textWeight={props.style.textWeight}
595+
$textSize={props.style.textSize}
596+
$padding={(props.subNavItemStyle&&props.subNavItemStyle.padding)||props.style.padding}
597+
$margin={(props.subNavItemStyle&&props.subNavItemStyle.margin)||props.style.margin}
598+
$textTransform={props.style.textTransform}
599+
$textDecoration={props.style.textDecoration}
505600
/>
506601
);
507602
return(
508603
<Dropdown
509604
key={idx}
510605
popupRender={()=>subMenu}
511606
disabled={disabled}
607+
trigger={["click"]}
512608
>
513609
{item}
514610
</Dropdown>
@@ -603,14 +699,15 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
603699
constshowLogic=mode==="logic"||mode==="both";
604700
constshowLayout=mode==="layout"||mode==="both";
605701
const[styleSegment,setStyleSegment]=useState<MenuItemStyleOptionValue>("normal");
702+
const[subStyleSegment,setSubStyleSegment]=useState<MenuItemStyleOptionValue>("normal");
606703

607704
return(
608705
<>
609706
{renderBasicSection(children)}
610707
{showLogic&&renderInteractionSection(children)}
611708
{showLayout&&renderLayoutSection(children)}
612709
{showLogic&&renderAdvancedSection(children)}
613-
{showLayout&&renderStyleSections(children,styleSegment,setStyleSegment)}
710+
{showLayout&&renderStyleSections(children,styleSegment,setStyleSegment,subStyleSegment,setSubStyleSegment)}
614711
</>
615712
);
616713
})

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2386,6 +2386,46 @@ export const NavLayoutItemActiveStyle = [
23862386
},
23872387
]asconst;
23882388

2389+
// Submenu item styles (normal/hover/active), similar to top-level menu items
2390+
exportconstNavSubMenuItemStyle=[
2391+
getBackground("primarySurface"),
2392+
getStaticBorder("transparent"),
2393+
RADIUS,
2394+
{
2395+
name:"text",
2396+
label:trans("text"),
2397+
depName:"background",
2398+
depType:DEP_TYPE.CONTRAST_TEXT,
2399+
transformer:contrastText,
2400+
},
2401+
MARGIN,
2402+
PADDING,
2403+
]asconst;
2404+
2405+
exportconstNavSubMenuItemHoverStyle=[
2406+
getBackground("canvas"),
2407+
getStaticBorder("transparent"),
2408+
{
2409+
name:"text",
2410+
label:trans("text"),
2411+
depName:"background",
2412+
depType:DEP_TYPE.CONTRAST_TEXT,
2413+
transformer:contrastText,
2414+
},
2415+
]asconst;
2416+
2417+
exportconstNavSubMenuItemActiveStyle=[
2418+
getBackground("primary"),
2419+
getStaticBorder("transparent"),
2420+
{
2421+
name:"text",
2422+
label:trans("text"),
2423+
depName:"background",
2424+
depType:DEP_TYPE.CONTRAST_TEXT,
2425+
transformer:contrastText,
2426+
},
2427+
]asconst;
2428+
23892429
exportconstCarouselStyle=[getBackground("canvas")]asconst;
23902430

23912431
exportconstRichTextEditorStyle=[
@@ -2525,6 +2565,9 @@ export type NavLayoutItemHoverStyleType = StyleConfigType<
25252565
exporttypeNavLayoutItemActiveStyleType=StyleConfigType<
25262566
typeofNavLayoutItemActiveStyle
25272567
>;
2568+
exporttypeNavSubMenuItemStyleType=StyleConfigType<typeofNavSubMenuItemStyle>;
2569+
exporttypeNavSubMenuItemHoverStyleType=StyleConfigType<typeofNavSubMenuItemHoverStyle>;
2570+
exporttypeNavSubMenuItemActiveStyleType=StyleConfigType<typeofNavSubMenuItemActiveStyle>;
25282571

25292572
exportfunctionwidthCalculator(margin:string){
25302573
constmarginArr=margin?.trim().replace(/\s+/g," ").split(" ")||"";

0 commit comments

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