Jupyter小部件的样式设置

Jupyter小部件的样式设置#

本笔记本展示了如何为 Jupyter 交互式小部件设置样式，以构建丰富且具有 响应性 的基于小部件的应用程序。

预定义样式#

如果您希望小部件的样式使用环境定义的颜色和样式（例如，与笔记本主题保持一致），许多小部件都允许在一系列预定义样式中进行选择。

例如，Button 小部件具有 button_style 属性，它可以取以下 5 种不同的值：

  • 'primary'

  • 'success'

  • 'info'

  • 'warning'

  • 'danger'

除此之外还有默认的空字符串 ''。

from ipywidgets import Button

Button(description='Danger Button', button_style='danger')

style 属性#

虽然 layout 属性仅暴露与布局相关的 CSS 属性给小部件的顶级 DOM 元素，但 style 属性用于暴露小部件的非布局相关样式属性。

然而，style 属性的属性对于每种小部件类型都是特定的。

b1 = Button(description='Custom color')
b1.style.button_color = 'lightgreen'
b1

You can get a list of the style attributes for a widget with the keys property.

b1.style.keys

['_model_module',
 '_model_module_version',
 '_model_name',
 '_view_count',
 '_view_module',
 '_view_module_version',
 '_view_name',
 'button_color',
 'font_family',
 'font_size',
 'font_style',
 'font_variant',
 'font_weight',
 'text_color',
 'text_decoration']

就像 layout 属性一样，小部件的样式也可以分配给其他小部件。

b2 = Button()
b2.style = b1.style
b2

小部件样式属性对于每种小部件类型都是特定的。

from ipywidgets import IntSlider

s1 = IntSlider(description='Blue handle')
s1.style.handle_color = 'lightblue'
s1

样式可以在构建小部件时指定，既可以作为特定的 Style 实例，也可以作为 dict。

b3 = Button(description='Styled button', style=dict(
    font_style='italic',
    font_weight='bold',
    font_variant="small-caps",
    text_color='red',
    text_decoration='underline'
))
b3

当前支持的属性#

目前，支持的样式属性因小部件而异。以下是不同 Style 小部件被各种其他小部件使用的列表：

from collections import defaultdict
from IPython.display import HTML
import ipywidgets
from pprint import pprint

reverse_lut = defaultdict(set)
styles = set()
for export_name in dir(ipywidgets.widgets):
    export = getattr(ipywidgets.widgets, export_name)
    try:
        if issubclass(export, ipywidgets.Widget) and 'style' in export.class_trait_names():
            reverse_lut[export.style.klass.__name__].add(export.__name__)
            styles.add(export.style.klass)
    except TypeError:
        pass

html = '<ul>'
for style, widgets in reverse_lut.items():
    html = f"{html}\n<li><b>{style}:</b> {', '.join(sorted(widgets))}</li>"
html += "</ul>"
HTML(html)
  • DescriptionStyle: BoundedFloatText, BoundedIntText, ColorPicker, ColorsInput, DatePicker, DatetimePicker, Dropdown, FloatText, FloatsInput, IntText, IntsInput, NaiveDatetimePicker, Play, RadioButtons, Select, SelectMultiple, TagsInput, TimePicker, Valid
  • ButtonStyle: Button, FileUpload
  • CheckboxStyle: Checkbox
  • TextStyle: Combobox, Password, Text, Textarea
  • SliderStyle: FloatLogSlider, FloatRangeSlider, FloatSlider, IntRangeSlider, IntSlider, SelectionRangeSlider, SelectionSlider
  • ProgressStyle: FloatProgress, IntProgress
  • HTMLStyle: HTML
  • HTMLMathStyle: HTMLMath
  • LabelStyle: Label
  • ToggleButtonStyle: ToggleButton
  • ToggleButtonsStyle: ToggleButtons

以下是不同的 Style 小部件支持的不同属性：

attributes = defaultdict(set)
base_traits = set(ipywidgets.Style.class_trait_names())

for s in styles:
    for t in s.class_trait_names():
        if not t.startswith("_") and t not in base_traits:
            attributes[s.__name__].add(t)
all_attributes = set().union(*attributes.values())

html = '<table>\n'
html = f"{html}<tr><th>Attribute</th>{ ''.join(f'<th>{s}</th>' for s in attributes.keys()) }</tr>"
for a in all_attributes:
    html = f"""{html}<tr><td>{a}</td>{ ''.join(f'<td>{"✓" if a in attribs else ""}</td>' for attribs in attributes.values()) }</tr>"""
html += "</table>"
HTML(html)
AttributeProgressStyleCheckboxStyleSliderStyleToggleButtonsStyleHTMLMathStyleButtonStyleToggleButtonStyleHTMLStyleLabelStyleDescriptionStyleTextStyle
description_width✓✓✓✓✓✓✓✓✓✓
handle_color✓
font_weight✓✓✓✓
button_color✓
background✓✓✓✓✓
bar_color✓
font_size✓✓✓✓✓✓
text_color✓✓✓✓✓✓
button_width✓
font_family✓✓✓
text_decoration✓✓✓
font_variant✓✓✓
font_style✓✓✓