Question

我正在Jupyter笔记本中使用ipywidgets，尤其是DatePicker小部件，并且想知道是否有一种方法可以深入研究小部件的内胆以改变其外观。例如，DatePicker小部件包装在一个看起来为300px宽和28px高的框中（通过在显示的DatePicker小部件上使用Firefox中的“检查元素”来确定）。我希望能够控制此框的属性。这种风格在哪里确定？

Internet搜索始终导致this page，但是其中包含的信息似乎非常通用，我似乎无法找到我想要的特定信息。

同样（至少我发现）浏览位于例如lib / python3.6 / site-packages / ipywidgets / widgets / widgets_date.py的源代码不是很有启发性。

我尝试了我认为可能要做的显而易见的事情：

from ipywidgets import widgets
dp = widgets.DatePicker()
display(dp)

#Now try to set border style to red, for example.

dp.layout.border = 'solid 1px #ff0000'
display(dp)

#No change. :( Or rather, I should say, this adds yet another border,
#but leaves the original unchanged.

有人在了解这种显示样式的设置位置或如何自定义方面有经验吗？

更新：我按照this page上的指南设置了自定义日期选择器小部件（请参见下文，使该框变大一些，并仅将背景涂成红色），现在我猜想某些地方的Javscript设置了DatePicker小部件的属性。我仍然想知道是否可以在无需重新发明轮子的情况下修改这些属性。 ipywidgets DatePicker小部件已经存在，仅仅因为我想自定义它的外观，似乎浪费了自己编写自己的代码的可能性。

from __future__ import print_function
import ipywidgets as widgets
from traitlets import Unicode, validate

class DateWidget(widgets.DOMWidget):
    _view_name = Unicode('DatePickerView').tag(sync=True)
    _view_module = Unicode('datepicker').tag(sync=True)
    value = Unicode().tag(sync=True)

%%javascript
requirejs.undef('datepicker');

define('datepicker',["jupyter-js-widgets"],function(widgets){

    var DatePickerView = widgets.DOMWidgetView.extend({
        render:function(){
            this.date = document.createElement('input');
            this.date.setAttribute('type','date');
            this.date.style.width = '350px';
            this.date.style.height = '45px';
            this.date.backgroundColor = '#ff0000';
            this.el.appendChild(this.date);
            this.update();
        },

        update:function(){
            this.date.value = this.model.get('value');
            return DatePickerView.__super__.update.apply(this);
        },

        events:{
            "change":"handle_date_change"
        },

        handle_date_change:function(event){
            this.model.set('value',this.date.value);
            this.touch();
        },
    });

    return{
        DatePickerView:DatePickerView
    };
});

dp=DateWidget()
dp

如何更改Jupyter ipywidgets DatePicker小部件的样式？

0 个答案: