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

Commit8086c26

Browse files
committed
[Feat]: extend nav item styles
1 parent68150c9 commit8086c26

File tree

4 files changed

+243
-111
lines changed

4 files changed

+243
-111
lines changed

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,11 @@ const DrawerList = styled.div<{
183183
gap: 8px;
184184
background-color:${(p)=>p.$itemStyle.background};
185185
color:${(p)=>p.$itemStyle.text};
186+
font-size:${(p)=>p.$itemStyle.textSize};
187+
font-family:${(p)=>p.$itemStyle.fontFamily};
188+
font-style:${(p)=>p.$itemStyle.fontStyle};
189+
font-weight:${(p)=>p.$itemStyle.textWeight};
190+
text-decoration:${(p)=>p.$itemStyle.textDecoration};
186191
border-radius:${(p)=>p.$itemStyle.radius};
187192
border: 1px solid${(p)=>p.$itemStyle.border};
188193
margin:${(p)=>p.$itemStyle.margin};
@@ -194,11 +199,21 @@ const DrawerList = styled.div<{
194199
background-color:${(p)=>p.$hoverStyle.background};
195200
color:${(p)=>p.$hoverStyle.text};
196201
border: 1px solid${(p)=>p.$hoverStyle.border};
202+
font-size:${(p)=>p.$hoverStyle.textSize||p.$itemStyle.textSize};
203+
font-family:${(p)=>p.$hoverStyle.fontFamily||p.$itemStyle.fontFamily};
204+
font-style:${(p)=>p.$hoverStyle.fontStyle||p.$itemStyle.fontStyle};
205+
font-weight:${(p)=>p.$hoverStyle.textWeight||p.$itemStyle.textWeight};
206+
text-decoration:${(p)=>p.$hoverStyle.textDecoration||p.$itemStyle.textDecoration};
197207
}
198208
.drawer-item.active {
199209
background-color:${(p)=>p.$activeStyle.background};
200210
color:${(p)=>p.$activeStyle.text};
201211
border: 1px solid${(p)=>p.$activeStyle.border};
212+
font-size:${(p)=>p.$activeStyle.textSize||p.$itemStyle.textSize};
213+
font-family:${(p)=>p.$activeStyle.fontFamily||p.$itemStyle.fontFamily};
214+
font-style:${(p)=>p.$activeStyle.fontStyle||p.$itemStyle.fontStyle};
215+
font-weight:${(p)=>p.$activeStyle.textWeight||p.$itemStyle.textWeight};
216+
text-decoration:${(p)=>p.$activeStyle.textDecoration||p.$itemStyle.textDecoration};
202217
}
203218
`;
204219

@@ -260,16 +275,37 @@ const StyledTabBar = styled(TabBar)<{
260275
.adm-tab-bar-item {
261276
background-color:${(props)=>props.$tabItemStyle?.background};
262277
color:${(props)=>props.$tabItemStyle?.text};
278+
font-size:${(props)=>props.$tabItemStyle?.textSize};
279+
font-family:${(props)=>props.$tabItemStyle?.fontFamily};
280+
font-style:${(props)=>props.$tabItemStyle?.fontStyle};
281+
font-weight:${(props)=>props.$tabItemStyle?.textWeight};
282+
text-decoration:${(props)=>props.$tabItemStyle?.textDecoration};
263283
border-radius:${(props)=>props.$tabItemStyle?.radius} !important;
264284
border:${(props)=>`1px solid${props.$tabItemStyle?.border}`};
265285
margin:${(props)=>props.$tabItemStyle?.margin};
266286
padding:${(props)=>props.$tabItemStyle?.padding};
287+
288+
.adm-tab-bar-item-title {
289+
font-size:${(props)=>props.$tabItemStyle?.textSize};
290+
font-family:${(props)=>props.$tabItemStyle?.fontFamily};
291+
font-style:${(props)=>props.$tabItemStyle?.fontStyle};
292+
font-weight:${(props)=>props.$tabItemStyle?.textWeight};
293+
text-decoration:${(props)=>props.$tabItemStyle?.textDecoration};
294+
}
267295
}
268296
269297
.adm-tab-bar-item:hover {
270298
background-color:${(props)=>props.$tabItemHoverStyle?.background} !important;
271299
color:${(props)=>props.$tabItemHoverStyle?.text} !important;
272300
border:${(props)=>`1px solid${props.$tabItemHoverStyle?.border}`};
301+
302+
.adm-tab-bar-item-title {
303+
font-size:${(props)=>props.$tabItemHoverStyle?.textSize||props.$tabItemStyle?.textSize};
304+
font-family:${(props)=>props.$tabItemHoverStyle?.fontFamily||props.$tabItemStyle?.fontFamily};
305+
font-style:${(props)=>props.$tabItemHoverStyle?.fontStyle||props.$tabItemStyle?.fontStyle};
306+
font-weight:${(props)=>props.$tabItemHoverStyle?.textWeight||props.$tabItemStyle?.textWeight};
307+
text-decoration:${(props)=>props.$tabItemHoverStyle?.textDecoration||props.$tabItemStyle?.textDecoration};
308+
}
273309
}
274310
275311
.adm-tab-bar-item.adm-tab-bar-item-active {
@@ -278,6 +314,13 @@ const StyledTabBar = styled(TabBar)<{
278314
.adm-tab-bar-item-icon, .adm-tab-bar-item-title {
279315
color:${(props)=>props.$tabItemActiveStyle.text};
280316
}
317+
.adm-tab-bar-item-title {
318+
font-size:${(props)=>props.$tabItemActiveStyle?.textSize||props.$tabItemStyle?.textSize};
319+
font-family:${(props)=>props.$tabItemActiveStyle?.fontFamily||props.$tabItemStyle?.fontFamily};
320+
font-style:${(props)=>props.$tabItemActiveStyle?.fontStyle||props.$tabItemStyle?.fontStyle};
321+
font-weight:${(props)=>props.$tabItemActiveStyle?.textWeight||props.$tabItemStyle?.textWeight};
322+
text-decoration:${(props)=>props.$tabItemActiveStyle?.textDecoration||props.$tabItemStyle?.textDecoration};
323+
}
281324
}
282325
`;
283326

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

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,18 +87,42 @@ const StyledMenu = styled(AntdMenu)<{
8787
border:${(props)=>`1px solid${props.$navItemStyle?.border}`};
8888
margin:${(props)=>props.$navItemStyle?.margin};
8989
padding:${(props)=>props.$navItemStyle?.padding};
90+
}
9091
92+
.ant-menu-title-content {
93+
font-size:${(props)=>props.$navItemStyle?.textSize};
94+
font-family:${(props)=>props.$navItemStyle?.fontFamily};
95+
font-style:${(props)=>props.$navItemStyle?.fontStyle};
96+
font-weight:${(props)=>props.$navItemStyle?.textWeight};
97+
text-decoration:${(props)=>props.$navItemStyle?.textDecoration};
9198
}
99+
92100
.ant-menu-item-active {
93101
background-color:${(props)=>props.$navItemHoverStyle?.background} !important;
94102
color:${(props)=>props.$navItemHoverStyle?.text} !important;
95103
border:${(props)=>`1px solid${props.$navItemHoverStyle?.border}`};
104+
105+
.ant-menu-title-content {
106+
font-size:${(props)=>props.$navItemHoverStyle?.textSize||props.$navItemStyle?.textSize};
107+
font-family:${(props)=>props.$navItemHoverStyle?.fontFamily||props.$navItemStyle?.fontFamily};
108+
font-style:${(props)=>props.$navItemHoverStyle?.fontStyle||props.$navItemStyle?.fontStyle};
109+
font-weight:${(props)=>props.$navItemHoverStyle?.textWeight||props.$navItemStyle?.textWeight};
110+
text-decoration:${(props)=>props.$navItemHoverStyle?.textDecoration||props.$navItemStyle?.textDecoration};
111+
}
96112
}
97113
98114
.ant-menu-item-selected {
99115
background-color:${(props)=>props.$navItemActiveStyle?.background} !important;
100116
color:${(props)=>props.$navItemActiveStyle?.text} !important;
101117
border:${(props)=>`1px solid${props.$navItemActiveStyle?.border}`};
118+
119+
.ant-menu-title-content {
120+
font-size:${(props)=>props.$navItemActiveStyle?.textSize||props.$navItemStyle?.textSize};
121+
font-family:${(props)=>props.$navItemActiveStyle?.fontFamily||props.$navItemStyle?.fontFamily};
122+
font-style:${(props)=>props.$navItemActiveStyle?.fontStyle||props.$navItemStyle?.fontStyle};
123+
font-weight:${(props)=>props.$navItemActiveStyle?.textWeight||props.$navItemStyle?.textWeight};
124+
text-decoration:${(props)=>props.$navItemActiveStyle?.textDecoration||props.$navItemStyle?.textDecoration};
125+
}
102126
}
103127
104128
.ant-menu-submenu {
@@ -112,11 +136,15 @@ const StyledMenu = styled(AntdMenu)<{
112136
max-height: 100%;
113137
background-color:${(props)=>props.$navItemStyle?.background};
114138
color:${(props)=>props.$navItemStyle?.text};
139+
font-size:${(props)=>props.$navItemStyle?.textSize};
140+
font-family:${(props)=>props.$navItemStyle?.fontFamily};
141+
font-style:${(props)=>props.$navItemStyle?.fontStyle};
142+
font-weight:${(props)=>props.$navItemStyle?.textWeight};
143+
text-decoration:${(props)=>props.$navItemStyle?.textDecoration};
115144
border-radius:${(props)=>props.$navItemStyle?.radius} !important;
116145
border:${(props)=>`1px solid${props.$navItemStyle?.border}`};
117146
margin: 0;
118147
padding:${(props)=>props.$navItemStyle?.padding};
119-
120148
}
121149
122150
.ant-menu-item {
@@ -129,6 +157,11 @@ const StyledMenu = styled(AntdMenu)<{
129157
background-color:${(props)=>props.$navItemHoverStyle?.background} !important;
130158
color:${(props)=>props.$navItemHoverStyle?.text} !important;
131159
border:${(props)=>`1px solid${props.$navItemHoverStyle?.border}`};
160+
font-size:${(props)=>props.$navItemHoverStyle?.textSize||props.$navItemStyle?.textSize};
161+
font-family:${(props)=>props.$navItemHoverStyle?.fontFamily||props.$navItemStyle?.fontFamily};
162+
font-style:${(props)=>props.$navItemHoverStyle?.fontStyle||props.$navItemStyle?.fontStyle};
163+
font-weight:${(props)=>props.$navItemHoverStyle?.textWeight||props.$navItemStyle?.textWeight};
164+
text-decoration:${(props)=>props.$navItemHoverStyle?.textDecoration||props.$navItemStyle?.textDecoration};
132165
}
133166
}
134167
&.ant-menu-submenu-selected {
@@ -137,6 +170,11 @@ const StyledMenu = styled(AntdMenu)<{
137170
background-color:${(props)=>props.$navItemActiveStyle?.background} !important;
138171
color:${(props)=>props.$navItemActiveStyle?.text} !important;
139172
border:${(props)=>`1px solid${props.$navItemActiveStyle?.border}`};
173+
font-size:${(props)=>props.$navItemActiveStyle?.textSize||props.$navItemStyle?.textSize};
174+
font-family:${(props)=>props.$navItemActiveStyle?.fontFamily||props.$navItemStyle?.fontFamily};
175+
font-style:${(props)=>props.$navItemActiveStyle?.fontStyle||props.$navItemStyle?.fontStyle};
176+
font-weight:${(props)=>props.$navItemActiveStyle?.textWeight||props.$navItemStyle?.textWeight};
177+
text-decoration:${(props)=>props.$navItemActiveStyle?.textDecoration||props.$navItemStyle?.textDecoration};
140178
}
141179
}
142180
}

0 commit comments

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