Skip to content

Commit 7336a47

Browse files
mwcraigmwcraig
authored
Merge pull request #203 from jupyter-widgets/add_8x_changes
Add ipywidgets 8 notebook
2 parents f6ef08e + 0f63df5 commit 7336a47

File tree

1 file changed

+393
-0
lines changed

1 file changed

+393
-0
lines changed

‎notebooks/08.Ipywidgets_8/08.00-ipywidgets_8.ipynb

+393
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,393 @@
1+
{
2+
"cells": [
3+
{
4+
"cell_type": "markdown",
5+
"id": "533dd758-2834-4fa8-b7cc-b5a1ab74256c",
6+
"metadata": {},
7+
"source": [
8+
"# ipywidgets 8"
9+
]
10+
},
11+
{
12+
"cell_type": "markdown",
13+
"id": "b1c209d4-8dfe-45fd-9b55-b69f8d5e0963",
14+
"metadata": {},
15+
"source": [
16+
"### Currently in release candidate stage, but coming *very* soon!"
17+
]
18+
},
19+
{
20+
"cell_type": "markdown",
21+
"id": "174e8fce-147d-4470-bbd8-5bacd35f3f55",
22+
"metadata": {},
23+
"source": [
24+
"#### Full changelog in the link below\n",
25+
"[ipywidgets 8 changelog](https://github.com/jupyter-widgets/ipywidgets/blob/master/docs/source/changelog.md)"
26+
]
27+
},
28+
{
29+
"cell_type": "markdown",
30+
"id": "8d1c293b-9eee-4355-af38-34a997efaf44",
31+
"metadata": {},
32+
"source": [
33+
"#### In this session will cover some of the main changes in ipywidgets 8 for users. These changes are also documented in [here](https://ipywidgets.readthedocs.io/en/latest/user_migration_guides.html)\n",
34+
"\n",
35+
"#### If you are a widgets developer, please refer to [the migration guide](https://ipywidgets.readthedocs.io/en/latest/migration_guides.html)"
36+
]
37+
},
38+
{
39+
"cell_type": "code",
40+
"execution_count": null,
41+
"id": "a0881c40-c4b0-434d-a1a4-857cba969601",
42+
"metadata": {},
43+
"outputs": [],
44+
"source": [
45+
"import ipywidgets as widgets"
46+
]
47+
},
48+
{
49+
"cell_type": "code",
50+
"execution_count": null,
51+
"id": "a89234b0-b0a0-46d3-8567-97465d69dff4",
52+
"metadata": {},
53+
"outputs": [],
54+
"source": [
55+
"widgets.__version__"
56+
]
57+
},
58+
{
59+
"cell_type": "markdown",
60+
"id": "5581d1e1-e089-4076-941e-872229071f4d",
61+
"metadata": {},
62+
"source": [
63+
"#### Latest documentation here: https://ipywidgets.readthedocs.io/en/latest/index.html"
64+
]
65+
},
66+
{
67+
"cell_type": "markdown",
68+
"id": "a407df5a-d525-46f7-adf2-fac35c2b9d8a",
69+
"metadata": {},
70+
"source": [
71+
"<span style=\"color: red; font-weight: bold\">Python 2.x and <=3.5 are not supported in ipywidgets 8.</span>"
72+
]
73+
},
74+
{
75+
"cell_type": "markdown",
76+
"id": "b35372a7-dc80-48f5-9c03-f7d59c52c59e",
77+
"metadata": {
78+
"tags": []
79+
},
80+
"source": [
81+
"#### New styling attributes support for core widgets:\n",
82+
"1. `font-family` \n",
83+
"2. `font-size`\n",
84+
"3. `font-style`\n",
85+
"4. `font-variant`\n",
86+
"5. `text-color`\n",
87+
"6. `text-decoration`"
88+
]
89+
},
90+
{
91+
"cell_type": "code",
92+
"execution_count": null,
93+
"id": "dbe91b98-bb7a-4292-8df0-efbc49fdfef0",
94+
"metadata": {},
95+
"outputs": [],
96+
"source": [
97+
"from ipywidgets import Valid, Text, ToggleButton, Checkbox, Button, HTML, HTMLMath, Label, Textarea, Password, Combobox, HBox, VBox\n",
98+
"\n",
99+
"checkbox = Checkbox(description='Option A', style=dict(background='lightblue'))\n",
100+
"valid = Valid(value=False, style=dict(background='lightblue'))\n",
101+
"togglebutton = ToggleButton(description=\"Option A\", style=dict(\n",
102+
" background='lightblue',\n",
103+
" font_family=\"Times New Roman\",\n",
104+
" font_size=\"20px\",\n",
105+
" font_style=\"italic\",\n",
106+
" font_variant=\"small-caps\",\n",
107+
" font_weight=\"bold\",\n",
108+
" text_color=\"red\",\n",
109+
" text_decoration=\"underline\",\n",
110+
"))\n",
111+
"\n",
112+
"button = Button(description=\"Button\", style=dict(\n",
113+
" button_color=\"lightblue\",\n",
114+
" font_family=\"Times New Roman\",\n",
115+
" font_size=\"20px\",\n",
116+
" font_style=\"italic\",\n",
117+
" font_variant=\"small-caps\",\n",
118+
" font_weight=\"bold\",\n",
119+
" text_color=\"red\",\n",
120+
" text_decoration=\"underline\",\n",
121+
"))\n",
122+
"\n",
123+
"html = HTML(value='Some HTML text',style=dict(\n",
124+
" background=\"lightblue\",\n",
125+
" font_size=\"30px\",\n",
126+
" text_color=\"red\"\n",
127+
"))\n",
128+
"\n",
129+
"htmlmath = HTMLMath(value='Some HTML text and math: $$\\int \\sqrt{x^2} dx$$',style=dict(\n",
130+
" background=\"lightblue\",\n",
131+
" font_size=\"30px\",\n",
132+
" text_color=\"red\"\n",
133+
"))\n",
134+
"\n",
135+
"label = Label(value=\"Label text\", style=dict(\n",
136+
" background='limegreen',\n",
137+
" font_family=\"Times New Roman\",\n",
138+
" font_size=\"20px\",\n",
139+
" font_style=\"italic\",\n",
140+
" font_variant=\"small-caps\",\n",
141+
" font_weight=\"bold\",\n",
142+
" text_color=\"red\",\n",
143+
" text_decoration=\"underline\",\n",
144+
"))\n",
145+
"\n",
146+
"textarea = Textarea(value='Text area text',style=dict(\n",
147+
" background=\"lightblue\",\n",
148+
" font_size=\"30px\",\n",
149+
" text_color=\"red\"\n",
150+
"))\n",
151+
"\n",
152+
"text = Text(value='Text area text',style=dict(\n",
153+
" background=\"lightblue\",\n",
154+
" font_size=\"30px\",\n",
155+
" text_color=\"red\"\n",
156+
"))\n",
157+
"\n",
158+
"password = Password(value='Text area text',style=dict(\n",
159+
" background=\"lightblue\",\n",
160+
" font_size=\"30px\",\n",
161+
" text_color=\"red\"\n",
162+
"))\n",
163+
"\n",
164+
"combobox = Combobox(value='option B', options=['option A', 'option B', 'Another option'], style=dict(\n",
165+
" background=\"lightblue\",\n",
166+
" font_size=\"30px\",\n",
167+
" text_color=\"red\"\n",
168+
"))\n",
169+
"\n",
170+
"\n",
171+
"VBox([\n",
172+
" HBox([combobox, password, text, textarea]),\n",
173+
" HBox([label, htmlmath, html, button]),\n",
174+
" HBox([togglebutton, valid, checkbox]),\n",
175+
"])"
176+
]
177+
},
178+
{
179+
"cell_type": "markdown",
180+
"id": "674f2b43-a0af-4184-88fa-9664d71f01bf",
181+
"metadata": {},
182+
"source": [
183+
"#### Layout widgets now support setting each border side independently:\n",
184+
"1. `border_top`\n",
185+
"2. `border_right`\n",
186+
"3. `border_bottom`\n",
187+
"4. `border_left`"
188+
]
189+
},
190+
{
191+
"cell_type": "code",
192+
"execution_count": null,
193+
"id": "22dd3054-3c92-4377-b708-542bd7f4db4e",
194+
"metadata": {},
195+
"outputs": [],
196+
"source": [
197+
"from ipywidgets import Button, Layout\n",
198+
"btn = Button(layout=Layout(border_left=\"5px solid green\", border_right=\"5px solid blue\", border_top=\"5px solid yellow\", border_bottom=\"5px solid red\"))\n",
199+
"btn"
200+
]
201+
},
202+
{
203+
"cell_type": "markdown",
204+
"id": "331dfbc1-aab3-4e11-858f-d3c8c66d9793",
205+
"metadata": {},
206+
"source": [
207+
"#### New slider implementation based on `nouislider` with support for range dragging."
208+
]
209+
},
210+
{
211+
"cell_type": "code",
212+
"execution_count": null,
213+
"id": "1aed6d31-834e-48f4-b196-526d6de2de39",
214+
"metadata": {},
215+
"outputs": [],
216+
"source": [
217+
"from ipywidgets import IntRangeSlider\n",
218+
"slider = IntRangeSlider(min=0, max=100)\n",
219+
"slider"
220+
]
221+
},
222+
{
223+
"cell_type": "markdown",
224+
"id": "5069c5a9-3511-405c-b408-21108772baf0",
225+
"metadata": {},
226+
"source": [
227+
"#### New implementation of `FileUpload` widget\n",
228+
"* New representation of `.value` traitlet\n",
229+
"* Files represented as `memoryview` (can be saved to file system)\n",
230+
"* The `.data` traitlet has been removed.\n",
231+
"* The `.metadata` traitlet has been removed."
232+
]
233+
},
234+
{
235+
"cell_type": "code",
236+
"execution_count": null,
237+
"id": "87b55325-56e1-4d88-b266-0f30bf5fc764",
238+
"metadata": {},
239+
"outputs": [],
240+
"source": [
241+
"from ipywidgets import FileUpload\n",
242+
"\n",
243+
"fileupload = FileUpload(multiple=True)\n",
244+
"fileupload"
245+
]
246+
},
247+
{
248+
"cell_type": "code",
249+
"execution_count": null,
250+
"id": "594948f5-32ad-464e-8429-31a52e40b5a2",
251+
"metadata": {},
252+
"outputs": [],
253+
"source": [
254+
"# fileupload.value"
255+
]
256+
},
257+
{
258+
"cell_type": "code",
259+
"execution_count": null,
260+
"id": "296e0340-322a-4611-87bc-11e477563fb1",
261+
"metadata": {},
262+
"outputs": [],
263+
"source": [
264+
"# Text file\n",
265+
"# import codecs\n",
266+
"# print(codecs.decode(fileupload.value[0].content))"
267+
]
268+
},
269+
{
270+
"cell_type": "code",
271+
"execution_count": null,
272+
"id": "18f077d9-d133-4d9e-9f0c-8816a3b85f9c",
273+
"metadata": {},
274+
"outputs": [],
275+
"source": [
276+
"# from ipywidgets import Image\n",
277+
"# Image(value=fileupload.value[1].content.tobytes())"
278+
]
279+
},
280+
{
281+
"cell_type": "markdown",
282+
"id": "709e5005-1569-4232-a618-5bde081247db",
283+
"metadata": {},
284+
"source": [
285+
"#### Tooltips available on all DOM widgets"
286+
]
287+
},
288+
{
289+
"cell_type": "code",
290+
"execution_count": null,
291+
"id": "efaeb9cb-a34a-4a81-94a2-b4b3329fbe81",
292+
"metadata": {},
293+
"outputs": [],
294+
"source": [
295+
"fileupload = FileUpload(tooltip='Upload a file because this tooltip says so')\n",
296+
"fileupload"
297+
]
298+
},
299+
{
300+
"cell_type": "markdown",
301+
"id": "26d3119f-374a-4e11-a96f-c7692838f760",
302+
"metadata": {},
303+
"source": [
304+
"#### ErrorWidget fallback when widget models or views fail."
305+
]
306+
},
307+
{
308+
"cell_type": "markdown",
309+
"id": "2b912ea3-da50-4579-820e-4bdc3996d918",
310+
"metadata": {},
311+
"source": [
312+
"#### Add `Stacked` widget"
313+
]
314+
},
315+
{
316+
"cell_type": "code",
317+
"execution_count": null,
318+
"id": "c7bf1da3-f281-483a-962c-cd02be83a207",
319+
"metadata": {},
320+
"outputs": [],
321+
"source": [
322+
"from ipywidgets import Stacked, IntSlider\n",
323+
"button = Button(description='Click here')\n",
324+
"slider = IntSlider(value=100, min=0, max=100)\n",
325+
"stacked = Stacked([button, slider], selected_index=0)\n",
326+
"stacked # will show only the button\""
327+
]
328+
},
329+
{
330+
"cell_type": "markdown",
331+
"id": "21bcd147-9644-46d4-bb7b-54d6669611b0",
332+
"metadata": {},
333+
"source": [
334+
"#### New `TagsInput` widget"
335+
]
336+
},
337+
{
338+
"cell_type": "code",
339+
"execution_count": null,
340+
"id": "c3810042-70bd-4c9e-9328-44cea0332163",
341+
"metadata": {},
342+
"outputs": [],
343+
"source": [
344+
"from ipywidgets import TagsInput\n",
345+
"\n",
346+
"tagsinput = TagsInput(allowed_tags=\"One Two Three Four Five\".split())\n",
347+
"tagsinput"
348+
]
349+
},
350+
{
351+
"cell_type": "markdown",
352+
"id": "a00f2834-6340-4207-96cb-9cbd3cf08e10",
353+
"metadata": {},
354+
"source": [
355+
"#### New `DatetimePicker` widget"
356+
]
357+
},
358+
{
359+
"cell_type": "code",
360+
"execution_count": null,
361+
"id": "2324621d-1d24-414d-b181-c2f8624e3821",
362+
"metadata": {},
363+
"outputs": [],
364+
"source": [
365+
"from ipywidgets import DatetimePicker\n",
366+
"import datetime\n",
367+
"dt = DatetimePicker()\n",
368+
"dt"
369+
]
370+
}
371+
],
372+
"metadata": {
373+
"kernelspec": {
374+
"display_name": "Python 3 (ipykernel)",
375+
"language": "python",
376+
"name": "python3"
377+
},
378+
"language_info": {
379+
"codemirror_mode": {
380+
"name": "ipython",
381+
"version": 3
382+
},
383+
"file_extension": ".py",
384+
"mimetype": "text/x-python",
385+
"name": "python",
386+
"nbconvert_exporter": "python",
387+
"pygments_lexer": "ipython3",
388+
"version": "3.9.13"
389+
}
390+
},
391+
"nbformat": 4,
392+
"nbformat_minor": 5
393+
}

0 commit comments

Comments
 (0)