Jupyter 小部件的样式#

本笔记本展示了如何为Jupyter交互式小部件（ipywidgets）添加样式，以构建丰富且响应式的、基于小部件的应用程序。

您可以直接跳转到这些部分：

预定义样式
样式属性

预定义样式#

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

例如，Button小部件具有一个button_style属性，该属性可以采用5种不同的值：

'primary'
'成功'
'info'
'warning'
'危险'

除了默认的空字符串 ''。

from ipywidgets import Button

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

`style` 属性#

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

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

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

您可以使用keys属性获取小部件的样式属性列表。

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

Widget样式属性针对每种widget类型而定。

from ipywidgets import IntSlider

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

样式可以在构建小部件时提供，既可以作为特定的Style实例，也可以作为字典。

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)

描述样式： BoundedFloatText, BoundedIntText, ColorPicker, ColorsInput, DatePicker, DatetimePicker, Dropdown, FloatText, FloatsInput, IntText, IntsInput, NaiveDatetimePicker, Play, RadioButtons, Select, SelectMultiple, TagsInput, TimePicker, Valid
按钮样式： 按钮，文件上传
CheckboxStyle: 复选框
文本样式: 组合框, 密码框, 文本框, 文本区域
SliderStyle（滑动条样式）： FloatLogSlider（浮点对数滑动条）, FloatRangeSlider（浮点范围滑动条）, FloatSlider（浮点滑动条）, IntRangeSlider（整数范围滑动条）, IntSlider（整数滑动条）, SelectionRangeSlider（选择范围滑动条）, SelectionSlider（选择滑动条）
进度条样式： 浮点进度条，整数进度条
HTML样式: HTML
HTML数学样式： HTMLMath
LabelStyle: 标签
切换按钮样式： ToggleButton
ToggleButtons样式: 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)

属性	HTMLMathStyle	ToggleButtonStyle	ToggleButtonsStyle	SliderStyle	LabelStyle	CheckboxStyle	ButtonStyle	DescriptionStyle	HTMLStyle	ProgressStyle	TextStyle
text_color	✓	✓			✓		✓		✓		✓
description_width	✓	✓	✓	✓	✓	✓		✓	✓	✓	✓
handle_color				✓
font_family		✓			✓		✓
font_variant		✓			✓		✓
font_size	✓	✓			✓		✓		✓		✓
bar_color										✓
button_color							✓
text_decoration		✓			✓		✓
font_weight		✓	✓		✓		✓
背景	✓				✓	✓			✓		✓
button_width			✓
font_style		✓			✓		✓

Jupyter 小部件的样式#

预定义样式#

style 属性#

当前支持的属性#

`style` 属性#