python - Jupyter:如何更改 SelectMultiple() 等小部件的颜色?
问题描述
挑战:
您如何更改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=Layout(width='75%', height='80px')
不仅仅是:width
height
片段/单元格 2:
wdg2 = widgets.SelectMultiple(
options=['Apples', 'Oranges', 'Pears'],
value=['Oranges'],
description='Fruits',
layout=Layout(width='75%', height='80px'),
disabled=False
)
display(wdg2)
小部件2:
但令我非常失望的是,您似乎无法以类似的方式更改颜色。根据ipywidgets 文档,样式属性的属性特定于每个小部件类型。您可以使用该属性获取小部件的样式属性列表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
。
解决方案
简短的回答是:如果不创建自己的“自定义小部件” ,您将无法做到这一点。style
和layout
对象的这些属性在ipywidgets
. _
ButtonStyle
但是,有一种肮脏的方法可以通过将with混合来获得类似的效果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 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 服务器上编译、构建和安装。
推荐阅读
- windows-installer - 为使用 Windows 安装程序创建的自定义文件夹文件添加写入权限
- postman - 钥匙斗篷登录页面
- javascript - Mongodb Nodejs 从现有数据中生成测试数据
- r - 在 R 中创建函数的问题
- javascript - jquery 用于在选择其他复选框时禁用多个复选框
- reactjs - 无法获取 /teachers/[object%20Object]
- pdf - 在 pdf 中标记内容
- json - 从响应中提取值的具体部分到新字符串 Groovy 脚本
- javascript - 在全景图后面分层网格
- html - 如何将段落移到背景下方?