from IPython.html import widgets # Widget definitions
from IPython.display import display # Used to display widgets in the notebook
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¶
ContainerWidget
s 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='HTMLView', 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='HTMLView', 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
pack_start
, pack_center
, and pack_end
methods (parameterless) 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 Pack Start')
container.hbox()
container.pack_start()
fill_container(container)
container = make_container('HBox Pack Center')
container.hbox()
container.pack_center()
fill_container(container)
container = make_container('HBox Pack End')
container.hbox()
container.pack_end()
fill_container(container)
The ContainerWidget
flex0
, flex1
, and flex2
methods (parameterless) modify the containers flexibility. Changing a container flexibility affects how and if the container will occupy the remaining space. Setting flex0
has the same result as setting no flex. Below is an example of different flex configurations. The number on the boxes correspond to the applied flex.
def fill_container(container, flexes):
components = []
for i in range(len(flexes)):
components.append(widgets.ContainerWidget(parent=container))
components[i].set_css(child_style)
label = widgets.StringWidget(parent=components[i], default_view_name='HTMLView', value=str(flexes[i]))
if flexes[i] == 0:
components[i].flex0()
elif flexes[i] == 1:
components[i].flex1()
elif flexes[i] == 2:
components[i].flex2()
display(components[i])
container = make_container('Different Flex Configurations')
container.hbox()
fill_container(container, [0, 0, 0])
container = make_container('')
container.hbox()
fill_container(container, [0, 0, 1])
container = make_container('')
container.hbox()
fill_container(container, [0, 1, 1])
container = make_container('')
container.hbox()
fill_container(container, [0, 2, 2])
container = make_container('')
container.hbox()
fill_container(container, [0, 1, 2])
container = make_container('')
container.hbox()
fill_container(container, [1, 1, 2])
The ContainerWidget
align_start
, align_center
, and align_end
methods (parameterless) adjust the alignment of the widgets on the axis perpindicular to the one that they are being rendered on. Below is an example of the different alignments.
def fill_container(container):
components = []
for i in range(3):
components.append(widgets.StringWidget(parent=container, default_view_name='HTMLView', value="ABC"[i]))
components[i].set_css(child_style)
components[i].set_css('height', str((i+1) * 50) + 'px')
display(components[i])
container = make_container('HBox Align Start')
container.hbox()
container.align_start()
fill_container(container)
container = make_container('HBox Align Center')
container.hbox()
container.align_center()
fill_container(container)
container = make_container('HBox Align End')
container.hbox()
container.align_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)