Widget list#

[1]:

import ipywidgets as widgets

Numeric widgets#

There are a variety of IPython widgets that are designed to display numeric values. The integer widgets have a similar naming scheme as their counterparts with floating point numbers. You can find the respective integer equivalent by replacing Float withInt in the widget name.

IntSlider#

[2]:

widgets.IntSlider(
    value=7,
    min=0,
    max=10,
    step=1,
    description="Test:",
    disabled=False,
    continuous_update=False,
    orientation="horizontal",
    readout=True,
    readout_format="d",
)

FloatSlider#

[3]:

widgets.FloatSlider(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description="Test:",
    disabled=False,
    continuous_update=False,
    orientation="horizontal",
    readout=True,
    readout_format=".1f",
)

Sliders can also be displayed vertically.

[4]:

widgets.FloatSlider(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description="Test:",
    disabled=False,
    continuous_update=False,
    orientation="vertical",
    readout=True,
    readout_format=".1f",
)

FloatLogSlider#

The FloatLogSlider has a scale that makes it easy to use a slider for a wide range of positive numbers. min and max refer to the minimum and maximum exponents of the base and the value refers to the actual value of the slider.

[5]:

widgets.FloatLogSlider(
    value=10,
    base=10,
    min=-10,  # max exponent of base
    max=10,  # min exponent of base
    step=0.2,  # exponent step
    description="Log Slider",
)

IntRangeSlider#

[6]:

widgets.IntRangeSlider(
    value=[5, 7],
    min=0,
    max=10,
    step=1,
    description="Test:",
    disabled=False,
    continuous_update=False,
    orientation="horizontal",
    readout=True,
    readout_format="d",
)

FloatRangeSlider#

[7]:

widgets.FloatRangeSlider(
    value=[5, 7.5],
    min=0,
    max=10.0,
    step=0.1,
    description="Test:",
    disabled=False,
    continuous_update=False,
    orientation="horizontal",
    readout=True,
    readout_format=".1f",
)

IntProgress#

[8]:

widgets.IntProgress(
    value=7,
    min=0,
    max=10,
    step=1,
    description="Loading:",
    bar_style="",  # "success", "info", "warning", "danger" or ""
    orientation="horizontal",
)

FloatProgress#

[9]:

widgets.FloatProgress(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description="Loading:",
    bar_style="info",
    orientation="horizontal",
)

The numerical text boxes that impose some limit on the data (range, integer-only) impose that restriction when the user presses enter.

BoundedIntText#

[10]:

widgets.BoundedIntText(
    value=7,
    min=0,
    max=10,
    step=1,
    description="Text:",
    disabled=False
)

BoundedFloatText#

[11]:

widgets.BoundedFloatText(
    value=7.5,
    min=0, max=10.0,
    step=0.1,
    description="Text:",
    disabled=False
)

IntText#

[12]:

widgets.IntText(
    value=7,
    description="Any:",
    disabled=False
)

FloatText#

[13]:

widgets.FloatText(
    value=7.5,
    description="Any:",
    disabled=False
)

Boolean widgets#

There are three widgets that are designed to display Boolean values.

ToggleButton#

[14]:

widgets.ToggleButton(
    value=False,
    description="Click me",
    disabled=False,
    button_style="",  # "success", "info", "warning", "danger" or ""
    tooltip="Description",
    icon="check",
)

Checkbox#

[15]:

widgets.Checkbox(
    value=False,
    description="Check me",
    disabled=False
)

Valid#

The Valid widget offers a read-only display.

[16]:

widgets.Valid(
    value=False,
    description="Valid!",
)

Selection widgets#

There are several widgets for selecting single values and two for multiple values. All inherit from the same base class.

RadioButtons#

[18]:

widgets.RadioButtons(
    options=["pepperoni", "pineapple", "anchovies"],
    value="pineapple",
    description="Pizza topping:",
    disabled=False,
)

Select#

[19]:

widgets.Select(
    options=["Linux", "Windows", "OSX"],
    value="OSX",
    rows=3,
    description="OS:",
    disabled=False,
)

SelectionSlider#

[20]:

widgets.SelectionSlider(
    options=["scrambled", "sunny side up", "poached", "over easy"],
    value="sunny side up",
    description="I like my eggs …",
    disabled=False,
    continuous_update=False,
    orientation="horizontal",
    readout=True,
)

SelectionRangeSlider#

index is a tuple of minimum and maximum values.

[21]:

import datetime


dates = [datetime.date(2015, i, 1) for i in range(1, 13)]
options = [(i.strftime("%b"), i) for i in dates]
widgets.SelectionRangeSlider(
    options=options,
    index=(0, 11),
    description="Months (2015)",
    disabled=False
)

ToggleButtons#

[22]:

widgets.ToggleButtons(
    options=["Slow", "Regular", "Fast"],
    description="Speed:",
    disabled=False,
    button_style="",  # "success", "info", "warning", "danger" or ""
    tooltips=[
        "Description of slow",
        "Description of regular",
        "Description of fast",
    ],
    icons=["check"] * 2
)

SelectMultiple#

Several values can be selected by holding down the shift and/or ctrl (or command) keys and clicking the mouse or arrow keys.

[23]:

