How to create routable popup with routable tabbar

Questions
1

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

image
image1225Ă—561 24.9 KB

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,

2

You should create View in Popup

3

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>
4

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

5

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

6

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
7

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

image
image1158Ă—712 94.4 KB

1 Like