diff --git a/examples/reference/templates/FastGridTemplate.ipynb b/examples/reference/templates/FastGridTemplate.ipynb
index 6c96217c70..a26ea52336 100644
--- a/examples/reference/templates/FastGridTemplate.ipynb
+++ b/examples/reference/templates/FastGridTemplate.ipynb
@@ -30,7 +30,18 @@
"\n",
"#### Parameters:\n",
"\n",
- "In addition to the four different areas we can populate, the `FastGridTemplate` declares a few variables to configure the layout:\n",
+ "In addition to the four different areas we can populate, the `FastGridTemplate` also provides the parameters below:\n",
+ "\n",
+ "* **`site`** (str): Name of the site. Will be shown in the header. Default is '', i.e. not shown.\n",
+ "* **`site_url`** (str): Url of the site and logo. Default is \"/\".\n",
+ "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n",
+ "* **`title`** (str): A title to show in the header. Also added to the document head meta settings and as the browser tab title.\n",
+ "* **`favicon`** (str): URI of favicon to add to the document head (if local file, favicon is base64 encoded as URI).\n",
+ "* **`sidebar_footer`** (str): Can be used to insert additional HTML. For example a menu, some additional info, links etc.\n",
+ "* **`config`** (TemplateConfig): Contains configuration options similar to `pn.config` but applied to the current Template only. (Currently only `css_files` is supported)\n",
+ "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n",
+ "\n",
+ "For configuring the **grid**\n",
"\n",
"* **`cols`** (dict): Number of columns in the grid for different display sizes (`default={'lg': 12, 'md': 10, 'sm': 6, 'xs': 4, 'xxs': 2}`)\n",
"* **`breakpoints`** (dict): Sizes in pixels for various layouts (`default={'lg': 1200, 'md': 996, 'sm': 768, 'xs': 480, 'xxs': 0}`)\n",
@@ -38,28 +49,40 @@
"* **`dimensions`** (dict): Minimum/Maximum sizes of cells in grid units (`default={'minW': 0, 'maxW': 'Infinity', 'minH': 0, 'maxH': 'Infinity'}`)\n",
"* **`prevent_collision`** (bool, default=Flase): Prevent collisions between grid items.\n",
"* **`save_layout`** {bool, default=False): Save layout changes to localStorage.\n",
- "* **`main_max_width`** (str): The maximum width of the main area. For example '800px' or '80%'. If the string is '' (default) no max width is set.\n",
- "* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 330.\n",
- "* **`sidebar_footer`** (str): Can be used to insert additional HTML. For example a menu, some additional info, links etc.\n",
- "* **`enable_theme_toggle`** (boolean): If `True` a switch to toggle the Theme is shown. Default is `True`.\n",
- "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n",
"\n",
- "Finally the `FastListTemplate` provides parameters for branding and styling:\n",
+ "For **styling** you can use\n",
"\n",
- "* **`title`** (str): A title to show in the header. Also added to the document head meta settings and as the browser tab title.\n",
- "* **`site`** (str): Name of the site. Will be shown in the header. Default is '', i.e. not shown.\n",
- "* **`site_url`** (str): Url of the site and logo. Default is \"/\".\n",
"* **`theme`** (Theme): A Theme class (available in `panel.template`. One of `DefaultTheme` or `DarkTheme`). \n",
" - For convenience you can provide \"default\" or \"dark\" string to the constructor.\n",
" - If you add `?theme=default` or `?theme=dark` in the url this will set the theme unless explicitly declared\n",
- "* **`favicon`** (str): URI of favicon to add to the document head (if local file, favicon is base64 encoded as URI).\n",
- "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n",
+ "* **`enable_theme_toggle`** (boolean): If `True` a switch to toggle the Theme is shown. Default is `True`.\n",
+ "* **`background_color`** (str): Optional body background color override.\n",
+ "* **`neutral_color`** (str): Optional body neutral color override.\n",
+ "* **`accent_base_color`** (str): Optional body accent base color override.\n",
"* **`header_background`** (str): Optional header background color override.\n",
"* **`header_color`** (str): Optional header text color override.\n",
+ "* **`header_neutral_color`** (str): Optional header neutral color override.\n",
"* **`header_accent_base_color`** (str): Optional header accent base color override.\n",
- "* **`accent_base_color`** (str): Optional body accent base color override.\n",
- "* **`config`** (TemplateConfig): Contains configuration options similar to `pn.config` but applied to the current Template only. Currently only `css_files` is supported.\n",
+ "* **`corner_radius`** (str): The corner radius applied to controls.\n",
+ "* **`font`** (str): A font url to import.\n",
+ "* **`font_url`** (str): A font url to import.\n",
+ "* **`shadow`** (str): Optional shadow override. Whether or not to apply shadow.\n",
+ "* **`main_layout`** (str): What to wrap the main components into. Options are '' (i.e. none) and 'card' (Default). Could be extended to Accordion, Tab etc. in the future.\n",
+ "\n",
+ "For **layout** you can use\n",
+ "\n",
+ "* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 330.\n",
+ "* **`main_max_width`** (str): The maximum width of the main area. For example '800px' or '80%'. If the string is '' (default) no max width is set.\n",
+ "\n",
+ "For **meta** and **base** values you can use\n",
"\n",
+ "* **`meta_description`** (str): A meta description to add to the document head for search engine optimization. For example 'P.A. Nelson'.\n",
+ "* **`meta_keywords`** (str): Meta keywords to add to the document head for search engine optimization.\n",
+ "* **`meta_author`** (str): A meta author to add to the the document head for search engine optimization. For example 'P.A. Nelson'.\n",
+ "* **`meta_refresh`** (str): A meta refresh rate to add to the document head. For example '30' will instruct the browser to refresh every 30 seconds. Default is '', i.e. no automatic refresh.\n",
+ "* **`meta_viewport`** (str): A meta viewport to add to the header.\n",
+ "* **`base_url`** (str): Specifies the base URL for all relative URLs in a page. Default is '', i.e. not the domain.\n",
+ "* **`base_target`** (str): Specifies the base Target for all relative URLs in a page. Default is _self.\n",
"\n",
"\n",
"________"
diff --git a/examples/reference/templates/FastListTemplate.ipynb b/examples/reference/templates/FastListTemplate.ipynb
index 8858cc2794..d386c58875 100644
--- a/examples/reference/templates/FastListTemplate.ipynb
+++ b/examples/reference/templates/FastListTemplate.ipynb
@@ -30,27 +30,51 @@
"\n",
"#### Parameters:\n",
"\n",
- "In addition to the four different areas we can populate, the `FastListTemplate` also provide additional parameters:\n",
+ "In addition to the four different areas we can populate, the `FastListTemplate` also provides the parameters below:\n",
"\n",
- "* **`title`** (str): A title to show in the header. Also added to the document head meta settings and as the browser tab title.\n",
"* **`site`** (str): Name of the site. Will be shown in the header. Default is '', i.e. not shown.\n",
"* **`site_url`** (str): Url of the site and logo. Default is \"/\".\n",
+ "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n",
+ "* **`title`** (str): A title to show in the header. Also added to the document head meta settings and as the browser tab title.\n",
+ "* **`favicon`** (str): URI of favicon to add to the document head (if local file, favicon is base64 encoded as URI).\n",
+ "* **`sidebar_footer`** (str): Can be used to insert additional HTML. For example a menu, some additional info, links etc.\n",
+ "* **`config`** (TemplateConfig): Contains configuration options similar to `pn.config` but applied to the current Template only. (Currently only `css_files` is supported)\n",
+ "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n",
+ "\n",
+ "For **styling** you can use\n",
+ "\n",
"* **`theme`** (Theme): A Theme class (available in `panel.template`. One of `DefaultTheme` or `DarkTheme`). \n",
" - For convenience you can provide \"default\" or \"dark\" string to the constructor.\n",
" - If you add `?theme=default` or `?theme=dark` in the url this will set the theme unless explicitly declared\n",
- "* **`favicon`** (str): URI of favicon to add to the document head (if local file, favicon is base64 encoded as URI).\n",
- "* **`logo`** (str): URI of logo to add to the header (if local file, logo is base64 encoded as URI).\n",
- "* **`sidebar_footer`** (str): Can be used to insert additional HTML. For example a menu, some additional info, links etc.\n",
"* **`enable_theme_toggle`** (boolean): If `True` a switch to toggle the Theme is shown. Default is `True`.\n",
+ "* **`background_color`** (str): Optional body background color override.\n",
+ "* **`neutral_color`** (str): Optional body neutral color override.\n",
+ "* **`accent_base_color`** (str): Optional body accent base color override.\n",
"* **`header_background`** (str): Optional header background color override.\n",
"* **`header_color`** (str): Optional header text color override.\n",
+ "* **`header_neutral_color`** (str): Optional header neutral color override.\n",
"* **`header_accent_base_color`** (str): Optional header accent base color override.\n",
- "* **`accent_base_color`** (str): Optional body accent base color override.\n",
- "* **`config`** (TemplateConfig): Contains configuration options similar to `pn.config` but applied to the current Template only. (Currently only `css_files` is supported)\n",
- "* **`main_max_width`** (str): The maximum width of the main area. For example '800px' or '80%'. If the string is '' (default) no max width is set.\n",
- "* **`busy_indicator`** (BooleanIndicator): Visual indicator of application busy state.\n",
+ "* **`corner_radius`** (str): The corner radius applied to controls.\n",
+ "* **`font`** (str): A font url to import.\n",
+ "* **`font_url`** (str): A font url to import.\n",
+ "* **`shadow`** (str): Optional shadow override. Whether or not to apply shadow.\n",
+ "* **`main_layout`** (str): What to wrap the main components into. Options are '' (i.e. none) and 'card' (Default). Could be extended to Accordion, Tab etc. in the future.\n",
+ "\n",
+ "For **layout** you can use\n",
"\n",
"* **`sidebar_width`** (int): The width of the sidebar in pixels. Default is 330.\n",
+ "* **`main_max_width`** (str): The maximum width of the main area. For example '800px' or '80%'. If the string is '' (default) no max width is set.\n",
+ "\n",
+ "For **meta** and **base** values you can use\n",
+ "\n",
+ "* **`meta_description`** (str): A meta description to add to the document head for search engine optimization. For example 'P.A. Nelson'.\n",
+ "* **`meta_keywords`** (str): Meta keywords to add to the document head for search engine optimization.\n",
+ "* **`meta_author`** (str): A meta author to add to the the document head for search engine optimization. For example 'P.A. Nelson'.\n",
+ "* **`meta_refresh`** (str): A meta refresh rate to add to the document head. For example '30' will instruct the browser to refresh every 30 seconds. Default is '', i.e. no automatic refresh.\n",
+ "* **`meta_viewport`** (str): A meta viewport to add to the header.\n",
+ "* **`base_url`** (str): Specifies the base URL for all relative URLs in a page. Default is '', i.e. not the domain.\n",
+ "* **`base_target`** (str): Specifies the base Target for all relative URLs in a page. Default is _self.\n",
+ "\n",
"________"
]
},
diff --git a/panel/template/fast/base.py b/panel/template/fast/base.py
index 84eea0b76e..9ddff9640a 100644
--- a/panel/template/fast/base.py
+++ b/panel/template/fast/base.py
@@ -3,7 +3,6 @@
import param
from ...io.state import state
-from ...widgets import Tabulator
from ..base import BasicTemplate
from ..react import ReactTemplate
from ..theme import THEMES, DefaultTheme
@@ -12,18 +11,45 @@
class FastBaseTemplate(BasicTemplate):
+
accent_base_color = param.String(doc="""
- Accent color override.""")
+ Optional body accent color override.""")
+
+ background_color = param.String(doc="""
+ Optional body background color override.""")
+
+ corner_radius = param.Integer(default=3, bounds=(0,25), doc="""
+ The corner radius applied to controls.""")
+
+ font = param.String(doc="""
+ The font to use.""")
+
+ font_url = param.String(doc="""
+ A font url to import.""")
+
+ header_neutral_color = param.String(doc="""
+ Optional header neutral color override.""")
header_accent_base_color = param.String(doc="""
Optional header accent color override.""")
+ neutral_color = param.String(doc="""
+ Optional body neutral color override.""")
+
theme_toggle = param.Boolean(default=True, doc="""
If True a switch to toggle the Theme is shown.""")
+ shadow = param.Boolean(doc="""
+ Optional shadow override. Whether or not to apply shadow.""")
+
sidebar_footer = param.String("", doc="""
A HTML string appended to the sidebar""")
+ # Might be extended to accordion or tabs in the future
+ main_layout = param.Selector(default="card", label="Layout", objects=["", "card"], doc="""
+ What to wrap the main components into. Options are '' (i.e. none) and 'card' (Default).
+ Could be extended to Accordion, Tab etc. in the future.""")
+
_css = [
_ROOT / "css/fast_root.css",
_ROOT / "css/fast_bokeh.css",
@@ -45,12 +71,6 @@ class FastBaseTemplate(BasicTemplate):
'bundle': False
}
- _modifiers = {
- Tabulator: {
- 'theme': 'fast'
- }
- }
-
__abstract = True
def __init__(self, **params):
@@ -64,6 +84,8 @@ def __init__(self, **params):
super().__init__(**params)
theme = self._get_theme()
+ if "background_color" not in params:
+ self.background_color = theme.style.background_color
if "accent_base_color" not in params:
self.accent_base_color = theme.style.accent_base_color
if "header_color" not in params:
@@ -72,6 +94,18 @@ def __init__(self, **params):
self.header_accent_base_color = theme.style.header_accent_base_color
if "header_background" not in params:
self.header_background = theme.style.header_background
+ if "neutral_color" not in params:
+ self.neutral_color = theme.style.neutral_color
+ if "header_neutral_color" not in params:
+ self.header_neutral_color = theme.style.header_neutral_color
+ if "corner_radius" not in params:
+ self.corner_radius = theme.style.corner_radius
+ if "font" not in params:
+ self.font = theme.style.font
+ if "font_url" not in params:
+ self.font_url = theme.style.font_url
+ if "shadow" not in params:
+ self.shadow = theme.style.shadow
@staticmethod
def _get_theme_from_query_args():
@@ -84,14 +118,22 @@ def _get_theme_from_query_args():
def _update_vars(self):
super()._update_vars()
style = self._get_theme().style
+ style.background_color = self.background_color
style.accent_base_color = self.accent_base_color
style.header_color = self.header_color
style.header_background = self.header_background
style.header_accent_base_color = self.header_accent_base_color
+ style.neutral_color = self.neutral_color
+ style.header_neutral_color = self.header_neutral_color
+ style.corner_radius = self.corner_radius
+ style.font = self.font
+ style.font_url = self.font_url
+ style.shadow = self.shadow
self._render_variables["style"] = style
self._render_variables["theme_toggle"] = self.theme_toggle
self._render_variables["theme"] = self.theme.__name__[:-5].lower()
self._render_variables["sidebar_footer"] = self.sidebar_footer
+ self._render_variables["main_layout"] = self.main_layout
class FastGridBaseTemplate(FastBaseTemplate, ReactTemplate):
diff --git a/panel/template/fast/grid/dark.css b/panel/template/fast/grid/dark.css
index 58cdadd0cc..735a093c76 100644
--- a/panel/template/fast/grid/dark.css
+++ b/panel/template/fast/grid/dark.css
@@ -2,7 +2,6 @@
#sidebar {
border-right: 2px solid var(--neutral-fill-rest);
}
-
.bk.card-header {
color: var(--neutral-foreground-rest);
background-color: var(--neutral-fill-active) !important;
diff --git a/panel/template/fast/grid/default.css b/panel/template/fast/grid/default.css
index 2a5e0a4cc9..7ab0a3ecf1 100644
--- a/panel/template/fast/grid/default.css
+++ b/panel/template/fast/grid/default.css
@@ -1,13 +1,4 @@
/* fast default.css */
-#header {
- box-shadow: 2px 2px 10px silver;
-}
-
-#sidebar {
- background-color: white;
- box-shadow: 2px 2px 10px silver;
-}
-
.react-grid-item{
- background-color: white !important;
+ background-color: var(--background-color) !important;
}
diff --git a/panel/template/fast/grid/fast_grid_template.css b/panel/template/fast/grid/fast_grid_template.css
index 0726b31511..aafe9c48ca 100644
--- a/panel/template/fast/grid/fast_grid_template.css
+++ b/panel/template/fast/grid/fast_grid_template.css
@@ -392,3 +392,7 @@ html {
.react-grid-item > fast-card {
margin: 0px;
}
+div.pn-wrapper {
+ position: relative;
+ background: var(--background-color)
+}
\ No newline at end of file
diff --git a/panel/template/fast/grid/fast_grid_template.html b/panel/template/fast/grid/fast_grid_template.html
index db0b270958..e938f73ef1 100644
--- a/panel/template/fast/grid/fast_grid_template.html
+++ b/panel/template/fast/grid/fast_grid_template.html
@@ -29,13 +29,13 @@
{% endif %}
@@ -118,8 +123,8 @@
provider.neutralPalette = palette;
}
- setNeutralColor("#ffffff", "#header-design-provider");
- setNeutralColor("#000000", "#body-design-provider");
+ setNeutralColor("{{ style.header_neutral_color }}", "#header-design-provider");
+ setNeutralColor("{{ style.neutral_color }}", "#body-design-provider");
function setBackgroundColor(color, selector){
color = standardize_color(color);
@@ -129,6 +134,8 @@
setBackgroundColor("{{ style.header_background }}", "#header-design-provider");
setBackgroundColor("{{ style.background_color }}", "#body-design-provider");
+ document.querySelector("#body-design-provider").cornerRadius={{ style.corner_radius }};
+
function registerCSSCustomProperties(selector) {
const provider = document.querySelector(selector);
provider.registerCSSCustomProperty(accentFillActiveBehavior)
@@ -160,6 +167,19 @@
}
registerCSSCustomProperties("#header-design-provider")
registerCSSCustomProperties("#body-design-provider")
+
+ class FastDesignProvider {
+ setAccentColor(value, element){
+ setAccentColor(value, element);
+ }
+ setNeutralColor(value, element){
+ setNeutralColor(value, element);
+ }
+ setBackgroundColor(value, element){
+ setBackgroundColor(value, element)
+ }
+ }
+ window.fastDesignProvider = new FastDesignProvider()
{% endblock %}
@@ -179,16 +199,18 @@
-
+
Toggle the Sidebar
{% endif %}
+
{% if app_logo %}{% endif %}
{% if site_title %} {{ site_title }}{% endif %}
{% if site_title and app_title%} -{% endif %}
{% if app_title %}{{ app_title }}{% endif %}
+
{% for doc in docs %}
@@ -222,14 +244,14 @@
{% endif %}
- {% if busy %}
-
- {{ embed(roots.busy_indicator) | indent(6) }}
-
+ {% if busy %}
+
+ {{ embed(roots.busy_indicator) | indent(6) }}
+
Busy Indicator
- {% endif %}
+ {% endif %}
@@ -407,13 +429,13 @@
{% set count = [] %}
{% for doc in docs %}{% for root in doc.roots %}{% if "main" in root.tags %}
{% endif %}
{% if site_title %} {{ site_title }}{% endif %}
{% if site_title and app_title%} -{% endif %}
{% if app_title %}{{ app_title }}{% endif %}
+