改变Bokeh按钮的颜色？

Question

改变Bokeh按钮的颜色？

pythonbuttonbokeh

3

Bokeh支持按钮小部件： http://docs.bokeh.org/en/latest/docs/user_guide/interaction/widgets.html#button 这些按钮的颜色可以改成蓝色吗？

我有一组复选框组按列排列，我需要它们之间用标题/按钮或其他方式分隔开。但不能是绿色按钮。因此我的问题。

- tommy.carstensen

4个回答

3

Bokeh 1.1.0的布局进行了许多更改，因此我想分享一下如何使用css编辑bokeh按钮。

我的文件结构是：buttonBokeh/templates

这是我的 buttonBokeh/main.py 代码：

from bokeh.layouts import layout
from bokeh.plotting import curdoc
from bokeh.models import Button

button = Button(label = "Test Button", css_classes =['custom_button_bokeh'])
layout = layout([[button]])
curdoc().add_root(layout)

以下是buttonBokeh/templates/index.html的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      {{ bokeh_css }}
      {{ bokeh_js }}
      <style type="text/css">{% include 'styles.css' %}</style>
    </head>
    <body>
      {{ plot_div|indent(8) }}
      {{ plot_script|indent(8) }}
    </body>
</html>

这里是按钮Bokeh/templates/styles.css

.custom_button_bokeh button.bk.bk-btn.bk-btn-default {
    color: black;
    font-size:12pt;
    background-color: #05b7ff;
    border-color: #05b7ff;
}

我使用以下命令在buttonBokeh目录中运行它： bokeh serve --allow-websocket-origin=ip_address:xxxx buttonBokeh --port xxxx

- cuxcrider

谢谢！我的最初想法是，改变一个按钮的颜色需要大量的代码，这不是你的错。 - tommy.carstensen

2

您可以使用button_type参数。选项有：'default'、'primary'、'success'、'warning'、'danger'。

nextMonthButton = Button(label='next month', button_type="primary")

"

'primary'是蓝色。

https://docs.bokeh.org/en/latest/docs/reference/core/enums.html#bokeh.core.enums.ButtonType

"

- user3598726

据我所知，“link”不是一个有效的button_type。 - Csaba Kiss

确实，它可能被删除了。我记得它对我有用过。 - user3598726

2

创建bokeh按钮（或其他任何小部件）时，请设置css_classes属性，然后添加样式部分以设置按钮的颜色。例如， Button(label="PLAY", width=100, css_classes=['b_play']) 然后将其添加到页面的样式部分中， <style>.b_play button { background-color: #98FB98 !important; }</style> 此方法可用于设置其他属性，如字体大小。根据您的页面状态，甚至可以禁用按钮... <style>.b_stop button { background-color: #A9A9A9 !important; pointer-events: None !important; }</style>

- user9277612

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anthonydouc · Accepted Answer

这是我目前对小部件等进行样式设置的方法... 似乎没有直接在Python脚本中更改它们的方法。

您需要一个单独的.css文件来设置小部件的样式。这也意味着您需要运行bokeh serve --show myappfolder，而不是bokeh serve --show myapp.py。

创建一个名为myapp的文件夹

结构应该如下：

myapp
|
+--main.py
+--Templates
   |
   +--index.html
   +--styles.css

index.html 文件：

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      {{ bokeh_css }}
      {{ bokeh_js }}
        <style>
             {% include 'styles.css' %}
        </style>
    </head>
    <body>
      {{ plot_div|indent(8) }}
      {{ plot_script|indent(8) }}
    </body>
</html>

styles.css:

.bk-root .bk-bs-btn-success {
color: #FDFEFE;
background-color: #21618C;
border-color: #21618C;
}
.bk-root .bk-bs-btn-success:focus {
color: #FDFEFE;
background-color: #21618C;
border-color: #21618C;
}
.bk-root .bk-bs-btn-success:active {
color: #FDFEFE;
background-color: #21618C;
border-color: #21618C;
}
.bk-root .bk-bs-btn-success:hover {
color: #FDFEFE;
background-color: #5DADE2;
border-color: #5DADE2;
}

main.py:

from bokeh.layouts import layout
from bokeh.plotting import curdoc
from bokeh.models import Button

button = Button(label="Test Button", button_type="success")
layout = layout([[button]])
curdoc().add_root(layout)

现在运行bokeh serve --show myapp，你会得到以下结果：