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 ’’.
[1]:
from ipywidgets import Button
Button(description='Danger Button', button_style='danger')
[1]:
The style
attribute
layout
attribute only exposes layout-related CSS properties for the top-level DOM element of widgets, thestyle
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.
[2]:
b1 = Button(description='Custom color')
b1.style.button_color = 'lightgreen'
b1
[2]:
You can get a list of the style attributes for a widget with the keys
property.
[3]:
b1.style.keys
[3]:
['_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.
[4]:
b2 = Button()
b2.style = b1.style
b2
[4]:
Widget styling attributes are specific to each widget type.
[5]:
from ipywidgets import IntSlider
s1 = IntSlider(description='Blue handle')
s1.style.handle_color = 'lightblue'
s1
[5]:
Styles can be given when a widget is constructed, either as a specific Style instance or as a dictionary.
[6]:
b3 = Button(description='Styled button', style=dict(
font_style='italic',
font_weight='bold',
font_variant="small-caps",
text_color='red',
text_decoration='underline'
))
b3
[6]:
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:
[7]:
from collections import defaultdict
from IPython.display import HTML
import ipywidgets
from pprint import pprint
[8]:
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)
[8]:
- 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:
[9]:
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)
[9]:
Attribute | TextStyle | HTMLMathStyle | HTMLStyle | ProgressStyle | LabelStyle | SliderStyle | ButtonStyle | DescriptionStyle | ToggleButtonsStyle | ToggleButtonStyle | CheckboxStyle |
---|---|---|---|---|---|---|---|---|---|---|---|
font_variant | ✓ | ✓ | ✓ | ||||||||
background | ✓ | ✓ | ✓ | ✓ | ✓ | ||||||
font_family | ✓ | ✓ | ✓ | ||||||||
font_size | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||||
handle_color | ✓ | ||||||||||
font_style | ✓ | ✓ | ✓ | ||||||||
button_width | ✓ | ||||||||||
font_weight | ✓ | ✓ | ✓ | ✓ | |||||||
bar_color | ✓ | ||||||||||
text_color | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||||
description_width | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
text_decoration | ✓ | ✓ | ✓ | ||||||||
button_color | ✓ |