A Material Template Example

[MarcSkovMadsen]

I have created a Material Template Example .

I don't yet know where this will end. Maybe it will end as

• Just an example that shows Panel users how to use Material Design and mwc components to build awesome analytics apps in Python.
• a Material Design Generic Template (Builder) for Panel.
• The generic app template included in Panel?

There will be a lot of small tweaks to do. But it got a good start.

To me creating a few good, high quality templates like this is a killer feature. It makes Panel able to compete with BI tools and modern Front End frameworks. But in Python (almost) only.

[philippjfr]

This is great! I'll probably start adapting this for my work on default templates. One comment for now, please always clear the notebooks you commit to the repo.

[MarcSkovMadsen]

Hi @philippjfr

I managed to get the mwc-app-top-bar in the notebook as well simplifying the template so I can use the same for both server and notebook.

I believe this shows that using the mwc for a general base template in Panel works.

• Its fast, modern, responsive
• It works both in notebook and on server.
• There is a Material theme framework and the theme can easily be changed in our template.
• There are a lot of existing tools, users, blogs, apps etc. out there using Material.
• With the upcoming WebCompont it easy to integrate/ use mwc components like buttons, sliders etc. in the Panel app.

For me this has been a major motivation and goal to reach and the driver of the work I have put in so far. I think I will go out and take a glass of wine or a cup of tea :-)

When/ if I get the time I would love to see example Notebooks for Bootstrap and Vaadin as well. Both build on Web Components. Maybe I can find the time.

[MarcSkovMadsen]

Added some material on how to change the theme including the Holoviews theme.

[MarcSkovMadsen]

Improved the them and got the drawer toggling working when/ if the user shows the app in multiple cells.

[MarcSkovMadsen]

Created some github issues for problems with the mwc components.

Known Issues

• mwc:
  • Cannot change mwc-drawer background
  • Cannot align items of mwc-button to the left for menu
  • White space between menu and content

[MarcSkovMadsen]

I have feedback regarding the menu buttons. See material-components/material-web#1114 (comment).

I should switch to a mwc-list. See https://github.com/material-components/material-components-web-components/tree/master/packages/list

FYI. @philippjfr if you are working on a general Material Template.

[philippjfr]

Note that until MWC has complete support for all material components I will be using material components web, i.e. MDC not MWC.

[MarcSkovMadsen]

• Can you use mdc? I.e. I was afraid it would not be a great fit wit all the bokeh js and css similar to bootstrap? The great thing about mwc is that everything is in the shadow dom and isolated. Works both on server and in notebook.
• I will start to create a material component/ widget library of buttons, sliders etc. Will the mdc template and the mwc components work together?
• It's much easier for a user to sprinkle in the mwc components and set some attributes than combine normal components and all the mdc class hell.
• At some stage the user would like to access things like toggle button clicked and or drawer.open. Again it's easy to provide with an mwc-icon-button.

Just the reasons why I've been looking to mwc and not mdc.

But mwc is work in progress and it might be troublesome to build on.

[philippjfr]

Can you use mdc? I.e. I was afraid it would not be a great fit wit all the bokeh js and css similar to bootstrap?

I haven't seen any issues so far, at least in server apps.

The great thing about mwc is that everything is in the shadow dom and isolated Works both on server and in notebook.

This is a good point, MWC will definitely work better in the notebook as there is a little bit of weirdness there otherwise. If only the card component was complete...

Will the mdc template and the mwc components work together?

Yes, haven't seen any issue there, as you say MWC is nicely isolated.

It's much easier for a user to sprinkle in the mwc components and set some attributes than combine normal components and all the mdc class hell.

I'm talking about a default template here, a user would rarely mess with classes directly here.

I might try to provide both a MWC and MDC based default template and then compare.

[MarcSkovMadsen]

Would this be merged as an example?

Or is it replaced by some of the new templates or ?

[philippjfr]

I think it's still reasonable to merge it but call it "Custom Material Template" instead.

[philippjfr]

The reason I didn't merge this or give further feedback was because I assumed it was at least partially subsumed by the material template. If you still think we should go forward we will have to find some way to make clear that this is a very different beast from the bundled MaterialTemplate.

[MarcSkovMadsen]

Thx. The intention here is not to create a template for users to use. But document how to create custom JINJA templates. Very few people know how to do this today. And it's a super power of Panel that neither Streamlit nor Dash has.

Currently users try to use Panel layouts to layout and style their app. And that is just difficult to use to layout an entire app with. It's great for smaller sections. But not the entire app. Today (I claim) an organisation or project would not know they can make a custom template with their brand and maybe a mobile layout and using some layout components from a framework to get something awesome going.

[MarcSkovMadsen]

In my vision there would be a section in the gallery of Custom Templates just like you would have a section on Streaming apps. That section could contain a Bootstrap example, A Fast Example, a Shoelace Example, a Ionic example etc.

That would help users get started but also just understand what is possible. From the current documentation there is no visualization of a custom template that looks awesome. Only the included templates are shown.

[philippjfr]

Merging for now, will have to find a way to organize this better before releasing 0.11.