From cab0ef3ca4e1fdcac98cbcb5e16b8c0a3ab12ad3 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Wed, 24 Nov 2021 15:15:24 +0100 Subject: [PATCH 1/2] Add hide_header option for Card --- panel/layout/card.py | 3 +++ panel/models/card.ts | 23 +++++++++++++++-------- panel/models/layout.py | 2 ++ 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/panel/layout/card.py b/panel/layout/card.py index 2a3ce4f801..0f19093d79 100644 --- a/panel/layout/card.py +++ b/panel/layout/card.py @@ -38,6 +38,9 @@ class Card(Column): header_css_classes = param.List(['card-header'], doc=""" CSS classes to apply to the header element.""") + hide_header = param.Boolean(default=False, doc=""" + Whether to skip rendering the header.""") + title_css_classes = param.List(['card-title'], doc=""" CSS classes to apply to the header title.""") diff --git a/panel/models/card.ts b/panel/models/card.ts index ace52938a6..31a4f5e084 100644 --- a/panel/models/card.ts +++ b/panel/models/card.ts @@ -13,12 +13,16 @@ export class CardView extends ColumnView { connect_signals(): void { super.connect_signals() this.connect(this.model.properties.collapsed.change, () => this._collapse()) - const {active_header_background, header_background, header_color} = this.model.properties - this.on_change([active_header_background, header_background, header_color], () => this.render()) + const {active_header_background, header_background, header_color, hide_header} = this.model.properties + this.on_change([active_header_background, header_background, header_color, hide_header], () => this.render()) } _update_layout(): void { - const views = this.model.collapsed ? this.child_views.slice(0, 1) : this.child_views + let views: any[] + if (this.model.hide_header) + views = this.child_views.slice(1) + else + views = this.model.collapsed ? this.child_views.slice(0, 1) : this.child_views const items = views.map((child) => child.layout) this.layout = new ColumnLayout(items) this.layout.rows = this.model.rows @@ -27,7 +31,7 @@ export class CardView extends ColumnView { } update_position(): void { - if (this.model.collapsible) { + if (this.model.collapsible && !this.model.hide_header) { const header = this.child_views[0] const obbox = header.layout.bbox const ibbox = header.layout.inner_bbox @@ -77,11 +81,12 @@ export class CardView extends ColumnView { header_el.style.backgroundColor = header_background != null ? header_background : "" header_el.appendChild(header.el) } - header_el.style.color = header_color != null ? header_color : "" - - this.el.appendChild(header_el) - header.render() + if (!this.model.hide_header) { + header_el.style.color = header_color != null ? header_color : "" + this.el.appendChild(header_el) + header.render() + } for (const child_view of this.child_views.slice(1)) { if (!this.model.collapsed) this.el.appendChild(child_view.el) @@ -114,6 +119,7 @@ export namespace Card { header_color: p.Property header_css_classes: p.Property header_tag: p.Property + hide_header: p.Property tag: p.Property } } @@ -141,6 +147,7 @@ export class Card extends Column { header_color: [ Nullable(String), null ], header_css_classes: [ Array(String), [] ], header_tag: [ String, "div" ], + hide_header: [ Boolean, false ], tag: [ String, "div" ], })) } diff --git a/panel/models/layout.py b/panel/models/layout.py index 362a8567b6..bd0e7ba754 100644 --- a/panel/models/layout.py +++ b/panel/models/layout.py @@ -20,4 +20,6 @@ class Card(Column): header_tag = String('div', help="HTML tag to use for the Card header.") + hide_header = Bool(False, help="Whether to hide the Card header") + tag = String('tag', help="CSS class to use for the Card as a whole.") From 225259bcefaed5c8a3f7715ff02d04b2276e66b2 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Wed, 24 Nov 2021 15:32:20 +0100 Subject: [PATCH 2/2] Update docs --- examples/reference/layouts/Card.ipynb | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/examples/reference/layouts/Card.ipynb b/examples/reference/layouts/Card.ipynb index 28e7e8cd78..a74d180bc1 100644 --- a/examples/reference/layouts/Card.ipynb +++ b/examples/reference/layouts/Card.ipynb @@ -23,6 +23,7 @@ "* **``collapsed``** (bool): Whether the `Card` is collapsed.\n", "* **``collapsible``** (bool): Whether the `Card` can be expanded and collapsed.\n", "* **``header``** (Viewable): A Panel component to display in the header bar of the Card.\n", + "* **``hide_header``** (bool): Whether to hide the `Card` header.\n", "* **``objects``** (list): The list of objects to display in the Card, which will be formatted like a `Column`. Should not generally be modified directly except when replaced in its entirety.\n", "* **``title``** (str): The title to display in the header bar if no explicit `header` is defined.\n", "\n", @@ -141,6 +142,27 @@ ")" ] }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "It is also possible to render a `Card` entirely without a header:" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "pn.Card(\n", + " pn.indicators.Number(value=42, default_color='white', name='Completion', format='{value}%'),\n", + " background='lightgray',\n", + " hide_header=True,\n", + " width=160\n", + ")" + ] + }, { "cell_type": "markdown", "metadata": {},