2

I'm a beginner with framework 7. I'm developing a little app and I split the html code in different files because i have a lot of pages with div in common. My problem is: I have a page.html, inside my page.html I'd like to include different div in the same windows from different html files. for example in php we can do it with a

include("");

but in framework7 I can include only one with

<div class="view view-main view-init" data-url="/page/" data-name="page"></div>

I'd like to include more one view like this

<div class="view view-main view-init" data-url="/page1/" data-name="page1"></div>
<div class="view view-main view-init" data-url="/page2/" data-name="page2"></div>

i put an image here to explain me better.

what i'd like to do Thank you for your help.

pages.html

<div data-name="pages" class="page">    
<div class="page-content pg-no-padding">

    <div class="row justify-content-center">
        <div class="col-100 tablet-100 desktop-80">
            <div class="block">
            <form class="list" id="pages1">

                <div class="row justify-content-center">
                    <div class="block-title">
                        <h1> Pages</h1>
                    </div> <!--block-title-->
                </div><!--row-->

                <div class="row">
                    <div class="col">
                        <div class="block-title">
                            <h2> Card 1</h2>
                        </div> 

                        <div class="card">
                            <div class="card-content card-content-padding"> 
                            <div class="row">
                                <div class="col-100 tablet-auto desktop-auto">
                                    <div class="list no-hairlines-md">
                                    <ul>
                                        <li class="item-content item-input">
                                            <div class="item-inner">
                                                <div class="item-title item-label">Input1</div>
                                                <div class="item-input-wrap">
                                                    <input type="number" placeholder="" name="">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="item-content item-input">
                                            <div class="item-inner">
                                                <div class="item-title item-label">Input2</div>
                                                <div class="item-input-wrap">
                                                    <input type="number" placeholder="" name="">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    </div>
                                </div><!--col-->
                            </div><!--row-->
                            </div><!--card-content-->
                        </div><!--card-->                               
                    </div><!--col-->
                </div><!--row-->


                Here I'd like to include the code inside pages1.html

                Here I'd like to include the code inside pages2.html


            </form> 
            </div><!--block-->


            <div class="block">
            <a class="col button button-fill" href="#">Salva</a>
            </div>

        </div><!--col-100-->        
    </div><!--row-->
</div> <!-- ./ page-content-->

pages1.html

<div class="row">
                    <div class="col">
                        <div class="block-title">
                            <h2> Card2</h2>
                        </div> 

                        <div class="card">
                            <div class="card-content card-content-padding"> 
                            <div class="row">
                                <div class="col-100 tablet-auto desktop-auto">
                                    <div class="list no-hairlines-md">
                                    <ul>
                                        <li class="item-content item-input">
                                            <div class="item-inner">
                                                <div class="item-title item-label">Input1</div>
                                                <div class="item-input-wrap">
                                                    <input type="number" placeholder="" name="">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>

                                        <li class="item-content item-input">
                                            <div class="item-inner">
                                                <div class="item-title item-label">Input2</div>
                                                <div class="item-input-wrap">
                                                    <input type="number" placeholder="" name="">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    </div>
                                </div><!--col-->
                            </div><!--row-->
                            </div><!--card-content-->
                        </div><!--card-->                               
                    </div><!--col-->
                </div><!--row-->

2 Answers 2

0

To include Multiple Views Layout you need to do this:

  1. You need to create wrapper with class views like this: <div class="views tabs">
  2. You need to create div view like this: <div class="view view-main tab tab-active" id="view-1">.related page..</div><div class="view tab" id="view-2">.related page..</div>
  3. You need to make sure thats only one views class wrapper.

In Js: You can control multiple views by this:

var view1 = app.views.create('#view-1', {...}); 
var view2 = app.views.create('#view-2', {...}); 

For more details: F7 View

For Embedded Multi view not like tab: Example Note: for each view in F7 is got 100% height...you need to make sure thats height is equal 100% finally

5
  • Hi Anees, thank you for your help, but it creates tab. I edited my questions to explain me better.
    – Jean
    Oct 29, 2018 at 8:45
  • Your welcome mate...I updated my answer by adding now a real example for multi view like your image... Oct 29, 2018 at 14:53
  • Hi, thank you for your reply. I saw the example, but the content MainView in my case is inside page1.html and the content homeview inside page2.html
    – Jean
    Oct 29, 2018 at 16:35
  • Welcome fgg, you need to set routes for view1 and view2...thats load needed content as you like for example: routes: [// First one { path: '/', url: './home.html' }, ] // Second one: routes: [ { path: '/', url: './page2.html' }, ] I think this will resolve you issue Oct 29, 2018 at 16:39
  • I included the path in my-app.json but How can I include pages1.html and pages2.html in pages.html? i uploaded my question. Thank you
    – Jean
    Oct 29, 2018 at 16:53
0

EDIT: After a long investigation, I found from the documentation that you can do it like this:

<!-- in your views page, just add these parameter to your view you want to inherit -->
<div class="view view-init" data-url="/your-page/" data-name="home" data-push-state="true">
  ...
</div>

And in your routers, will need to define your route as well:

var app = new Framework7({
  root: '#app',

  // Create routes for all pages
  routes: [
    {
      path: '/',
      url: 'index.html',
    },{
      // Add your contents page route 
      path: '/your-page/',
      url: 'pages/your-page.html',
    },
    .....
});

Hope this help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.