

In [1]:

    
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 attribute, 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:



In [2]:

    
display(widgets.TextWidget(description="a:"))
display(widgets.TextWidget(description="aa:"))
display(widgets.TextWidget(description="aaa:"))

If a label is longer than the minimum width, the widget is shifted to the right:



In [3]:

    
display(widgets.TextWidget(description="a:"))
display(widgets.TextWidget(description="aa:"))
display(widgets.TextWidget(description="aaa:"))
display(widgets.TextWidget(description="aaaaaaaaaaaaaaaaaa:"))

If a description is not set for the widget, the label is not displayed:



In [4]:

    
display(widgets.TextWidget(description="a:"))
display(widgets.TextWidget(description="aa:"))
display(widgets.TextWidget(description="aaa:"))
display(widgets.TextWidget())

Custom Alignment

ContainerWidgets allow for custom alignment of widgets. The hbox and vbox CSS classes cause the ContainerWidget to horizontally or vertically align its children.



In [5]:

    
child_style = {
    'background': '#77CC77',
    'padding': '25px',
    'margin': '5px',
    'font-size': 'xx-large',
    'color': 'white',
}

def make_container(title):
    header = widgets.LatexWidget(value=title) 
    display(header)
    header.set_css({
        'font-size': '30pt',
        'margin-top': '40pt',
        'margin-bottom': '20pt',
    })
    
    container = widgets.ContainerWidget()
    container.set_css({
        'background': '#999999',
        'width': '100%',
    })
    display(container)
    return container

def fill_container(container):
    components = []
    for i in range(3):
        components.append(widgets.LatexWidget(value="ABC"[i]))
        components[i].set_css(child_style)
    container.children = components
    
container = make_container('VBox')
container.add_class('vbox')
fill_container(container)

container = make_container('HBox')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container)

The start, center, and end classes adjust the alignment of the widgets on the axis where they are being rendered. Below is an example of the different alignments.



In [6]:

    
container = make_container('HBox Pack Start')
container.remove_class('vbox')
container.add_class('hbox')
container.add_class('start')
fill_container(container)
    
container = make_container('HBox Pack Center')
container.remove_class('vbox')
container.add_class('hbox')
container.add_class('center')
fill_container(container)
    
container = make_container('HBox Pack End')
container.remove_class('vbox')
container.add_class('hbox')
container.add_class('end')
fill_container(container)

The box-flex0, box-flex1, and box-flex2 DOM classes modify the container's flexibility. Changing a container flexibility affects how and if the container will occupy the remaining space. Applying box-flex0 has the same result as not applying flex. Below is an example of different flex configurations. The number on the boxes correspond to the applied flex.



In [7]:

    
def fill_container(container, flexes):
    components = []
    for i in range(len(flexes)):
        components.append(widgets.ContainerWidget())
        components[i].set_css(child_style)
        
        label = widgets.LatexWidget(value=str(flexes[i]))
        components[i].children = [label]
    container.children = components
        
    for i in range(len(flexes)):
        if flexes[i] == 0:
            components[i].add_class('box-flex0')
        elif flexes[i] == 1:
            components[i].add_class('box-flex1')
        elif flexes[i] == 2:
            components[i].add_class('box-flex2')
        
container = make_container('Different Flex Configurations')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container, [0, 0, 0])
        
container = make_container('')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container, [0, 0, 1])
        
container = make_container('')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container, [0, 1, 1])
        
container = make_container('')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container, [0, 2, 2])
        
container = make_container('')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container, [0, 1, 2])
        
container = make_container('')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container, [1, 1, 2])

The align_start, align_center, and align_end DOM classes 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.



In [8]:

    
def fill_container(container):
    components = []
    for i in range(3):
        components.append(widgets.LatexWidget(parent=container, value="ABC"[i]))
        components[i].set_css(child_style)
        components[i].set_css('height', str((i+1) * 50) + 'px')
    container.children = components

container = make_container('HBox Align Start')
container.remove_class('vbox')
container.add_class("hbox")
container.add_class("align-start")
fill_container(container)
    
container = make_container('HBox Align Center')
container.remove_class('vbox')
container.add_class("hbox")
container.add_class("align-center")
fill_container(container)
    
container = make_container('HBox Align End')
container.remove_class('vbox')
container.add_class("hbox")
container.add_class("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.



In [9]:

    
container = widgets.ContainerWidget()
container.children=[widgets.FloatSliderWidget(orientation='vertical', description=str(i+1), value=50.0) 
                    for i in range(15)]
display(container)
container.remove_class('vbox')
container.add_class('hbox')