Master-detail routes use one view: a route marked master: true lists detailRoutes, whose paths are not joined to the master's. When the view is at least masterDetailBreakpoint pixels wide, the master page gets page-master and stays put, the view gets view-master-detail, and CSS pins the master at --f7-page-master-width (320 px) with the detail beside it.
The CLI's Split View template instead puts a second view inside a left panel, <div class="panel panel-left panel-cover" data-visible-breakpoint="960">, that stays open from 960 px. Tried at 1024 px, the panel got panel-in-breakpoint and pushed the main view 288 px to the right.
| Master-detail routes | Panel with visibleBreakpoint | |
|---|---|---|
| Views and histories | One | Two |
| Catalog links | Plain href | Need data-view=".view-main" |
| Phone layout | Catalog, then detail on top | Catalog in a closed panel |
BookNest uses master-detail, which keeps one set of links for every width.