Enhance templates docs (#2658)

* clarifiy a sentence in the intro

* add a short definition for modal

* update the number of areas

* add links to template reference

* add an image of the 4 template areas

* add a modal section

* add link to the Golden framework

* clarify theming

examples/reference/templates/Bootstrap.ipynb

@@ -17,14 +17,14 @@
  "cell_type": "markdown",
  "metadata": {},
  "source": [
- "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring three main content areas on the page, which can be populated as desired:\n",
+ "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
  "\n",
  "* **`header`**: The header area of the HTML page\n",
  "* **`sidebar`**: A collapsible sidebar\n",
  "* **`main`**: The main area of the application\n",
  "* **`modal`**: A modal area which can be opened and closed from Python\n",
  "\n",
- "These three areas behave very similarly to other Panel layout components and have list-like semantics. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. \n",
+ "These four areas behave very similarly to other Panel layout components and have list-like semantics. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. \n",
  "\n",
  "Templates can allow for us to quickly and easily create web apps for displaying our data. Panel comes with a default Template, and includes multiple Templates that extend the default which add some customization for a better display.\n",
  "\n",

examples/reference/templates/FastGridTemplate.ipynb

@@ -24,7 +24,7 @@
  "* **`main`**: The main area of the application\n",
  "* **`modal`**: A modal area which can be opened and closed from Python\n",
  "\n",
- "These three areas behave very similarly to other Panel layout components. In particular the header, sidebar and modal behave just like the list-like `Row`/`Column` layouts while the main area behaves like a `GridSpec`. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. \n",
+ "These four areas behave very similarly to other Panel layout components. In particular the header, sidebar and modal behave just like the list-like `Row`/`Column` layouts while the main area behaves like a `GridSpec`. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. \n",
  "\n",
  "Templates can allow for us to quickly and easily create web apps for displaying our data. Panel comes with a default Template, and includes multiple Templates that extend the default which add some customization for a better display.\n",
  "\n",

examples/reference/templates/FastListTemplate.ipynb

@@ -17,14 +17,14 @@
  "cell_type": "markdown",
  "metadata": {},
  "source": [
- "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring three main content areas on the page, which can be populated as desired:\n",
+ "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
  "\n",
  "* **`header`**: The header area of the HTML page\n",
  "* **`sidebar`**: A collapsible sidebar\n",
  "* **`main`**: The main area of the application\n",
  "* **`modal`**: A modal area which can be opened and closed from Python\n",
  "\n",
- "These three areas behave very similarly to other Panel layout components and have list-like semantics. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. \n",
+ "These four areas behave very similarly to other Panel layout components and have list-like semantics. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. \n",
  "\n",
  "Templates can allow for us to quickly and easily create web apps for displaying our data. Panel comes with a default Template, and includes multiple Templates that extend the default which add some customization for a better display.\n",
  "\n",

examples/reference/templates/GoldenLayout.ipynb

@@ -3,28 +3,27 @@
  {
  "cell_type": "code",
  "execution_count": null,
- "metadata": {},
- "outputs": [],
  "source": [
  "import panel as pn\n",
  "import numpy as np\n",
  "import holoviews as hv\n",
  "\n",
  "pn.extension(sizing_mode = 'stretch_width')"
- ]
+ ],
+ "outputs": [],
+ "metadata": {}
  },
  {
  "cell_type": "markdown",
- "metadata": {},
  "source": [
- "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring three main content areas on the page, which can be populated as desired:\n",
+ "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
  "\n",
  "* **`header`**: The header area of the HTML page\n",
  "* **`sidebar`**: A collapsible sidebar\n",
  "* **`main`**: The main area of the application\n",
  "* **`modal`**: A modal area which can be opened and closed from Python\n",
  "\n",
- "These three areas behave very similarly to other Panel layout components and have list-like semantics. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. \n",
+ "These four areas behave very similarly to other Panel layout components and have list-like semantics. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. \n",
  "\n",
  "Templates can allow for us to quickly and easily create web apps for displaying our data. Panel comes with a default Template, and includes multiple Templates that extend the default which add some customization for a better display.\n",
  "\n",
@@ -43,20 +42,19 @@
  "* **`sidebar_width`** (int): The width of the sidebar in percent. Default is 20.\n",
  "\n",
  "________"
- ]
+ ],
+ "metadata": {}
  },
  {
  "cell_type": "markdown",
- "metadata": {},
  "source": [
- "In this case we are using the `GoldenTemplate`, built using the Golden Layout CSS, which allows for the creation of tabs that can be moved around. Due to the movable tabs this Template is a little different than the others. The sidebar works similarly to the other templates, but to have your displays render in different tabs, we have to make separate calls to `<template_name>.main.append()`. Here is an example of how you can set up a display using this template:"
- ]
+ "In this case we are using the `GoldenTemplate`, built using the [Golden Layout CSS](https://golden-layout.com/), which allows for the creation of tabs that can be moved around. Due to the movable tabs this Template is a little different than the others. The sidebar works similarly to the other templates, but to have your displays render in different tabs, we have to make separate calls to `<template_name>.main.append()`. Here is an example of how you can set up a display using this template:"
+ ],
+ "metadata": {}
  },
  {
  "cell_type": "code",
  "execution_count": null,
- "metadata": {},
- "outputs": [],
  "source": [
  "golden = pn.template.GoldenTemplate(title='Golden Template')\n",
  "\n",
@@ -91,29 +89,31 @@
  ")\n",
  "\n",
  "golden.servable();"
- ]
+ ],
+ "outputs": [],
+ "metadata": {}
  },
  {
  "cell_type": "markdown",
- "metadata": {},
  "source": [
  "<h3><b>GoldenTemplate with DefaultTheme</b></h3>\n",
  "<img src=\"../../assets/Golden.png\" style=\"margin-left: auto; margin-right: auto; display: block;\"></img>\n",
  "</br> \n",
  "<h3><b>GoldenTemplate with DarkTheme</b></h3>\n",
  "<img src=\"../../assets/GoldenDark.png\" style=\"margin-left: auto; margin-right: auto; display: block;\"></img>"
- ]
+ ],
+ "metadata": {}
  },
  {
  "cell_type": "markdown",
- "metadata": {},
  "source": [
  "The app can be displayed within the notebook by using `.servable()`, or rendered in another tab by replacing it with `.show()`. \n",
  "\n",
  "Themes can be added using the optional keyword argument `theme`. Each template comes with a DarkTheme and a DefaultTheme, which can be set `GoldenTemplate(theme=DarkTheme)`. If no theme is set, then DefaultTheme will be applied.\n",
  "\n",
  "It should be noted that Templates may not render correctly in a notebook, and for the best performance the should ideally be deployed to a server."
- ]
+ ],
+ "metadata": {}
  }
  ],
  "metadata": {
@@ -137,4 +137,4 @@
  },
  "nbformat": 4,
  "nbformat_minor": 4
