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

Commit5c5d19b

Browse files
committed
add segmented control for both modes in the navComp
1 parentd47b2fb commit5c5d19b

File tree

1 file changed

+28
-16
lines changed
  • client/packages/lowcoder/src/comps/comps/navComp

1 file changed

+28
-16
lines changed

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

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@ import { default as DownOutlined } from "@ant-design/icons/DownOutlined";
1313
import{defaultasMenuOutlined}from"@ant-design/icons/MenuOutlined";
1414
import{defaultasDropdown}from"antd/es/dropdown";
1515
import{defaultasMenu,MenuProps}from"antd/es/menu";
16+
importSegmentedfrom"antd/es/segmented";
1617
import{defaultasDrawer}from"antd/es/drawer";
1718
import{migrateOldData}from"comps/generators/simpleGenerators";
1819
import{styleControl}from"comps/controls/styleControl";
1920
import{IconControl}from"comps/controls/iconControl";
21+
import{controlItem}from"components/control";
2022
import{
2123
AnimationStyle,
2224
AnimationStyleType,
@@ -68,6 +70,13 @@ function transToPxSize(size: string | number) {
6870
returnisNumeric(size) ?size+"px" :(sizeasstring);
6971
}
7072

73+
typeMenuItemStyleOptionValue="normal"|"hover"|"active";
74+
constmenuItemStyleOptions=[
75+
{label:"Normal",value:"normal"},
76+
{label:"Hover",value:"hover"},
77+
{label:"Active",value:"active"},
78+
]asconst;
79+
7180
constNavInner=styled("div")<Pick<IProps,"$justify"|"$orientation">>`
7281
// margin: 0 -16px;
7382
height: 100%;
@@ -285,26 +294,28 @@ function renderAdvancedSection(children: any) {
285294
);
286295
}
287296

288-
functionrenderStyleSections(children:any){
297+
functionrenderStyleSections(children:any,styleSegment:MenuItemStyleOptionValue,setStyleSegment:(k:MenuItemStyleOptionValue)=>void){
289298
constisHamburger=children.displayMode.getView()==='hamburger';
290299
return(
291300
<>
292301
{!isHamburger&&(
293-
<>
294-
<Sectionname={sectionNames.style}>
295-
{children.style.getPropertyView()}
296-
</Section>
297-
<Sectionname={"Item Style"}>
298-
{children.navItemStyle.getPropertyView()}
299-
</Section>
300-
<Sectionname={"Item Hover Style"}>
301-
{children.navItemHoverStyle.getPropertyView()}
302-
</Section>
303-
<Sectionname={"Item Active Style"}>
304-
{children.navItemActiveStyle.getPropertyView()}
305-
</Section>
306-
</>
302+
<Sectionname={sectionNames.style}>
303+
{children.style.getPropertyView()}
304+
</Section>
307305
)}
306+
<Sectionname={isHamburger ?"Drawer Item Style" :trans("navLayout.navItemStyle")}>
307+
{controlItem({},(
308+
<Segmented
309+
block
310+
options={menuItemStyleOptionsasany}
311+
value={styleSegment}
312+
onChange={(k)=>setStyleSegment(kasMenuItemStyleOptionValue)}
313+
/>
314+
))}
315+
{styleSegment==="normal"&&children.navItemStyle.getPropertyView()}
316+
{styleSegment==="hover"&&children.navItemHoverStyle.getPropertyView()}
317+
{styleSegment==="active"&&children.navItemActiveStyle.getPropertyView()}
318+
</Section>
308319
{isHamburger&&(
309320
<>
310321
<Sectionname={"Hamburger Button Style"}>
@@ -526,14 +537,15 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
526537
constmode=useContext(EditorContext).editorModeStatus;
527538
constshowLogic=mode==="logic"||mode==="both";
528539
constshowLayout=mode==="layout"||mode==="both";
540+
const[styleSegment,setStyleSegment]=useState<MenuItemStyleOptionValue>("normal");
529541

530542
return(
531543
<>
532544
{renderBasicSection(children)}
533545
{showLogic&&renderInteractionSection(children)}
534546
{showLayout&&renderLayoutSection(children)}
535547
{showLogic&&renderAdvancedSection(children)}
536-
{showLayout&&renderStyleSections(children)}
548+
{showLayout&&renderStyleSections(children,styleSegment,setStyleSegment)}
537549
</>
538550
);
539551
})

0 commit comments

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