widgets.SelectMultiple(
    options=["Apples", "Oranges", "Pears"],
    value=["Oranges"],
    rows=3,
    description="Fruits",
    disabled=False,
)

String-Widgets#

There are several widgets that can be used to display strings. The widgets Text andTextarea accept input; the widgets HTML andHTMLMath display a string as HTML (HTMLMath also renders mathematical formulas).

Text#

[24]:

widgets.Text(
    value="Hello World",
    placeholder="Type something",
    description="String:",
    disabled=False,
)

Textarea#

[25]:

widgets.Textarea(
    value="Hello World",
    placeholder="Type something",
    description="String:",
    disabled=False,
)

Label#

The Label widget is useful for custom descriptions that are similar in style to the built-in descriptions.

[26]:

widgets.HBox(
    [widgets.Label(value="The $m$ in $E=mc^2$:"), widgets.FloatSlider()]
)

HTML#

[27]:

widgets.HTML(
    value="Hello <b>World</b>",
    placeholder="Some HTML",
    description="Some HTML",
)

HTML Math#

[28]:

widgets.HTMLMath(
    value=r"Some math and <i>HTML</i>: \(x^2\) and $$\frac{x+1}{x-1}$$",
    placeholder="Some HTML",
    description="Some HTML",
)

Image#

[29]:

file = open("smiley.gif", "rb")
image = file.read()
widgets.Image(
    value=image,
    format="gif",
    width=128,
    height=128,
)

Button#

[30]:

widgets.Button(
    description="Click me",
    disabled=False,
    button_style="",  # "success", "info", "warning", "danger" or ""
    tooltip="Click me",
    icon="check",
)

Output#

The Output widget can record and display stdout, stderr and IPython.display.

You can attach the output to an output widget or delete it programmatically.

[31]:

out = widgets.Output(layout={"border": "1px solid black"})

[32]:

with out:
    for i in range(5):
        print(i, "Hello world!")

[33]:

from IPython.display import YouTubeVideo


with out:
    display(YouTubeVideo("eWzY2nGfkXk"))

[34]:

out

[35]:

out.clear_output()

Wir können Ausgaben auch direkt anhängen mit den Methoden append_stdout, append_stderr oder append_display_data.

[36]:

out = widgets.Output(layout={"border": "1px solid black"})
out.append_stdout("Output appended with append_stdout")
out.append_display_data(YouTubeVideo("eWzY2nGfkXk"))
out

You can find detailed documentation in Output widgets.

Play/Animation-Widget#

The Play widget is useful for running animations that you want to run at a specific speed. In the following example, a slider is linked to the player.

[37]:

play = widgets.Play(
    interval=10,
    value=50,
    min=0,
    max=100,
    step=1,
    description="Press play",
    disabled=False,
)
slider = widgets.IntSlider()
widgets.jslink((play, "value"), (slider, "value"))
widgets.HBox([play, slider])

DatePicker#

The date picker widget works in Chrome, Firefox and IE Edge, but not currently in Safari because it does not support input type="date".

[38]:

widgets.DatePicker(
    description="Pick a Date",
    disabled=False
)

Color picker#

[39]:

widgets.ColorPicker(
    concise=False,
    description="Pick a color",
    value="blue",
    disabled=False
)

Controller#

Controller enables the use of a game controller as an input device.

[40]:

widgets.Controller(
    index=0,
)

Container/layout widgets#

These widgets are used to store other widgets called children.

Box#

[41]:

items = [widgets.Label(str(i)) for i in range(4)]
widgets.Box(items)

HBox#

[42]:

items = [widgets.Label(str(i)) for i in range(4)]
widgets.HBox(items)

VBox#

[43]:

items = [widgets.Label(str(i)) for i in range(4)]
left_box = widgets.VBox([items[0], items[1]])
right_box = widgets.VBox([items[2], items[3]])
widgets.HBox([left_box, right_box])

Accordion#

[44]:

accordion = widgets.Accordion(children=[widgets.IntSlider(), widgets.Text()])
accordion.set_title(0, "Slider")
accordion.set_title(1, "Text")
accordion

Tabs#

In this example the children are set after the tab is created. Titles for the tabes are set in the same way they are for Accordion.

[45]:

tab_contents = ["P0", "P1", "P2", "P3", "P4"]
children = [widgets.Text(description=name) for name in tab_contents]
tab = widgets.Tab()
tab.children = children
for i in range(len(children)):
    tab.set_title(i, str(i))
tab

Accordion andTab#

Unlike the other widgets previously described, the container widgets Accordion andTab update their selected_index attribute when the user changes the accordion or tab; In addition to user input, the selected_index can also be set programmatically.

If selected_index = None is chosen, all accordions will be closed or all tabs will be deselected.

In the following notebook cells the value of selected_index of the tab and/or accordion is displayed.

[46]:

tab.selected_index = 3

[47]:

accordion.selected_index = None

Nesting tabs and accordions#

Tabs and accordions can be nested as deeply as you want. The following example shows some tabs with an accordion as children.

[48]:

tab_nest = widgets.Tab()
tab_nest.children = [accordion, accordion]
tab_nest.set_title(0, "An accordion")
tab_nest.set_title(1, "Copy of the accordion")
tab_nest