Skip to content

Commit 8086c26

Browse files
iamfaraniamfaran
committed
[Feat]: extend nav item styles
1 parent 68150c9 commit 8086c26

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)