How to implement Multiple Frames using nativescript-vue MultiDrawer?

Question

I was using RadSideDrawer but now I wanted to try multidrawer.

repo readme file says...

<MultiDrawer>
  <StackLayout slot="left">
    <Label text="Im in the left drawer" />  
  </StackLayout>

  <Frame /> <!-- main content goes into the default slot -->
</MultiDrawer>

What is the default slot?

my main.ts file ...

Vue.use(MultiDrawer)

new Vue({
  store,
  render: h => h('frame', [h(App)])
}).$start()

While using RadSideDrawer I was adding menu to a component and adding menu to all other views.

All nativescript marketplace uses render: h => h('frame', [h(HelloWorld)]) accept Playing with Shadows.

How to implement Multiple Frames if I need conditional navigation such as render: h => h("frame", [h(backendService.isLoggedIn() ? routes.home : routes.login)])

Where should I add <MultiDrawer> tag?
Where should I add main content?
Is there any demo project using multidrawer?

I there anyone using multidrawer as component?

user11387353
– user11387353

2020-04-22 04:59:27 +00:00
Commented Apr 22, 2020 at 4:59 — user11387353
– user11387353, Commented Apr 22, 2020 at 4:59

Igor R. · Accepted Answer · 2020-04-22 08:34:28Z

1

It depends what you actually need. The drawer itself is nothing more than a component that has up to 5 slots: left, right, top, bottom and default.

A frame is an element that is responsible for navigation, it keeps track of it's backstack and can be navigated to different pages and can manage the backstack with clearHistory, backstackVisible...

You can combine these depending on your needs. If you need a frame that navigates between the "logged out" pages (these don't need a drawer) and "logged in" pages, you have multiple options:

make the MultiDrawer your root element, and add a single frame to the default slot. Toggle if the drawer is enabled based on current location (this would need something like nativescript-vue-navigator to keep track of the current "route").

render: h => h('frame', [h(App)])

is the same as

<Frame>
  <App />
</Frame>

If I need to alter the root element, I usually change it to

render: h => h(App)

And write all the elements inside the App component:

<MultiDrawer :enabled="isLoggedIn">
  <!-- left slot left out but would go here -->

  <!-- a navigator in the default slot -->
  <Navigator :defaultRoute="isLoggedIn ? '/home' : '/login'"/>
</MultiDrawer>

Use multiple frames, one frame as the root frame, with an id like "authFrame". Navigate this frame for "logged out" auth pages, and a "logged in" Main page. On the Main page, add the MultiDrawer, and a second Frame as it's content in the default slot.

  <!-- a pseudo code example of the structure, the different pages would be $navigateTo'd and not actually nested as child elements -->
  <Frame id="authFrame">
    <LoginPage/>
    <RegisterPage/>
    <MainPage>
      <MultiDrawer>
        <Frame/> <!-- the frame to navigate "logged in" pages -->
      </MultiDrawer>
    </MainPage>
  </Frame>

answered Apr 22, 2020 at 8:34

Igor R.

8975 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cem Kaan Over a year ago

console log is full of JS: [flush] serialized 29 instances.

Igor R. Over a year ago

That's just VueDevtools.

Collectives™ on Stack Overflow

How to implement Multiple Frames using nativescript-vue MultiDrawer?

What is the default slot?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What is the default slot?

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related