代码之家 › 专栏 › 技术社区 › vestland

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

jupyter python

vestland · 技术社区 · 7 年前

挑战:

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)

我所尝试的:

我以为我和你有什么关系 Layout 和 style 并希望以下设置与 layout=Layout(width='75%', height='80px') 也会让我改变颜色,而不仅仅是 width 和 height :

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

display(wdg2)

Widget2:

但令我非常失望的是,你似乎无法以类似的方式改变颜色。根据 ipywidgets docs keys 所有物和 wdg2.style.keys 返回以下内容:

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

既然那里没有颜色属性,就不可能为它更改颜色吗 ? 对于其他小部件,例如 Button ,您将找到一个属性 button_color

0 回复 | 直到 7 年前

gdlmx 7 年前

简单的回答是:你不能不创造你自己的 "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规则注入笔记本,这会影响所有人 select 小装置。

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

最终的解决办法是自己做 custom widget 不幸的是,您需要为它编写服务器端和客户端代码。但这一特性可能会在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
    };
});

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

第三单元

wdg3.mycolor = 'red'

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

ntg 5 年前

派对迟到了,但我的简单解决方案是,在这种情况下,颜色将用于编码简单的两个(或多个)状态: use unicode!

代码(在python 3中…:)

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

c_base = int("1F534",base=16)
# widget 1
options=['Apples', 'Oranges', 'Pears']
state = [False,True,True]
colored_options = ['{} {}'.format(chr(c_base+s), o) for s,o in zip(state,options)]
wdg = widgets.SelectMultiple(
    options=colored_options,
    description='Fruits',
    disabled=False
)

display(wdg)

for i in range (10):
    ii = int('0x1f7e0',base=16)+i
    print('{:>15}'.format('[{}: {}] '.format(hex(ii),chr(ii))),end='')
    if i%7==6:
        print()

Aaron Watters 5 年前

jp_proxy_widget 使您可以轻松地在小部件中使用HTML5/javascript执行任何操作。例如,这里有一个彩色的多重选择:

在这里找到它: https://github.com/AaronWatters/jp_proxy_widget