-}
+}

examples/reference/templates/Material.ipynb

@@ -17,14 +17,14 @@
  "cell_type": "markdown",
  "metadata": {},
  "source": [
- "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring three main content areas on the page, which can be populated as desired:\n",
+ "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
  "\n",
  "* **`header`**: The header area of the HTML page\n",
  "* **`sidebar`**: A collapsible sidebar\n",
  "* **`main`**: The main area of the application\n",
  "* **`modal`**: A modal area which can be opened and closed from Python\n",
  "\n",
- "These three areas behave very similarly to other Panel layout components and have list-like semantics. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. \n",
+ "These four areas behave very similarly to other Panel layout components and have list-like semantics. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. \n",
  "\n",
  "Templates can allow for us to quickly and easily create web apps for displaying our data. Panel comes with a default Template, and includes multiple Templates that extend the default which add some customization for a better display.\n",
  "\n",

examples/reference/templates/Vanilla.ipynb

@@ -17,14 +17,14 @@
  "cell_type": "markdown",
  "metadata": {},
  "source": [
- "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring three main content areas on the page, which can be populated as desired:\n",
+ "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
  "\n",
  "* **`header`**: The header area of the HTML page\n",
  "* **`sidebar`**: A collapsible sidebar\n",
  "* **`main`**: The main area of the application\n",
  "* **`modal`**: A modal area which can be opened and closed from Python\n",
  "\n",
- "These three areas behave very similarly to other Panel layout components and have list-like semantics. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. \n",
+ "These four areas behave very similarly to other Panel layout components and have list-like semantics. This means we can easily append new components into these areas. Unlike other layout components however, the contents of the areas is fixed once rendered. If you need a dynamic layout you should therefore insert a regular Panel layout component (e.g. a `Column` or `Row`) and modify it in place once added to one of the content areas. \n",
  "\n",
  "Templates can allow for us to quickly and easily create web apps for displaying our data. Panel comes with a default Template, and includes multiple Templates that extend the default which add some customization for a better display.\n",
  "\n",