Material App Template Example

Panel
1

Hi All

I’ve started to contribute a Material Design App Template for Panel based on the mwc web components.

The aim is to create a template that is awesome, fast, modern, reponsive, works on mobile, table, desktop and on server and in a Jupyter Notebook and can be customized.

Its important (I belive) that these are web components as all the html, css and javascript is isolated in the component and does not interfere with the Bokeh html, css and javascript. Thus enabling very modern, fast and responsive templates.

If you are interested and have comments, suggestions or contributions head over to the PR here

You can find the notebook example here https://github.com/holoviz/panel/blob/material-template-example/examples/gallery/templates/material_template.ipynb for now.

material_template_small
material_template_small1256×1242 6.2 MB

1 Like
2

Nice! I’m now using the golden layout template, but my app I just a collection of interconnected panels, so it should be very easy to switch layouts by popping the different panels in the proper slots.

Makes things very flexible. I guess it also supports stacks (Tabs?)

1 Like
3

HI @Jhsmit.

Its based on the material mwc components. So you/ I/ someone could just use the mwc-tabs component.

image
image1280×1236 40.2 KB

You can find a demo of all the mwc components here https://mwc-demos.glitch.me/demos/

4

Hi @Jhsmit

I did not know the golden layout template. It’s awesome.

Does it just work or are there some things to consider?

Thanks for sharing.

image
image1335×1149 255 KB

@philippjfr. We should definitely get some inspiration from the golden layout template and provide an example if we can find the time.

Take a look a the demo here http://golden-layout.com/examples/#6fb265dbf110900619f00ed3f2c258ba

5

And I got it working in the notebook as well.

mwc_top_app_bar_works
mwc_top_app_bar_works1153×1206 351 KB

6

@marc It does work quite well, I found out about it because of the VTKSlicer example.

I only had an issue with matplotlib panels (see here), although now that I’ve changed my plots to bokeh I sort of worked around that. But the option would still be nice to have.

1 Like