Styling of Jupyter widgets#
This notebook presents how to style Jupyter interactive widgets to build rich and reactive widget-based applications.
You can jump directly to these sections:
Predefined styles#
If you wish the styling of widgets to make use of colors and styles defined by the environment (to be consistent with e.g. a notebook theme), many widgets enable choosing in a list of pre-defined styles.
For example, the Button
widget has a button_style
attribute that may take 5 different values:
'primary'
'success'
'info'
'warning'
'danger'
besides the default empty string ‘’.
from ipywidgets import Button
Button(description='Danger Button', button_style='danger')
The style
attribute#
While the layout
attribute only exposes layout-related CSS properties for the top-level DOM element of widgets, the
style
attribute is used to expose non-layout related styling attributes of widgets.
However, the properties of the style
attribute are specific to each widget type.
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']
Just like the layout
attribute, widget styles can be assigned to other widgets.
b2 = Button()
b2.style = b1.style
b2
Widget styling attributes are specific to each widget type.
from ipywidgets import IntSlider
s1 = IntSlider(description='Blue handle')
s1.style.handle_color = 'lightblue'
s1
Styles can be given when a widget is constructed, either as a specific Style instance or as a dictionary.
b3 = Button(description='Styled button', style=dict(
font_style='italic',
font_weight='bold',
font_variant="small-caps",
text_color='red',
text_decoration='underline'
))
b3
Current supported attributes#
Currently, the styling attributes that are supported vary from widget to widget. Here is the list of which different Style
widgets are used by the various other widgets:
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
And here are the different attributes that the different Style
widgets support:
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)
Attribute | HTMLMathStyle | SliderStyle | ToggleButtonsStyle | DescriptionStyle | ToggleButtonStyle | ButtonStyle | CheckboxStyle | HTMLStyle | ProgressStyle | LabelStyle | TextStyle |
---|---|---|---|---|---|---|---|---|---|---|---|
button_width | ✓ | ||||||||||
font_weight | ✓ | ✓ | ✓ | ✓ | |||||||
bar_color | ✓ | ||||||||||
description_width | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
text_color | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||||
font_style | ✓ | ✓ | ✓ | ||||||||
font_size | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||||
background | ✓ | ✓ | ✓ | ✓ | ✓ | ||||||
font_variant | ✓ | ✓ | ✓ | ||||||||
handle_color | ✓ | ||||||||||
button_color | ✓ | ||||||||||
font_family | ✓ | ✓ | ✓ | ||||||||
text_decoration | ✓ | ✓ | ✓ |