from IPython.html import widgets # Widget definitions
from IPython.display import display # Used to display widgets in the notebook
# Enable widgets in this notebook
widgets.init_widget_js()
Alignment¶
Most widgets have a description property which allows a label for the widget to be defined. The label of the widget has a fixed minimum width. The text of the label is always right aligned and the widget is left aligned (as seen below)
display(widgets.StringWidget(description="a:"))
display(widgets.StringWidget(description="aa:"))
display(widgets.StringWidget(description="aaa:"))
If a label is longer than the minimum width, the widget is shifted to the right (as seen below).
display(widgets.StringWidget(description="a:"))
display(widgets.StringWidget(description="aa:"))
display(widgets.StringWidget(description="aaa:"))
display(widgets.StringWidget(description="aaaaaaaaaaaaaaaaaa:"))
If a description is not set for the widget, the label is not displayed (as seen below).
display(widgets.StringWidget(description="a:"))
display(widgets.StringWidget(description="aa:"))
display(widgets.StringWidget(description="aaa:"))
display(widgets.StringWidget())
Custom Alignment¶
ContainerWidgets allow for custom alignment of widgets. The hbox and vbox methods (parameterless) cause the ContainerWidget to both horizontally and vertically align its children. The following example compares vbox to hbox.
child_style = {
'background': '#77CC77',
'padding': '25px',
'margin': '5px',
'font-size': 'xx-large',
'color': 'white',
}
def make_container(title):
display(widgets.StringWidget(default_view_name='LabelView', value='<h2><br>' + title + '</h2>'))
container = widgets.ContainerWidget()
container.set_css('background', '#999999')
display(container)
return container
def fill_container(container):
components = []
for i in range(3):
components.append(widgets.StringWidget(parent=container, default_view_name='LabelView', value="ABC"[i]))
components[i].set_css(child_style)
display(components[i])
container = make_container('VBox')
container.vbox()
fill_container(container)
container = make_container('HBox')
container.hbox()
fill_container(container)
The ContainerWidget also supports start, center, and end methods (parameterless) that adjust the alignment of the widgets on the axis that they are being rendered on. Below is an example of the different alignments.
container = make_container('HBox Start')
container.hbox()
container.start()
fill_container(container)
container = make_container('HBox Center')
container.hbox()
container.center()
fill_container(container)
container = make_container('HBox End')
container.hbox()
container.end()
fill_container(container)
By default the widget area is a vbox; however, there are many uses for a hbox. The example below uses a hbox to display a set of vertical sliders, like an equalizer.
container = widgets.ContainerWidget()
container.hbox()
for i in range(15):
widgets.FloatRangeWidget(orientation='vertical', parent=container, description=str(i+1), value=50.0)
display(container)