Inbox desktop template/open details router in div

irabba · November 16, 2020, 2:19pm

Is there a possibility to implement the below template using framework7

List

details

plague69 · November 16, 2020, 11:22pm

Is it possible? Yes.

Or are you looking for an explanation on how to and what elements to use?

Just a rough view, I’d say you’ll be using 50/50 Framework7 code/styles and custom js/css

John · November 17, 2020, 6:29am

Master detail does that.

github.com

framework7io/framework7/blob/master/kitchen-sink/core/pages/master-detail-master.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">Back</span>
        </a>
      </div>
      <div class="title">Master Detail</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block block-strong">
      <p>Master-Detail pattern oftenly used on wide enough screens and tablets, and consists of two views. Master - is an area in the UI where you have a list of something. Detail - is the area that shows the relevant information of a selection in the master.</p>
      <p>To see Master Detail view make sure the window width is larger than 800px.</p>
      <p>When collapsed (on narrow screen) navigation between such pages will behave as usual routing.</p>
      <p>Navigation to/from Master-Detail view happens without transition.</p>
    </div>

This file has been truncated. show original

irabba · November 17, 2020, 11:23am

thanks plague69 for your replay

what I was looking for a solution 100% by framework7 if possible, because I already implemented the code for mobile using virtual list with all the needed actions, so I wanted to use the same implantation but changing the layout.

my question is how to open the details router in the left div? in the mobile the details router will fill the whole screen, keep in mind I can’t use master/details, as details part will be always visible

Thanks for your help

John · November 18, 2020, 2:16am

by viewName https://framework7.io/docs/routes.html#route-properties
or data-view https://framework7.io/docs/view.html#linking-between-pages-views
?