Example customizing left panel

[yarmenti]

Hi,

First of all, thank you very much for this contribution regarding voila. As far as I saw, this is the best I've seen to get what people except : an easy dashboard implementation.

As I'm not familiar enough with vuetify, would it be possible to have an example on how to customize the left panel (menu) to display new functionalities related to the notebook itself? More precisely, instead of having hrefs there I would like, when clicking on any button, to get a new content itself rendered within a container set in the notebook.

This would enable to get a fully responsive dashboard with different metrics.

I hope m'y english was correct, and thank you again for this project !

[maartenbreddels]

Hi Yannick,

First of all, thank you very much for this contribution regarding voila. As far as I saw, this is the best I've seen to get what people except : an easy dashboard implementation.

totally agree, glad you see it the same way :)

As I'm not familiar enough with vuetify, would it be possible to have an example on how to customize the left panel (menu) to display new functionalities related to the notebook itself? More precisely, instead of having hrefs there I would like, when clicking on any button, to get a new content itself rendered within a container set in the notebook.

Yes, see my example repo: binder link for a demo https://github.com/maartenbreddels/voila-demo

Basically, if you use _metadata={'mount_id': 'content-nav'}, (see notebook or .py file to usage), you can override what is shown in the left panel.

Regards,

Maarten

[yarmenti]

Hi Maarten,

Thank you very much for your answer and the link provided. It is something no so far :) that I (and I guess we) would like to have!

Indeed, is it possible when clicking (or selecting or whatever else), to get the current content hidden, whereas a new content is displayed instead of changing the current state of a widget?

I understand that your content-nav contains the items appearing in the left-panel, and the provided example changes the widget state of your content-main.

As I didn't try yet, is it as easy as:

1. creating a Python function that changes the children property of the content-main object,
2. and map it to a ipyvuetify button itself rendered in the content-nav mount-id?

Thanks again!

[mariobuikhuizen]

As I didn't try yet, is it as easy as:

creating a Python function that changes the children property of the content-main object, and map it to a ipyvuetify button itself rendered in the content-nav mount-id?

Yes, note that you have to assign a new list to the children traitlet instead of mutating the existing list, else no change is detected by the traitlets framework.