Multiple views in same man view

Questions
#1

How can I make 2 views inside the main view app (like in the image attached)?
I need to create a chat app.

Schermata 2020-02-27 alle 22.07.30|690x499

#2

use f7 cli and choose Split View (Split Panel)

https://framework7.io/cli/

#3

I never used it before :smiley can you show me some code or some links?
I’d like to create a chat app like messenger for web platform

#4

just read the doc;
https://framework7.io/cli/

#5

also, here you have a how to:

#6

Thanks a lot I take a look :smiley:

#7

Still can’t get it. I’m using react-framework7 but. I have no idea how to do that…
Can anyone help me pls?
Thanks.

#8

Or try to create new app with F7 CLI and set Split View template. Also check the Master Details feature https://framework7.io/docs/view.html#master-detail

#9

I tried also CLI, installed a split wb app. but still don’t know how to add another split view inside. Can you help me pls?

#10

Hi there. I have the same question. I would like to have first a login / register screen before redirecting the user to a tabbes views. How can i implement that?

Currently i have this. But i would like to have a single view layout first and then a tabbed one

    <f7-views main tabs class="safe-areas" url="/">
      <f7-toolbar tabbar bottom>
        <f7-link
          tab-link="#view-home"
          tab-link-active
          icon-ios="f7:house_fill"
          icon-aurora="f7:house_fill"
          icon-md="material:home"
        ></f7-link>

        <f7-link
          tab-link="#view-barbers"
          icon-ios="f7:scissors"
          icon-aurora="f7:scissors"
          icon-md="material:content_cut"
        ></f7-link>

        <f7-link
          tab-link="#view-appointments"
          icon-ios="f7:clock"
          icon-aurora="f7:clock"
          icon-md="material:calendar_month"
        ></f7-link>
        <f7-link
          tab-link="#view-notifications"
          icon-ios="f7:bell_fill"
          icon-aurora="f7:bell_fill"
          icon-md="material:notifications"
        ></f7-link>
        <f7-link
          tab-link="#view-settings"
          icon-ios="f7:gear_alt_fill"
          icon-aurora="f7:gear_alt_fill"
          icon-md="material:settings"
        ></f7-link>
      </f7-toolbar>

      <f7-view id="view-home" main tab tab-active url="/home"></f7-view>
      <f7-view id="view-barbers" name="barbers" tab url="/barbers"></f7-view>
      <f7-view id="view-appointments" name="appointments" tab url="/appointments/"></f7-view>
      <f7-view id="view-notifications" name="notifications" tab url="/notifications/"></f7-view>
      <f7-view id="view-settings" name="settings" tab url="/settings/"></f7-view>
    </f7-views>