python - Jupyter:如何更改 SelectMultiple() 等小部件的颜色？

Question

挑战:

如何更改 widgets.SelectMultiple() 的背景颜色、字体等颜色和其他小部件有关吗？下面是 widgets.SelectMultiple()

的简单设置

代码段/单元格 1:

# settings
%matplotlib inline

# imports
from ipywidgets import interactive, Layout
from IPython.display import clear_output
import ipywidgets as widgets
from IPython.display import display

# widget 1
wdg = widgets.SelectMultiple(
    options=['Apples', 'Oranges', 'Pears'],
    value=['Oranges'],
    #rows=10,
    description='Fruits',
    disabled=False
)

display(wdg)

小部件 1:

我尝试过的:

我以为我正在用 Layout 做点什么和 style并希望使用 layout=Layout(width='75%', height='80px') 的以下设置也能让我以某种方式改变颜色，而不仅仅是 width和高度:

代码段/单元格 2:

wdg2 = widgets.SelectMultiple(
    options=['Apples', 'Oranges', 'Pears'],
    value=['Oranges'],
    description='Fruits',
    layout=Layout(width='75%', height='80px'),
    disabled=False
)

display(wdg2)

小部件 2:

但令我非常失望的是，您似乎无法以类似的方式更改颜色。根据ipywidgets docs , style 属性的属性特定于每个小部件类型。您可以使用 keys 属性获取小部件的样式属性列表。 wdg2.style.keys 返回这个:

['_model_module',
 '_model_module_version',
 '_model_name',
 '_view_count',
 '_view_module',
 '_view_module_version',
 '_view_name',
 'description_width']

而且由于那里没有颜色属性，是否无法更改 widgets.SelectMultiple() 的颜色？对于其他小部件，例如 Button，您还会找到属性 button_color。

Answer 1

简短的回答是:如果不创建自己的 "custom widget" 就无法做到这一点. style 和 layout 对象的那些属性在 server-side 中都是硬编码的和 client-side ipywidgets 库。

不过，通过将 ButtonStyle 与 SelectMultiple 混合，有一种肮脏的方法可以获得类似的效果。

# Tested on JupyterLab 0.35.3 with Python 3.6 kernel
import ipywidgets as widgets
from ipywidgets.widgets import widget_serialization, trait_types

from traitlets import Unicode, Instance, CaselessStrEnum

class MySelectMultiple(widgets.SelectMultiple):
    style=trait_types.InstanceDict(widgets.ButtonStyle).tag(sync=True, **widget_serialization)

wdg2 = MySelectMultiple(
    options=['Apples', 'Oranges', 'Pears'],
    value=['Oranges'],
    description='Fruits',
    layout=widgets.Layout(width='75%', height='80px'),
    style= {'button_color':'red'},
    disabled=False
)

wdg2

wdg2.style.button_color = 'green'

另一种肮脏的方法是将 CSS 规则注入(inject)到影响所有 select 小部件的笔记本中。

%%html
<style>
    .widget-select > select {background-color: red;}   
</style>

自定义小部件

最终的解决方案是自己制作 custom widget . 不幸的是，您需要为其编写服务器端和客户端代码。 对于经典的 jupyter notebook，客户端代码(JavaScript)可以放在一个单元格中。 但是这个特性可能会在 Jupyter 的“下一代”中被删除，即 JupyterLab ，出于安全原因。

单元格 1

%%javascript
require.undef('myselectmultiple');
define('myselectmultiple', ["@jupyter-widgets/base"], function(widgets) {
    class selectmultipleView extends widgets.SelectMultipleView {
        render () {
            super.render();
            this.mycolor_changed();
            this.model.on('change:mycolor', this.mycolor_changed, this);
        }
        mycolor_changed () {
            var mycolor = this.model.get('mycolor')
            this.el.childNodes[1].style.backgroundColor = mycolor;
        }
    }
    return {
        myselectmultipleview : selectmultipleView
    };
});

单元格 2

class MySelectMultipleC(widgets.SelectMultiple):
    _view_name = Unicode('myselectmultipleview').tag(sync=True)
    _view_module = Unicode('myselectmultiple').tag(sync=True)
    _view_module_version = Unicode('0.1.0').tag(sync=True)
    mycolor = Unicode('white', help='background color').tag(sync=True)

wdg3 = MySelectMultipleC(
    options=['Apples', 'Oranges', 'Pears'],
    value=['Oranges'],
    description='Fruits',
    mycolor = 'green',
    disabled=False
)
wdg3

单元格 3

wdg3.mycolor = 'red'

JupyterLab 使用完全不同的框架。要使上述自定义小部件在“Lab”界面中工作，客户端代码应转换为 TypeScript，然后编译、构建并安装在 Lab 服务器上。