[SOLVED] V3 F7 Routable Tabs question

Questions
1

Hi. Thank you for F7 it’s really awesome! However I’m having an issue with routable-tabs which I’m hoping someone will spot right off the bat…

Here you can see how I’ve patched in v3 routable tabs example into the main view. I’ve put it here because I want the tabs to be available to the user in all contexts:

Here I register the routes for the tabbed toolbar:

It’s not clear to me whether or not I need the “url” attribbute on line 41 as the tabs are already rendered.
But what is clear to me though is that none of the routes are rendering within the tabbed component.
Nothing explicitly calls /tabs-routable/ in routes - which is concerning because only calling data-url="/" here give me the tabs in all contexts

Nevertheless no content is rendered in the tabs whether I put data-url="/" or data-url="/tabs-routable/"

Suggestions/pull requests welcomed.

2

You have wrong route cinfigures. First of all, you need to remove in index.html everything that is under view-main and keep it empty:

<div class="view view-main view-init safe-areas" data-url="/"></div>

Then you home route must contain routable tabs:

{
    path: '/',
    component: HomePage,
    tabs: [
      {
        path: '/',
        id: 'tab-1',
        content: ' \
        <div class="block"> \
          <p>Tab 1 content</p> \
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p> \
          <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p> \
          <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p> \
        </div> \
        ',
      },
      {
        path: '/tab-2/',
        id: 'tab-2',
        content: '\
        <div class="block"> \
          <p>Tab 2 content</p> \
          <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p> \
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p> \
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p> \
        </div> \
        ',
      },
      {
        path: '/tab-3/',
        id: 'tab-3',
        content: '\
        <div class="block"> \
          <p>Tab 3 content</p> \
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p> \
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p> \
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p> \
        </div> \
        ',
      },
    ],

  },
3

That worked! I placed the tabbar component(ry) in the in the HomePage component, modified the routes.js as specified and everything worked like magic! Thanks @nolimits4web