(convertTreeData, mobileNavJsonMenuItems),
tabs: manualOptionsControl(TabOptionComp, {
initOptions: [
{
@@ -142,17 +245,64 @@ let MobileTabLayoutTmp = (function () {
},
],
}),
+ jsonTabs: manualOptionsControl(TabOptionComp, {
+ initOptions: [],
+ }),
+ backgroundImage: withDefault(StringControl, ""),
+ navStyle: withDefault(styleControl(NavLayoutStyle), defaultStyle),
+ navItemStyle: withDefault(styleControl(NavLayoutItemStyle), defaultStyle),
+ navItemHoverStyle: withDefault(styleControl(NavLayoutItemHoverStyle), {}),
+ navItemActiveStyle: withDefault(styleControl(NavLayoutItemActiveStyle), {}),
};
return new MultiCompBuilder(childrenMap, (props) => {
return null;
})
.setPropertyViewFn((children) => {
+ const [styleSegment, setStyleSegment] = useState('normal')
return (
- <>
+
- {children.tabs.propertyView({})}
+ {children.dataOptionType.propertyView({
+ radioButton: true,
+ type: "oneline",
+ })}
+ {
+ children.dataOptionType.getView() === DataOption.Manual
+ ? children.tabs.propertyView({})
+ : children.jsonItems.propertyView({
+ label: "Json Data",
+ })
+ }
- >
+
+ {children.backgroundImage.propertyView({
+ label: `Background Image`,
+ placeholder: 'https://temp.im/350x400',
+ })}
+
+
+ { children.navStyle.getPropertyView() }
+
+
+ {controlItem({}, (
+ setStyleSegment(k as MenuItemStyleOptionValue)}
+ />
+ ))}
+ {styleSegment === 'normal' && (
+ children.navItemStyle.getPropertyView()
+ )}
+ {styleSegment === 'hover' && (
+ children.navItemHoverStyle.getPropertyView()
+ )}
+ {styleSegment === 'active' && (
+ children.navItemActiveStyle.getPropertyView()
+ )}
+
+
);
})
.build();
@@ -161,20 +311,54 @@ let MobileTabLayoutTmp = (function () {
MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
const [tabIndex, setTabIndex] = useState(0);
const { readOnly } = useContext(ExternalEditorContext);
- const tabViews = (
- comp.children.tabs.children.manual.getView() as unknown as Array<
- ConstructorToComp
- >
- ).filter((tab) => !tab.children.hidden.getView());
- const currentTab = tabViews[tabIndex];
- const appView = (currentTab &&
- currentTab.children.app.getAppId() &&
- currentTab.children.app.getView()) || (
-
- );
+ const navStyle = comp.children.navStyle.getView();
+ const navItemStyle = comp.children.navItemStyle.getView();
+ const navItemHoverStyle = comp.children.navItemHoverStyle.getView();
+ const navItemActiveStyle = comp.children.navItemActiveStyle.getView();
+ const backgroundImage = comp.children.backgroundImage.getView();
+ const jsonItems = comp.children.jsonItems.getView();
+ const dataOptionType = comp.children.dataOptionType.getView();
+ const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas;
+
+ useEffect(() => {
+ comp.children.jsonTabs.dispatchChangeValueAction({
+ manual: jsonItems as unknown as Array>
+ });
+ }, [jsonItems]);
+
+ const tabViews = useMemo(() => {
+ if (dataOptionType === DataOption.Manual) {
+ return (comp.children.tabs.children.manual.getView() as unknown as Array<
+ ConstructorToComp
+ >
+ ).filter((tab) => !tab.children.hidden.getView());
+ }
+ if (dataOptionType === DataOption.Json) {
+ return (comp.children.jsonTabs.children.manual.getView() as unknown as Array<
+ ConstructorToComp
+ >
+ ).filter((tab) => !tab.children.hidden.getView());
+ }
+ return [];
+ }, [dataOptionType, jsonItems, comp.children.tabs, comp.children.jsonTabs])
+
+ const appView = useMemo(() => {
+ const currentTab = tabViews[tabIndex];
+
+ return (currentTab &&
+ currentTab.children.app.getAppId() &&
+ currentTab.children.app.getView()) || (
+
+ )
+ }, [tabIndex, tabViews, dataOptionType]);
+
+ let backgroundStyle = navStyle.background;
+ if(!isEmpty(backgroundImage)) {
+ backgroundStyle = `center / cover url('${backgroundImage}') no-repeat, ${backgroundStyle}`;
+ }
const tabBarView = (
{
selectedKey={tabIndex + ""}
onChange={(key) => setTabIndex(Number(key))}
readOnly={!!readOnly}
+ canvasBg={bgColor}
+ tabStyle={{
+ border: `1px solid ${navStyle.border}`,
+ radius: navStyle.radius,
+ text: navStyle.text,
+ margin: navStyle.margin,
+ padding: navStyle.padding,
+ background: backgroundStyle,
+ }}
+ tabItemStyle={navItemStyle}
+ tabItemHoverStyle={navItemHoverStyle}
+ tabItemActiveStyle={navItemActiveStyle}
/>
);
- //console.log("appView", appView);
-
if (readOnly) {
return (
diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts b/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts
index e8fc23c0b..d102dfdb1 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts
+++ b/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts
@@ -74,4 +74,31 @@ export const jsonMenuItems = [
newTab: true,
},
}
+]
+
+export const mobileNavJsonMenuItems = [
+ {
+ label: "Option 1",
+ icon: "https://cdn-icons-png.flaticon.com/128/149/149338.png",
+ app: {
+ appId: "",
+ },
+ hidden: false,
+ },
+ {
+ label: "Option 2",
+ icon: "https://cdn-icons-png.flaticon.com/128/149/149206.png",
+ app: {
+ appId: "",
+ },
+ hidden: false,
+ },
+ {
+ label: "Option 2",
+ icon: "https://cdn-icons-png.flaticon.com/128/149/149206.png",
+ app: {
+ appId: "",
+ },
+ hidden: true,
+ }
]
\ No newline at end of file