Jupyter: Как изменить цвет для виджетов, таких как SelectMultiple ()?

Question

Задача:

Как вы можете изменить цвет фона, шрифта и т. Д. Для виджетов. 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 и height:

Snippet / Cell 2:

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

display(wdg2)

Widget2:

Но, к моему огромному разочарованию, кажется, что вы не можетеизменить цвета аналогичным образом.Согласно документам ipywidgets , свойства атрибута 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

Краткий ответ: вы не можете сделать это без создания собственного "пользовательского виджета" .Эти атрибуты объектов style и layout жестко закодированы как в серверной , так и клиентской библиотеках 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>

Пользовательский виджет

Окончательное решение - создать собственный пользовательский виджет .К сожалению, вы должны написать для него как серверную, так и клиентскую коды.Для классического ноутбука Jupyter код на стороне клиента (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.