我按照 Panel docs 中的这个示例在 jupyter notebook 中尝试了一些自定义 css 样式。
面板样式和 hvplot 之间似乎存在一些奇怪的干扰:
首先导入 hvplot.pandas 似乎总是让面板忽略以后使用 css 样式信息调用 pn.extenstion() 。(在文档中有一个警告。到目前为止一切都很好。)
当我首先调用 pn.extension(...) 时,它仅适用于指定为“raw_css”的 css。如果将 css 指定为“css_files”,则后续导入 hvplot.pandas 会使面板忘记 css 样式。
我无法让面板使用 css 文件中的 css 信息并同时使用 hvplot.pandas。我错过了什么吗?
(当然,这可能是实际应用程序的一个极端案例,但它很容易发生在你使用许多库的笔记本中。我花了一段时间才发现涉及到 hvplot。这就是为什么我'我在这里详细描述它。)
以下是一些代码示例:
按预期工作
在以下示例中,滑块按预期显示为黄色背景:
import panel as pn
pn.extension(raw_css=['.bk.panel-widget-box {background: #f0f000;}'])
pn.Column(pn.widgets.FloatSlider(name='Number'), css_classes=['panel-widget-box'])
import panel as pn
pn.extension(css_files=['test.css'])
pn.Column(pn.widgets.FloatSlider(name='Number'), css_classes=['panel-widget-box'])
import panel as pn
pn.extension(raw_css=['.bk.panel-widget-box {background: #f0f000;}'])
import hvplot.pandas
pn.Column(pn.widgets.FloatSlider(name='Number'), css_classes=['panel-widget-box'])
(test.css的内容.bk.panel-widget-box {background: #f0f000;}
:)
不工作
在以下示例中,没有黄色背景:
import panel as pn
import hvplot.pandas
pn.extension(raw_css=['.bk.panel-widget-box {background: #f0f000;}'])
pn.Column(pn.widgets.FloatSlider(name='Number'), css_classes=['panel-widget-box'])
import panel as pn
import hvplot.pandas
pn.extension(css_files=['test.css'])
pn.Column(pn.widgets.FloatSlider(name='Number'), css_classes=['panel-widget-box'])
import panel as pn
pn.extension(css_files=['test.css'])
import hvplot.pandas
pn.Column(pn.widgets.FloatSlider(name='Number'), css_classes=['panel-widget-box'])