How to create routable popup with routable tabbar

i want to open a popup with tabbar layout use aurora theme,

this is my route.js

{
        path: "/user-detail/:uid/",
        popup:{
            componentUrl: 'pages/popup-user-detail.html',
            tabs: [
                {
                    path: "/user-info/",
                    id: "tab-user-1",
                    componentUrl: "pages/user/page-user-info.html",
                },
                {
                    path: "/pay-record/",
                    id: "tab-user-2",
                    componentUrl: "pages/user/page-pay-record.html",
                },
                {
                    path: "/income-record/",
                    id: "tab-user-3",
                    componentUrl: "pages/user/page-income-record.html",
                },
                {
                    path: "/auth-info/",
                    id: "tab-user-4",
                    componentUrl: "pages/user/page-auth-info.html",
                },
                {
                    path: "/bank-info/",
                    id: "tab-user-5",
                    componentUrl: "pages/user/page-bank-info.html",
                },
                {
                    path: "/open-log/",
                    id: "tab-user-6",
                    componentUrl: "pages/user/page-open-log.html",
                },
                {
                    path: "/ip-log/",
                    id: "tab-user-7",
                    componentUrl: "pages/user/page-ip-log.html",
                },
                {
                    path: "/dynamic-list/",
                    id: "tab-user-8",
                    componentUrl: "pages/user/page-dynamic-list.html",
                },
                {
                    path: "/chat-list/",
                    id: "tab-user-9",
                    componentUrl: "pages/user/page-chat-list.html",
                }
            ]
     },
},

this is my popup-user-detail.html

<div class="toolbar tabbar no-hairline toolbar-top">
    <div class="toolbar-inner">
	<a href="/user-info/" data-route-tab-id="tab-user-1" class="tab-link tab-link-active">Base</a>
	<a href="/pay-record/" data-route-tab-id="tab-user-2" class="tab-link">Pay</a>
	<a href="/income-record/" data-route-tab-id="tab-user-3" class="tab-link">Income</a>
	<a href="/auth-info/" data-route-tab-id="tab-user-4" class="tab-link">Auth</a>
	<a href="/bank-info/" data-route-tab-id="tab-user-5" class="tab-link">Bank Info</a>
	<a href="/open-log/" data-route-tab-id="tab-user-6" class="tab-link">Open Log</a>
	<a href="/ip-log/" data-route-tab-id="tab-user-7" class="tab-link">IP Log</a>
	<a href="/dynamic-list/" data-route-tab-id="tab-user-8" class="tab-link">Dynamic List</a>
	<a href="/chat-list/" data-route-tab-id="tab-user-9" class="tab-link">Chat List</a>
    </div>
</div>
<div class="tabs tabs-routable">
	<div id="tab-user-1" class="page-content tab tab-active"></div>
	<div id="tab-user-2" class="page-content tab"></div>
	<div id="tab-user-3" class="page-content tab"></div>
	<div id="tab-user-4" class="page-content tab"></div>
	<div id="tab-user-5" class="page-content tab"></div>
	<div id="tab-user-6" class="page-content tab"></div>
	<div id="tab-user-7" class="page-content tab"></div>
	<div id="tab-user-8" class="page-content tab"></div>
	<div id="tab-user-9" class="page-content tab"></div>
</div>

it not work,

You should create View in Popup

yes, this is the full layout:
it can open popup ,but can’t switch the tabs ,and tab content is blank

<template>
	<div class="popup popup-user-detail">
		<div class="view view-init">
			<div class="page">
				<div class="navbar no-hairline">
					<div class="navbar-bg" style="-webkit-backdrop-filter: unset"></div>
					<div class="navbar-inner">
						<div class="left"></div>
						<div class="title">User Detail</div>
						<div class="right"><a href="#" class="link popup-close">Close</a> </div>
					</div>
				</div>
				<div class="toolbar tabbar no-hairline toolbar-top-aurora">
					<div class="toolbar-inner">
						<a href="/user-info/" data-route-tab-id="tab-user-1" class="tab-link tab-link-active">BaseInfo</a>
						<a href="/pay-record/" data-route-tab-id="tab-user-2" class="tab-link">Pay Log</a>
						<a href="/income-record/" data-route-tab-id="tab-user-3" class="tab-link">Income Log</a>
						<a href="/auth-info/" data-route-tab-id="tab-user-4" class="tab-link">Auth info</a>
						<a href="/bank-info/" data-route-tab-id="tab-user-5" class="tab-link">Bank info</a>
						<a href="/open-log/" data-route-tab-id="tab-user-6" class="tab-link">Open log</a>
						<a href="/ip-log/" data-route-tab-id="tab-user-7" class="tab-link">IP Log</a>
						<a href="/dynamic-list/" data-route-tab-id="tab-user-8" class="tab-link">Dynamic List</a>
						<a href="/chat-list/" data-route-tab-id="tab-user-9" class="tab-link">Chat List</a>
					</div>
				</div>
				<div class="tabs tabs-routable">
					<div id="tab-user-1" class="page-content tab tab-active"></div>
					<div id="tab-user-2" class="page-content tab"></div>
					<div id="tab-user-3" class="page-content tab"></div>
					<div id="tab-user-4" class="page-content tab"></div>
					<div id="tab-user-5" class="page-content tab"></div>
					<div id="tab-user-6" class="page-content tab"></div>
					<div id="tab-user-7" class="page-content tab"></div>
					<div id="tab-user-8" class="page-content tab"></div>
					<div id="tab-user-9" class="page-content tab"></div>
				</div>
			</div>
		</div>
	</div>
</template>

Does your code work if the View is not in Popup?

it can’t work aslo, Framework7 not suppourt this?

You need to move Popup’s page to separate route and use tab routes there:

{
  path: "/user-detail-popup/:uid/",
  popup: {
    componentUrl: "pages/popup-user-detail.html",
  },
},
{
  path: '/user-details-page/:uid/',
  componentUrl: 'pages/page-user-detail.html',
  tabs: [
    // tabs here
  ]
},

Move Page template to another component, and your popup template should look like this:

<template>
  <div class="popup popup-user-detail">
    <div class="view view-init" data-url="/user-details-page/{{$route.params.uid}}"></div>
  </div>
</template>

So View in popup will load the page and tabs

2 Likes

thanks , it work,
by the way, in /user-detail-page/ must set full path like this, or it can’t switch tab

1 Like