-
Widgets 2
-
Lecture1.1
-
Lecture1.2
-
-
Layouts 1
-
Lecture2.1
-
-
Interact 2
-
Lecture3.1
-
Lecture3.2
-
Widgets Part 2
You are also able to make an integer version of this if you use IntText.
#Or the integer version
X = widgets.IntText(
value=7,
description='Number:')
display(X)
Or a float one with no bounds.
#This version, FloatText is not bounded
X = widgets.FloatText(
value=7.5,
description='Number:'
)
display(X)
Besides numbers, we might want a true or false switch. In this case we have a few options. A basic toggle button will allow for switching between true and false.
#Toggle buttons allow for switching between true and false
X = widgets.ToggleButton(
value=False,
description='On/Off',
button_style=''
)
display(X)
The button style argument will let you try out many different stylings.
#The following are all the button styles you can pick from if you wnt a certain style
X = widgets.ToggleButton(
value=False,
description='Success',
button_style='success',
)
display(X)
X = widgets.ToggleButton(
value=False,
description='Info',
button_style='info',
)
display(X)
X = widgets.ToggleButton(
value=False,
description='Warning',
button_style='warning',
)
display(X)
X = widgets.ToggleButton(
value=False,
description='Danger',
button_style='danger',
)
display(X)
And the icon argument will let you try out putting in an icon.
#You can also add an icon like a check
X = widgets.ToggleButton(
value=False,
description='On/Off',
button_style='',
icon='check'
)
display(X)
If you prefer to use a checkbox, that is an option that follows a similar method of taking a value of true or false.
#Alternatively, you might prefer a checkbox
X = widgets.Checkbox(
value=False,
description='Checkbox'
)
display(X)
Sometimes you want to have the option of a few choices. In this case a dropdown will take a list as an argument and allow for choosing one item from this list.
#Dropdowns can be used to allow choosing from a list
X = widgets.Dropdown(
options=['Choice 1', 'Choice 2', 'Choice 3'],
value='Choice 2',
description='Choose:'
)
display(X)
If you print out the value you get whatever is in the dropdown. If you change the value and then run this code it will reflect what you changed it to.
#If you print X.value it will give you whatever the current value is on the UI
#If you change the UI and run this it will reflect what you chose
print(X.value)
If you prefer to have a name on the dropdown but a value or nickname for values you can do this by giving tuples in the list instead. The first element of the tuple is what is displayed and the second is the value that it refers to. In the following we have strings for our choice names but they map to integer values. When you do this you need to set the value as the second part of the tuple. So here when we set 2 as our value we end up getting Choice 2 as the default value in the dropdown and if you print value it says 2 even though choice 2 is displayed.
#If you prefer to have a label like Choice 1 but have it route to an easier representation like say integers
#You can give tuples like so, you need to set the value equal to the second element of the tuple
#but it will be displayed as the label (first element in the tuple)
X = widgets.Dropdown(
options=[('Choice 1', 1), ('Choice 2', 2), ('Choice 3', 3)],
value=2,
description='Choose:'
)
display(X)
print(X.value)
Two other choices are radio buttons or a select which are the same general format.
#If you like radio buttons before it works the same
X = widgets.RadioButtons(
options=[('Choice 1', 1), ('Choice 2', 2), ('Choice 3', 3)],
value=2,
description='Choose:'
)
display(X)
#Or a select box
X = widgets.Select(
options=[('Choice 1', 1), ('Choice 2', 2), ('Choice 3', 3)],
value=2,
description='Choose:'
)
display(X)
Another choice is a slider for the choices.
#The SelectionSlider turns it into a slider
X = widgets.SelectionSlider(
options=[('Choice 1', 1), ('Choice 2', 2), ('Choice 3', 3)],
value=2,
description='Choose:'
)
display(X)
It can take the option orientation as vertical if you want it displayed as a vertical toggle instead of a horizontal one.
#Notice if you give it the orientation='vertical' it is now displayed vertically
X = widgets.SelectionSlider(
options=[('Choice 1', 1), ('Choice 2', 2), ('Choice 3', 3)],
value=2,
description='Choose:',
orientation='vertical'
)
display(X)
The final option for this type that you might want to use is a toggle button.
#Toggle buttons are also a good choice
X = widgets.ToggleButtons(
options=[('Choice 1', 1), ('Choice 2', 2), ('Choice 3', 3)],
value=2,
description='Choose:',
)
display(X)
If you want the ability to pick multiple you could use SelectMultiple, which allows for multiple choices if you use shift/control/command depending on your computer. You need to give a list of choices in the value to use this.
#If you want the ability to choose multiple use the SelectMultiple widget
#You need to give a value of a list of active choices
#Use shift or control/command to select multiple
X = widgets.SelectMultiple(
options=['Choice 1', 'Choice 2', 'Choice 3'],
value=['Choice 1', 'Choice 2'],
description='Choose')
display(X)
Sometimes you need a date though, and a way to do this is with the DatePicker widget. It gives you a calendar to pick with.
#A DatePicker widget allows for a nice calendar UI to pick widgets
X = widgets.DatePicker(
description='Pick a Date'
)
display(X)
Finally, there is a widget for picking colors. You can see the difference between the concise argument being on and off.
#You can also pick a color
#Concise set to false will display more information on the color
X = widgets.ColorPicker(
concise=False,
description='Pick a color',
value='red')
display(X)
#You can also set concise to True to just display the color
X = widgets.ColorPicker(
concise=True,
description='Pick a color',
value='red')
display(X)