Routing inside modal Sheet

Hey,

I searched the Forum up and down but I couldn’t find the right answer to my problem.

I’m trying to setup a modal sheet holding a Toolbar and a List of items. Each item should be linking to another component showing a form. What I cannot figure out is, how to setup the routing so that my components would open inside THE SAME modal sheet and not in the main view.

It’s a little bit like the behavior in the Smart Select control where you tap and item and the list moves over to the left and another list is shown. The only difference is, that I don’t need to get anything back to my first list from the form component.

I already checked the documentation but can’t seem to figure out how to do it.

I tried several things already (maybe doing it wrong!?):
https://framework7.io/docs/routes.html#routable-modals
https://framework7.io/docs/view.html#linking-between-pages-views

Btw. I am using Framework7-Vue so if anybody could help, I would appreciate it!

Thanks in advance

ps: This is what my modal currently looks like: (Experimenting with Smart Select Control)

<template>
<f7-sheet class="settingsSheet" swipe-to-close backdrop>
    <f7-view class="view-init view-sheet-modal">
        <f7-page>
            <f7-toolbar>
            <div class="left">
                <f7-link sheet-close icon-ios="f7:multiply" icon-aurora="f7:multiply" icon-md="material:close"></f7-link>
            </div>
            <div class="center">Settings</div>
            <div class="right">
                <f7-link sheet-close icon-ios="f7:info_circle" icon-aurora="f7:info_circle" icon-md="material:info"></f7-link>
            </div>
            </f7-toolbar>
            <f7-page-content>
                <f7-list>
                    <f7-list-item link="#" title="Your Account" smart-select>
                        <select name="mac-windows">
                            <option value="mac" selected>Option1</option>
                            <option value="windows">Option2</option>
                        </select>
                    </f7-list-item>
                    <f7-list-item link="#" title="Push Settings">
                    </f7-list-item>
                    <f7-list-item link="#" title="Server Settings">
                    </f7-list-item>
                    <f7-list-item link="#" title="Advanced Settings">
                    </f7-list-item>
                </f7-list>
            </f7-page-content>
        </f7-page>
    </f7-view>
</f7-sheet>
</template>

Can nobody help me with this? :frowning:

You need to setup routes for these pages inside of sheet, and just use it as you do with other pages.

<f7-sheet class="settingsSheet" swipe-to-close backdrop>
    <f7-view class="view-sheet-modal" url="/sheet-1/" />
</f7-sheet>

in routes

{
  path: '/sheet-1/',
  component: SheetPage1,
},
{
  path: '/sheet-2/',
  component: SheetPage2,
},

SheetPage1 component:

<f7-page>
  ...
  <f7-link href="/sheet-2/">...</f7-link>
</f7-page>

SheetPage2 component:

<f7-page>
  ...
</f7-page>
1 Like

Thanks so much for this solution.
I was pulling out my hair over this :slight_smile: