Router component: dynamic usage possible?

1

I’m using router components a lot, and that works great. Sometimes I have a situation, where I would like to be able to use some component as regular page and as popup depending on the ‘user route’. This might be dependent on UX decisions: open a detail panel in new page, or in a popup with push:true option.

Currently, I maintain two versions of some components: one with <div class="page"> layout, and one with <div class="popup"> layout, each with a corresponding route.

I’m wondering if it is possible to setup a component without a specified page/popup/modal container, and define the way it should be openend with a router.navigate option (and matching data- attribute on a link).

2
1 Like
3

At the moment, the most can be done here is, for example, moving the page itself to a separate path. And still keeping two routes with Popup like:

<template>
  <div class="popup">
    <div class="view view-init" data-url="/some-common-page/"></div>
  </div>
</template>

So popup will reuse that page.

But yeah, it seems like it can be a good new feature for Framework7

1 Like
4

Thanks @nolimits4web! That is exactly the workaround I was looking for, but couldn’t get my mind around it. Having a separate route for a popup version is no problem, but at least I didn’t want to have two copies of the same page component, with the only difference being the ‘container’.

I think I’m going to create a generic “popup container component”, like this

<template>
  <div class="popup">
    <div class="view view-init" data-url="{{js "this.$route.url.substr(6)"}}"></div>
  </div>
</template>

Then create regular routes like /my-page for a page itself, and a single /popup/(.*) route which only loads the popup container and passes the full url minus the /popup part to the view.

Now I can easily modify a button to open a page in a popup by prepending /popup/ in it’s href url.

1 Like
5

@nolimits4web Saw this in the V6 docs, great! Keep up the good work! :smiley::facepunch:

How is this done on router/component level? Is a regular page component wrapped inside a ‘popup’ container automatically on load? Just curious :slight_smile:

image

6

Yes, you just keep page-only template:

<template>
  <div class="page">...
</template>

And it will be wrapped automatically with Popup, LoginScreen, etc. on open

1 Like