css 覆盖选项卡、标题级别的DOM样式

edqdpe6u 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(108)

我一直在尝试用css_class来自定义我的Tab小部件，用style.css覆盖它，就像我以前没有散景版本一样，尽管从3. 0开始，同样的方法不起作用。我尝试使用css_class，styles，样式表，唯一一个工作得很好的是样式，我可以传递一个字典，它覆盖根值。我的问题是，我试图达到标题水平，以改变边界底部的颜色，甚至边界底部为0px。

:host(.bk-above) .bk-header {
1. border-bottom: 1px solid #0e0922;
   1. border-bottom-width:1px;
   2. border-bottom-style: solid;
   3. border-bottom-color: rgb(14, 9, 34); }

我检查了控制台中的元素，我检查了散景文档css_widgets。我尝试了很多不同的方法，我不能让它工作。
最小样本量：

from bokeh.models import TabPanel, Tabs
from bokeh.plotting import figure, show

#dir(Tabs)
#Tabs.parameters()

p1, p2 = figure(), figure()

p1.background_fill_color = '#010727'
p1.border_fill_color =  '#010727'
p1.outline_line_color = '#010727'

p2.background_fill_color = '#010727'
p2.border_fill_color =  '#010727'
p2.outline_line_color = '#010727'

tab1 = TabPanel(child=p1, title="Fastest Lap")
tab2 = TabPanel(child=p2, title="Median Lap")

tabs_ = Tabs(tabs=[tab1, tab2], styles={ 'font-size':'15px', 'border-bottom': '0px', 'align':'right', 'header border-bottom-color':'green',  'border-bottom-color':'green', 'background-color':'#010727', 'color':'green'})

show(tabs_)
#dir(Tabs.styles)
#Tabs.styles.get_value(tabs_)

css

来源：https://stackoverflow.com/questions/75614430/override-dom-style-for-tabs-header-level

1条答案

按热度按时间

w8biq8rn1#

从Bokeh 3.0开始，你可以直接在一个组件上注入整个样式表。在你的例子中，你可以这样做：

stylesheet = """
:host(.bk-Tabs) {
  background-color: #010727;
}

:host(.bk-Tabs) .bk-header {
  color: green;
  font-size: 15px;
  border-bottom: 1px solid red;
}
"""

tabs_ = Tabs(tabs=[tab1, tab2], stylesheets=[stylesheet])

赞(0）回复(0）举报 2023-03-05

我来回答

css 覆盖选项卡、标题级别的DOM样式

1条答案

相关问题

热门标签

最新问答