更改散景按钮的颜色? [英] Change colour of Bokeh buttons?

查看:33
本文介绍了更改散景按钮的颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

Bokeh支持按钮小部件:

Bokeh supports button widgets: http://docs.bokeh.org/en/latest/docs/user_guide/interaction/widgets.html#button

Can the colour of these buttons be changed to blue?

I have a set of Checkbox Groups arranged in a column, and I need them to be separated by a header/button or something. But it can't be a green button. Hence my question.

解决方案

This is the way I am currently styling widgets etc... There does not seem to be a way to directly change these in a python script only.

You will need a seperate .css file to style the widgets. This also means you need to run bokeh serve --show myappfolder and not bokeh serve --show myapp.py.

Create a folder called myapp

structure should be:

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

index.html file :

<!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)

Now run bokeh serve --show myapp And you end up with:

这篇关于更改散景按钮的颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