{
"cells": [
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"import holoviews as hv\n",
"import panel as pn\n",
"from bokeh.themes.theme import Theme\n",
"\n",
"hv.extension(\"bokeh\")\n",
"hv.renderer('bokeh').theme = Theme(json={}) # Reset Theme\n",
"pn.extension()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Material Template for Panel\n",
"\n",
"[Panel](https://panel.holoviz.org/index.html) is a framework for creating awesome analytics apps in Python.\n",
"\n",
"**In Panel you are able to customize the layout and style using a [Custom Template](https://panel.holoviz.org/user_guide/Templates.html).**\n",
"\n",
"One popular design specification is [Material Design](https://material.io/design/). The following frameworks aims to implement the Material Design specification\n",
"\n",
"- [Material Design Lite](https://getmdl.io/) (`mdl`) (simple components)\n",
"- [Material Design Components for the Web](https://material.io/develop/web/) (`mdc`) (advanced components)\n",
"- [Material Web Components](https://github.com/material-components/material-components-web-components) (`mwc`) (web components on top of mdc)\n",
"\n",
"The `mwc` components should be the easiest to integrate with Panel, so we will base the following on `mwc` with a fall back to `mdc` when needed.\n",
"\n",
" \n",
"
"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Material Introduction\n",
"\n",
"### Fonts\n",
"\n",
"Material Design uses the **Roboto** Font and **Material Icons**. Lets import them."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"fonts_html = \"\"\"\n",
"\n",
"\n",
"\"\"\"\n",
"pn.pane.HTML(fonts_html, height=0, width=0, sizing_mode=\"fixed\", margin=0)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### MWC Components\n",
"\n",
"We start by importing the **components**. \n",
"\n",
"We will be using the `mwc-button`, `mwc-drawer`, `mwc-icon-button`, `mwc-slider`, `mwc-top-app-bar-fixed` in our examples."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"modules_html = \"\"\"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\"\"\"\n",
"pn.pane.HTML(modules_html, height=0, width=0, sizing_mode=\"fixed\", margin=0)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Then the app **layout**, **contents** and some code to enable **toggling** of the `mwcdrawer` as well as displaying the app in a note book cell."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"example_html = \"\"\"\n",
"
This is a Panel app using a custom template based on Material Design. It works both in the Notebook and as a web app.