Show More
@@ -28,29 +28,6 b'' | |||||
28 | "prompt_number": 3 |
|
28 | "prompt_number": 3 | |
29 | }, |
|
29 | }, | |
30 | { |
|
30 | { | |
31 | "cell_type": "code", |
|
|||
32 | "collapsed": false, |
|
|||
33 | "input": [ |
|
|||
34 | "%%html\n", |
|
|||
35 | "<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>" |
|
|||
36 | ], |
|
|||
37 | "language": "python", |
|
|||
38 | "metadata": {}, |
|
|||
39 | "outputs": [ |
|
|||
40 | { |
|
|||
41 | "html": [ |
|
|||
42 | "<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>" |
|
|||
43 | ], |
|
|||
44 | "metadata": {}, |
|
|||
45 | "output_type": "display_data", |
|
|||
46 | "text": [ |
|
|||
47 | "<IPython.core.display.HTML object>" |
|
|||
48 | ] |
|
|||
49 | } |
|
|||
50 | ], |
|
|||
51 | "prompt_number": 4 |
|
|||
52 | }, |
|
|||
53 | { |
|
|||
54 | "cell_type": "heading", |
|
31 | "cell_type": "heading", | |
55 | "level": 1, |
|
32 | "level": 1, | |
56 | "metadata": { |
|
33 | "metadata": { |
@@ -2,7 +2,7 b'' | |||||
2 | "metadata": { |
|
2 | "metadata": { | |
3 | "celltoolbar": "Slideshow", |
|
3 | "celltoolbar": "Slideshow", | |
4 | "name": "", |
|
4 | "name": "", | |
5 | "signature": "sha256:7a953d1eb1417e7212ddeb70602b36355521ca1907ac33b089850ccea35bd8ab" |
|
5 | "signature": "sha256:f6c1dd624d35ab0c768f77dffdae914baf4d88a3c244047c00ffca8b9c96e81e" | |
6 | }, |
|
6 | }, | |
7 | "nbformat": 3, |
|
7 | "nbformat": 3, | |
8 | "nbformat_minor": 0, |
|
8 | "nbformat_minor": 0, | |
@@ -17,27 +17,20 b'' | |||||
17 | ] |
|
17 | ] | |
18 | }, |
|
18 | }, | |
19 | { |
|
19 | { | |
20 |
"cell_type": " |
|
20 | "cell_type": "heading", | |
21 |
" |
|
21 | "level": 1, | |
22 | "input": [ |
|
|||
23 | "%%html\n", |
|
|||
24 | "<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>" |
|
|||
25 | ], |
|
|||
26 | "language": "python", |
|
|||
27 | "metadata": {}, |
|
22 | "metadata": {}, | |
28 |
" |
|
23 | "source": [ | |
29 | { |
|
24 | "Simple Widget Introduction" | |
30 | "html": [ |
|
25 | ] | |
31 | "<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>" |
|
26 | }, | |
32 | ], |
|
27 | { | |
33 | "metadata": {}, |
|
28 | "cell_type": "heading", | |
34 | "output_type": "display_data", |
|
29 | "level": 2, | |
35 |
|
|
30 | "metadata": {}, | |
36 | "<IPython.core.display.HTML object>" |
|
31 | "source": [ | |
37 | ] |
|
32 | "What are widgets?" | |
38 |
|
|
33 | ] | |
39 | ], |
|
|||
40 | "prompt_number": 11 |
|
|||
41 | }, |
|
34 | }, | |
42 | { |
|
35 | { | |
43 | "cell_type": "markdown", |
|
36 | "cell_type": "markdown", | |
@@ -47,15 +40,20 b'' | |||||
47 | } |
|
40 | } | |
48 | }, |
|
41 | }, | |
49 | "source": [ |
|
42 | "source": [ | |
50 | "# Simple Widget Introduction\n", |
|
|||
51 | "\n", |
|
|||
52 | "## What are widgets?\n", |
|
|||
53 | "Widgets are elements that exists in both the front-end and the back-end.\n", |
|
43 | "Widgets are elements that exists in both the front-end and the back-end.\n", | |
54 | "\n", |
|
44 | "\n", | |
55 | "** Insert Frontend-Backend Picture **" |
|
45 | "** Insert Frontend-Backend Picture **" | |
56 | ] |
|
46 | ] | |
57 | }, |
|
47 | }, | |
58 | { |
|
48 | { | |
|
49 | "cell_type": "heading", | |||
|
50 | "level": 2, | |||
|
51 | "metadata": {}, | |||
|
52 | "source": [ | |||
|
53 | "What can they be used for?" | |||
|
54 | ] | |||
|
55 | }, | |||
|
56 | { | |||
59 | "cell_type": "markdown", |
|
57 | "cell_type": "markdown", | |
60 | "metadata": { |
|
58 | "metadata": { | |
61 | "slideshow": { |
|
59 | "slideshow": { | |
@@ -63,12 +61,19 b'' | |||||
63 | } |
|
61 | } | |
64 | }, |
|
62 | }, | |
65 | "source": [ |
|
63 | "source": [ | |
66 | "## What can they be used for?\n", |
|
|||
67 | "You can use widgets to build **interactive GUIs** for your notebooks. \n", |
|
64 | "You can use widgets to build **interactive GUIs** for your notebooks. \n", | |
68 | "You can also use widgets to **synchronize stateful and stateless information** between Python and JavaScript." |
|
65 | "You can also use widgets to **synchronize stateful and stateless information** between Python and JavaScript." | |
69 | ] |
|
66 | ] | |
70 | }, |
|
67 | }, | |
71 | { |
|
68 | { | |
|
69 | "cell_type": "heading", | |||
|
70 | "level": 2, | |||
|
71 | "metadata": {}, | |||
|
72 | "source": [ | |||
|
73 | "Using widgets " | |||
|
74 | ] | |||
|
75 | }, | |||
|
76 | { | |||
72 | "cell_type": "markdown", |
|
77 | "cell_type": "markdown", | |
73 | "metadata": { |
|
78 | "metadata": { | |
74 | "slideshow": { |
|
79 | "slideshow": { | |
@@ -76,7 +81,6 b'' | |||||
76 | } |
|
81 | } | |
77 | }, |
|
82 | }, | |
78 | "source": [ |
|
83 | "source": [ | |
79 | "## Using widgets \n", |
|
|||
80 | "To use the widget framework, you need to **import `IPython.html.widgets`**." |
|
84 | "To use the widget framework, you need to **import `IPython.html.widgets`**." | |
81 | ] |
|
85 | ] | |
82 | }, |
|
86 | }, | |
@@ -184,6 +188,14 b'' | |||||
184 | "prompt_number": 4 |
|
188 | "prompt_number": 4 | |
185 | }, |
|
189 | }, | |
186 | { |
|
190 | { | |
|
191 | "cell_type": "heading", | |||
|
192 | "level": 2, | |||
|
193 | "metadata": {}, | |||
|
194 | "source": [ | |||
|
195 | "Why does displaying the same widget twice work?" | |||
|
196 | ] | |||
|
197 | }, | |||
|
198 | { | |||
187 | "cell_type": "markdown", |
|
199 | "cell_type": "markdown", | |
188 | "metadata": { |
|
200 | "metadata": { | |
189 | "slideshow": { |
|
201 | "slideshow": { | |
@@ -191,7 +203,6 b'' | |||||
191 | } |
|
203 | } | |
192 | }, |
|
204 | }, | |
193 | "source": [ |
|
205 | "source": [ | |
194 | "## Why does displaying the same widget twice work?\n", |
|
|||
195 | "Widgets are **represented in the back-end by a single object**. Each time a widget is displayed, **a new representation** of that same object is created in the front-end. These representations are called **views**.\n", |
|
206 | "Widgets are **represented in the back-end by a single object**. Each time a widget is displayed, **a new representation** of that same object is created in the front-end. These representations are called **views**.\n", | |
196 | "\n", |
|
207 | "\n", | |
197 | "** Insert Backend-Frontend Views Figure **" |
|
208 | "** Insert Backend-Frontend Views Figure **" | |
@@ -228,6 +239,14 b'' | |||||
228 | "prompt_number": 5 |
|
239 | "prompt_number": 5 | |
229 | }, |
|
240 | }, | |
230 | { |
|
241 | { | |
|
242 | "cell_type": "heading", | |||
|
243 | "level": 2, | |||
|
244 | "metadata": {}, | |||
|
245 | "source": [ | |||
|
246 | "Widget properties" | |||
|
247 | ] | |||
|
248 | }, | |||
|
249 | { | |||
231 | "cell_type": "markdown", |
|
250 | "cell_type": "markdown", | |
232 | "metadata": { |
|
251 | "metadata": { | |
233 | "slideshow": { |
|
252 | "slideshow": { | |
@@ -235,7 +254,6 b'' | |||||
235 | } |
|
254 | } | |
236 | }, |
|
255 | }, | |
237 | "source": [ |
|
256 | "source": [ | |
238 | "## Widget properties\n", |
|
|||
239 | "All of the IPython widgets **share a similar naming scheme**. To read the value of a widget, you can query its `value` property." |
|
257 | "All of the IPython widgets **share a similar naming scheme**. To read the value of a widget, you can query its `value` property." | |
240 | ] |
|
258 | ] | |
241 | }, |
|
259 | }, | |
@@ -328,6 +346,14 b'' | |||||
328 | "prompt_number": 8 |
|
346 | "prompt_number": 8 | |
329 | }, |
|
347 | }, | |
330 | { |
|
348 | { | |
|
349 | "cell_type": "heading", | |||
|
350 | "level": 3, | |||
|
351 | "metadata": {}, | |||
|
352 | "source": [ | |||
|
353 | "Shorthand for setting the initial values of widget properties" | |||
|
354 | ] | |||
|
355 | }, | |||
|
356 | { | |||
331 | "cell_type": "markdown", |
|
357 | "cell_type": "markdown", | |
332 | "metadata": { |
|
358 | "metadata": { | |
333 | "slideshow": { |
|
359 | "slideshow": { | |
@@ -335,7 +361,6 b'' | |||||
335 | } |
|
361 | } | |
336 | }, |
|
362 | }, | |
337 | "source": [ |
|
363 | "source": [ | |
338 | "### Shorthand for setting the initial values of widget properties\n", |
|
|||
339 | "While creating a widget, you can set some or all of the initial values of that widget by **defining them as keyword arguments in the widget's constructor** (as seen below)." |
|
364 | "While creating a widget, you can set some or all of the initial values of that widget by **defining them as keyword arguments in the widget's constructor** (as seen below)." | |
340 | ] |
|
365 | ] | |
341 | }, |
|
366 | }, | |
@@ -351,6 +376,14 b'' | |||||
351 | "prompt_number": 9 |
|
376 | "prompt_number": 9 | |
352 | }, |
|
377 | }, | |
353 | { |
|
378 | { | |
|
379 | "cell_type": "heading", | |||
|
380 | "level": 2, | |||
|
381 | "metadata": {}, | |||
|
382 | "source": [ | |||
|
383 | "Linking two similar widgets" | |||
|
384 | ] | |||
|
385 | }, | |||
|
386 | { | |||
354 | "cell_type": "markdown", |
|
387 | "cell_type": "markdown", | |
355 | "metadata": { |
|
388 | "metadata": { | |
356 | "slideshow": { |
|
389 | "slideshow": { | |
@@ -358,7 +391,6 b'' | |||||
358 | } |
|
391 | } | |
359 | }, |
|
392 | }, | |
360 | "source": [ |
|
393 | "source": [ | |
361 | "## Linking two similar widgets\n", |
|
|||
362 | "If you need to display the same value two different ways, you'll have to use two different widgets. Instead of **attempting to manually synchronize the values** of the two widgets, you can use the `traitlet` `link` function **to link two properties together**. Below, the values of three widgets are linked together." |
|
394 | "If you need to display the same value two different ways, you'll have to use two different widgets. Instead of **attempting to manually synchronize the values** of the two widgets, you can use the `traitlet` `link` function **to link two properties together**. Below, the values of three widgets are linked together." | |
363 | ] |
|
395 | ] | |
364 | }, |
|
396 | }, | |
@@ -381,6 +413,14 b'' | |||||
381 | "prompt_number": 10 |
|
413 | "prompt_number": 10 | |
382 | }, |
|
414 | }, | |
383 | { |
|
415 | { | |
|
416 | "cell_type": "heading", | |||
|
417 | "level": 3, | |||
|
418 | "metadata": {}, | |||
|
419 | "source": [ | |||
|
420 | "Unlinking widgets" | |||
|
421 | ] | |||
|
422 | }, | |||
|
423 | { | |||
384 | "cell_type": "markdown", |
|
424 | "cell_type": "markdown", | |
385 | "metadata": { |
|
425 | "metadata": { | |
386 | "slideshow": { |
|
426 | "slideshow": { | |
@@ -388,7 +428,6 b'' | |||||
388 | } |
|
428 | } | |
389 | }, |
|
429 | }, | |
390 | "source": [ |
|
430 | "source": [ | |
391 | "### Unlinking widgets\n", |
|
|||
392 | "Unlinking the widgets is simple. All you have to do is call `.unlink` on the link object." |
|
431 | "Unlinking the widgets is simple. All you have to do is call `.unlink` on the link object." | |
393 | ] |
|
432 | ] | |
394 | }, |
|
433 | }, |
@@ -8,7 +8,7 b'' | |||||
8 | ], |
|
8 | ], | |
9 | "celltoolbar": "Slideshow", |
|
9 | "celltoolbar": "Slideshow", | |
10 | "name": "", |
|
10 | "name": "", | |
11 | "signature": "sha256:9f69a28be85dccdcc7e2b5d742047aa140a572d19e4215467aa88745c29ffce7" |
|
11 | "signature": "sha256:ac1b90929c7736b2261ba498b6f28dd89d3e7b7981c43f937879febe6841e4cd" | |
12 | }, |
|
12 | }, | |
13 | "nbformat": 3, |
|
13 | "nbformat": 3, | |
14 | "nbformat_minor": 0, |
|
14 | "nbformat_minor": 0, | |
@@ -23,29 +23,6 b'' | |||||
23 | ] |
|
23 | ] | |
24 | }, |
|
24 | }, | |
25 | { |
|
25 | { | |
26 | "cell_type": "code", |
|
|||
27 | "collapsed": false, |
|
|||
28 | "input": [ |
|
|||
29 | "%%html\n", |
|
|||
30 | "<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>" |
|
|||
31 | ], |
|
|||
32 | "language": "python", |
|
|||
33 | "metadata": {}, |
|
|||
34 | "outputs": [ |
|
|||
35 | { |
|
|||
36 | "html": [ |
|
|||
37 | "<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>" |
|
|||
38 | ], |
|
|||
39 | "metadata": {}, |
|
|||
40 | "output_type": "display_data", |
|
|||
41 | "text": [ |
|
|||
42 | "<IPython.core.display.HTML object>" |
|
|||
43 | ] |
|
|||
44 | } |
|
|||
45 | ], |
|
|||
46 | "prompt_number": 1 |
|
|||
47 | }, |
|
|||
48 | { |
|
|||
49 | "cell_type": "heading", |
|
26 | "cell_type": "heading", | |
50 | "level": 1, |
|
27 | "level": 1, | |
51 | "metadata": { |
|
28 | "metadata": { |
@@ -2,7 +2,7 b'' | |||||
2 | "metadata": { |
|
2 | "metadata": { | |
3 | "celltoolbar": "Slideshow", |
|
3 | "celltoolbar": "Slideshow", | |
4 | "name": "", |
|
4 | "name": "", | |
5 | "signature": "sha256:e6f77565893357e0302d40f80fbb389950912ab04a07b64026e28720cf11bfbe" |
|
5 | "signature": "sha256:4200cc7b2c7067f4c5391eeee6ba0d9be43b4faa16a245ba1634e7de66150372" | |
6 | }, |
|
6 | }, | |
7 | "nbformat": 3, |
|
7 | "nbformat": 3, | |
8 | "nbformat_minor": 0, |
|
8 | "nbformat_minor": 0, | |
@@ -17,27 +17,20 b'' | |||||
17 | ] |
|
17 | ] | |
18 | }, |
|
18 | }, | |
19 | { |
|
19 | { | |
20 |
"cell_type": " |
|
20 | "cell_type": "heading", | |
21 |
" |
|
21 | "level": 1, | |
22 | "input": [ |
|
|||
23 | "%%html\n", |
|
|||
24 | "<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>" |
|
|||
25 | ], |
|
|||
26 | "language": "python", |
|
|||
27 | "metadata": {}, |
|
22 | "metadata": {}, | |
28 |
" |
|
23 | "source": [ | |
29 | { |
|
24 | "Widget List" | |
30 | "html": [ |
|
25 | ] | |
31 | "<style>div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; }</style>" |
|
26 | }, | |
32 | ], |
|
27 | { | |
33 | "metadata": {}, |
|
28 | "cell_type": "heading", | |
34 | "output_type": "display_data", |
|
29 | "level": 2, | |
35 |
|
|
30 | "metadata": {}, | |
36 | "<IPython.core.display.HTML object>" |
|
31 | "source": [ | |
37 | ] |
|
32 | "Complete list" | |
38 |
|
|
33 | ] | |
39 | ], |
|
|||
40 | "prompt_number": 1 |
|
|||
41 | }, |
|
34 | }, | |
42 | { |
|
35 | { | |
43 | "cell_type": "markdown", |
|
36 | "cell_type": "markdown", | |
@@ -47,9 +40,6 b'' | |||||
47 | } |
|
40 | } | |
48 | }, |
|
41 | }, | |
49 | "source": [ |
|
42 | "source": [ | |
50 | "# Widget List\n", |
|
|||
51 | "\n", |
|
|||
52 | "## Complete list\n", |
|
|||
53 | "For a complete list of the widgets available to you, you can list the classes in the widget namespace (as seen below). Classes with the suffix `Widget` are widgets. `Widget` and `DOMWidget` are base classes." |
|
43 | "For a complete list of the widgets available to you, you can list the classes in the widget namespace (as seen below). Classes with the suffix `Widget` are widgets. `Widget` and `DOMWidget` are base classes." | |
54 | ] |
|
44 | ] | |
55 | }, |
|
45 | }, |
@@ -8,7 +8,7 b'' | |||||
8 | ], |
|
8 | ], | |
9 | "celltoolbar": "Slideshow", |
|
9 | "celltoolbar": "Slideshow", | |
10 | "name": "", |
|
10 | "name": "", | |
11 | "signature": "sha256:98ca4ae261d3dc9c0b43b3fa822772a47fff9956e443c640b2caead8d02efece" |
|
11 | "signature": "sha256:6ee07cf9871c5a2431610eb8a2a5057f9e669769932696690f70967b255fbea7" | |
12 | }, |
|
12 | }, | |
13 | "nbformat": 3, |
|
13 | "nbformat": 3, | |
14 | "nbformat_minor": 0, |
|
14 | "nbformat_minor": 0, | |
@@ -28,7 +28,6 b'' | |||||
28 | "input": [ |
|
28 | "input": [ | |
29 | "%%html\n", |
|
29 | "%%html\n", | |
30 | "<style>\n", |
|
30 | "<style>\n", | |
31 | "div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; } // Slideshow styling.\n", |
|
|||
32 | ".example-container { background: #999999; padding: 2px; min-height: 100px; }\n", |
|
31 | ".example-container { background: #999999; padding: 2px; min-height: 100px; }\n", | |
33 | ".example-container.sm { min-height: 50px; }\n", |
|
32 | ".example-container.sm { min-height: 50px; }\n", | |
34 | ".example-box { background: #9999FF; width: 50px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;}\n", |
|
33 | ".example-box { background: #9999FF; width: 50px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;}\n", | |
@@ -42,7 +41,6 b'' | |||||
42 | { |
|
41 | { | |
43 | "html": [ |
|
42 | "html": [ | |
44 | "<style>\n", |
|
43 | "<style>\n", | |
45 | "div.text_cell.cell.rendered.slideshow-slide { margin-top: 5em !important; } // Slideshow styling.\n", |
|
|||
46 | ".example-container { background: #999999; padding: 2px; min-height: 100px; }\n", |
|
44 | ".example-container { background: #999999; padding: 2px; min-height: 100px; }\n", | |
47 | ".example-container.sm { min-height: 50px; }\n", |
|
45 | ".example-container.sm { min-height: 50px; }\n", | |
48 | ".example-box { background: #9999FF; width: 50px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;}\n", |
|
46 | ".example-box { background: #9999FF; width: 50px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;}\n", | |
@@ -57,7 +55,7 b'' | |||||
57 | ] |
|
55 | ] | |
58 | } |
|
56 | } | |
59 | ], |
|
57 | ], | |
60 |
"prompt_number": |
|
58 | "prompt_number": 6 | |
61 | }, |
|
59 | }, | |
62 | { |
|
60 | { | |
63 | "cell_type": "heading", |
|
61 | "cell_type": "heading", | |
@@ -98,7 +96,7 b'' | |||||
98 | "language": "python", |
|
96 | "language": "python", | |
99 | "metadata": {}, |
|
97 | "metadata": {}, | |
100 | "outputs": [], |
|
98 | "outputs": [], | |
101 |
"prompt_number": |
|
99 | "prompt_number": 7 | |
102 | }, |
|
100 | }, | |
103 | { |
|
101 | { | |
104 | "cell_type": "heading", |
|
102 | "cell_type": "heading", | |
@@ -128,7 +126,7 b'' | |||||
128 | "language": "python", |
|
126 | "language": "python", | |
129 | "metadata": {}, |
|
127 | "metadata": {}, | |
130 | "outputs": [], |
|
128 | "outputs": [], | |
131 |
"prompt_number": |
|
129 | "prompt_number": 8 | |
132 | }, |
|
130 | }, | |
133 | { |
|
131 | { | |
134 | "cell_type": "heading", |
|
132 | "cell_type": "heading", | |
@@ -158,7 +156,7 b'' | |||||
158 | "language": "python", |
|
156 | "language": "python", | |
159 | "metadata": {}, |
|
157 | "metadata": {}, | |
160 | "outputs": [], |
|
158 | "outputs": [], | |
161 |
"prompt_number": |
|
159 | "prompt_number": 9 | |
162 | }, |
|
160 | }, | |
163 | { |
|
161 | { | |
164 | "cell_type": "heading", |
|
162 | "cell_type": "heading", | |
@@ -187,13 +185,14 b'' | |||||
187 | "btn.set_css({\n", |
|
185 | "btn.set_css({\n", | |
188 | " 'width': '100px',\n", |
|
186 | " 'width': '100px',\n", | |
189 | " 'height': '100px',\n", |
|
187 | " 'height': '100px',\n", | |
|
188 | " 'background': 'red',\n", | |||
190 | "})\n", |
|
189 | "})\n", | |
191 | "btn" |
|
190 | "btn" | |
192 | ], |
|
191 | ], | |
193 | "language": "python", |
|
192 | "language": "python", | |
194 | "metadata": {}, |
|
193 | "metadata": {}, | |
195 | "outputs": [], |
|
194 | "outputs": [], | |
196 |
"prompt_number": |
|
195 | "prompt_number": 12 | |
197 | }, |
|
196 | }, | |
198 | { |
|
197 | { | |
199 | "cell_type": "heading", |
|
198 | "cell_type": "heading", | |
@@ -218,12 +217,12 b'' | |||||
218 | "cell_type": "code", |
|
217 | "cell_type": "code", | |
219 | "collapsed": false, |
|
218 | "collapsed": false, | |
220 | "input": [ |
|
219 | "input": [ | |
221 |
" |
|
220 | "btn.set_css('background', '')" | |
222 | ], |
|
221 | ], | |
223 | "language": "python", |
|
222 | "language": "python", | |
224 | "metadata": {}, |
|
223 | "metadata": {}, | |
225 | "outputs": [], |
|
224 | "outputs": [], | |
226 |
"prompt_number": |
|
225 | "prompt_number": 13 | |
227 | }, |
|
226 | }, | |
228 | { |
|
227 | { | |
229 | "cell_type": "markdown", |
|
228 | "cell_type": "markdown", | |
@@ -270,7 +269,15 b'' | |||||
270 | "language": "python", |
|
269 | "language": "python", | |
271 | "metadata": {}, |
|
270 | "metadata": {}, | |
272 | "outputs": [], |
|
271 | "outputs": [], | |
273 |
"prompt_number": |
|
272 | "prompt_number": 14 | |
|
273 | }, | |||
|
274 | { | |||
|
275 | "cell_type": "heading", | |||
|
276 | "level": 3, | |||
|
277 | "metadata": {}, | |||
|
278 | "source": [ | |||
|
279 | "After the parent is displayed" | |||
|
280 | ] | |||
274 | }, |
|
281 | }, | |
275 | { |
|
282 | { | |
276 | "cell_type": "markdown", |
|
283 | "cell_type": "markdown", | |
@@ -280,7 +287,6 b'' | |||||
280 | } |
|
287 | } | |
281 | }, |
|
288 | }, | |
282 | "source": [ |
|
289 | "source": [ | |
283 | "### After the parent is displayed\n", |
|
|||
284 | "Children **can be added to parents** after the parent has been displayed. The **parent is responsible for rendering its children**." |
|
290 | "Children **can be added to parents** after the parent has been displayed. The **parent is responsible for rendering its children**." | |
285 | ] |
|
291 | ] | |
286 | }, |
|
292 | }, | |
@@ -298,7 +304,7 b'' | |||||
298 | "language": "python", |
|
304 | "language": "python", | |
299 | "metadata": {}, |
|
305 | "metadata": {}, | |
300 | "outputs": [], |
|
306 | "outputs": [], | |
301 |
"prompt_number": |
|
307 | "prompt_number": 15 | |
302 | }, |
|
308 | }, | |
303 | { |
|
309 | { | |
304 | "cell_type": "heading", |
|
310 | "cell_type": "heading", | |
@@ -348,7 +354,7 b'' | |||||
348 | "language": "python", |
|
354 | "language": "python", | |
349 | "metadata": {}, |
|
355 | "metadata": {}, | |
350 | "outputs": [], |
|
356 | "outputs": [], | |
351 |
"prompt_number": |
|
357 | "prompt_number": 16 | |
352 | }, |
|
358 | }, | |
353 | { |
|
359 | { | |
354 | "cell_type": "heading", |
|
360 | "cell_type": "heading", | |
@@ -383,7 +389,7 b'' | |||||
383 | "language": "python", |
|
389 | "language": "python", | |
384 | "metadata": {}, |
|
390 | "metadata": {}, | |
385 | "outputs": [], |
|
391 | "outputs": [], | |
386 |
"prompt_number": 1 |
|
392 | "prompt_number": 17 | |
387 | }, |
|
393 | }, | |
388 | { |
|
394 | { | |
389 | "cell_type": "heading", |
|
395 | "cell_type": "heading", | |
@@ -415,7 +421,7 b'' | |||||
415 | "language": "python", |
|
421 | "language": "python", | |
416 | "metadata": {}, |
|
422 | "metadata": {}, | |
417 | "outputs": [], |
|
423 | "outputs": [], | |
418 |
"prompt_number": 1 |
|
424 | "prompt_number": 18 | |
419 | }, |
|
425 | }, | |
420 | { |
|
426 | { | |
421 | "cell_type": "code", |
|
427 | "cell_type": "code", | |
@@ -426,7 +432,7 b'' | |||||
426 | "language": "python", |
|
432 | "language": "python", | |
427 | "metadata": {}, |
|
433 | "metadata": {}, | |
428 | "outputs": [], |
|
434 | "outputs": [], | |
429 |
"prompt_number": 1 |
|
435 | "prompt_number": 19 | |
430 | }, |
|
436 | }, | |
431 | { |
|
437 | { | |
432 | "cell_type": "code", |
|
438 | "cell_type": "code", | |
@@ -435,7 +441,7 b'' | |||||
435 | "language": "python", |
|
441 | "language": "python", | |
436 | "metadata": {}, |
|
442 | "metadata": {}, | |
437 | "outputs": [], |
|
443 | "outputs": [], | |
438 |
"prompt_number": 1 |
|
444 | "prompt_number": 19 | |
439 | }, |
|
445 | }, | |
440 | { |
|
446 | { | |
441 | "cell_type": "code", |
|
447 | "cell_type": "code", | |
@@ -444,7 +450,7 b'' | |||||
444 | "language": "python", |
|
450 | "language": "python", | |
445 | "metadata": {}, |
|
451 | "metadata": {}, | |
446 | "outputs": [], |
|
452 | "outputs": [], | |
447 |
"prompt_number": 1 |
|
453 | "prompt_number": 19 | |
448 | }, |
|
454 | }, | |
449 | { |
|
455 | { | |
450 | "cell_type": "code", |
|
456 | "cell_type": "code", | |
@@ -453,7 +459,7 b'' | |||||
453 | "language": "python", |
|
459 | "language": "python", | |
454 | "metadata": {}, |
|
460 | "metadata": {}, | |
455 | "outputs": [], |
|
461 | "outputs": [], | |
456 |
"prompt_number": 1 |
|
462 | "prompt_number": 19 | |
457 | }, |
|
463 | }, | |
458 | { |
|
464 | { | |
459 | "cell_type": "code", |
|
465 | "cell_type": "code", | |
@@ -462,7 +468,7 b'' | |||||
462 | "language": "python", |
|
468 | "language": "python", | |
463 | "metadata": {}, |
|
469 | "metadata": {}, | |
464 | "outputs": [], |
|
470 | "outputs": [], | |
465 |
"prompt_number": 1 |
|
471 | "prompt_number": 19 | |
466 | }, |
|
472 | }, | |
467 | { |
|
473 | { | |
468 | "cell_type": "code", |
|
474 | "cell_type": "code", | |
@@ -471,7 +477,7 b'' | |||||
471 | "language": "python", |
|
477 | "language": "python", | |
472 | "metadata": {}, |
|
478 | "metadata": {}, | |
473 | "outputs": [], |
|
479 | "outputs": [], | |
474 |
"prompt_number": 1 |
|
480 | "prompt_number": 19 | |
475 | }, |
|
481 | }, | |
476 | { |
|
482 | { | |
477 | "cell_type": "code", |
|
483 | "cell_type": "code", | |
@@ -480,7 +486,7 b'' | |||||
480 | "language": "python", |
|
486 | "language": "python", | |
481 | "metadata": {}, |
|
487 | "metadata": {}, | |
482 | "outputs": [], |
|
488 | "outputs": [], | |
483 |
"prompt_number": 1 |
|
489 | "prompt_number": 19 | |
484 | }, |
|
490 | }, | |
485 | { |
|
491 | { | |
486 | "cell_type": "code", |
|
492 | "cell_type": "code", | |
@@ -489,7 +495,7 b'' | |||||
489 | "language": "python", |
|
495 | "language": "python", | |
490 | "metadata": {}, |
|
496 | "metadata": {}, | |
491 | "outputs": [], |
|
497 | "outputs": [], | |
492 |
"prompt_number": 1 |
|
498 | "prompt_number": 19 | |
493 | }, |
|
499 | }, | |
494 | { |
|
500 | { | |
495 | "cell_type": "code", |
|
501 | "cell_type": "code", | |
@@ -498,7 +504,7 b'' | |||||
498 | "language": "python", |
|
504 | "language": "python", | |
499 | "metadata": {}, |
|
505 | "metadata": {}, | |
500 | "outputs": [], |
|
506 | "outputs": [], | |
501 |
"prompt_number": 1 |
|
507 | "prompt_number": 19 | |
502 | }, |
|
508 | }, | |
503 | { |
|
509 | { | |
504 | "cell_type": "code", |
|
510 | "cell_type": "code", | |
@@ -507,7 +513,7 b'' | |||||
507 | "language": "python", |
|
513 | "language": "python", | |
508 | "metadata": {}, |
|
514 | "metadata": {}, | |
509 | "outputs": [], |
|
515 | "outputs": [], | |
510 |
"prompt_number": 1 |
|
516 | "prompt_number": 19 | |
511 | }, |
|
517 | }, | |
512 | { |
|
518 | { | |
513 | "cell_type": "code", |
|
519 | "cell_type": "code", | |
@@ -516,7 +522,7 b'' | |||||
516 | "language": "python", |
|
522 | "language": "python", | |
517 | "metadata": {}, |
|
523 | "metadata": {}, | |
518 | "outputs": [], |
|
524 | "outputs": [], | |
519 |
"prompt_number": 1 |
|
525 | "prompt_number": 19 | |
520 | }, |
|
526 | }, | |
521 | { |
|
527 | { | |
522 | "cell_type": "code", |
|
528 | "cell_type": "code", | |
@@ -525,7 +531,7 b'' | |||||
525 | "language": "python", |
|
531 | "language": "python", | |
526 | "metadata": {}, |
|
532 | "metadata": {}, | |
527 | "outputs": [], |
|
533 | "outputs": [], | |
528 |
"prompt_number": 1 |
|
534 | "prompt_number": 19 | |
529 | }, |
|
535 | }, | |
530 | { |
|
536 | { | |
531 | "cell_type": "code", |
|
537 | "cell_type": "code", | |
@@ -534,7 +540,7 b'' | |||||
534 | "language": "python", |
|
540 | "language": "python", | |
535 | "metadata": {}, |
|
541 | "metadata": {}, | |
536 | "outputs": [], |
|
542 | "outputs": [], | |
537 |
"prompt_number": 1 |
|
543 | "prompt_number": 19 | |
538 | }, |
|
544 | }, | |
539 | { |
|
545 | { | |
540 | "cell_type": "code", |
|
546 | "cell_type": "code", | |
@@ -543,7 +549,7 b'' | |||||
543 | "language": "python", |
|
549 | "language": "python", | |
544 | "metadata": {}, |
|
550 | "metadata": {}, | |
545 | "outputs": [], |
|
551 | "outputs": [], | |
546 |
"prompt_number": 1 |
|
552 | "prompt_number": 19 | |
547 | }, |
|
553 | }, | |
548 | { |
|
554 | { | |
549 | "cell_type": "code", |
|
555 | "cell_type": "code", | |
@@ -552,7 +558,7 b'' | |||||
552 | "language": "python", |
|
558 | "language": "python", | |
553 | "metadata": {}, |
|
559 | "metadata": {}, | |
554 | "outputs": [], |
|
560 | "outputs": [], | |
555 |
"prompt_number": 1 |
|
561 | "prompt_number": 19 | |
556 | }, |
|
562 | }, | |
557 | { |
|
563 | { | |
558 | "cell_type": "code", |
|
564 | "cell_type": "code", | |
@@ -563,7 +569,7 b'' | |||||
563 | "language": "python", |
|
569 | "language": "python", | |
564 | "metadata": {}, |
|
570 | "metadata": {}, | |
565 | "outputs": [], |
|
571 | "outputs": [], | |
566 |
"prompt_number": |
|
572 | "prompt_number": 20 | |
567 | }, |
|
573 | }, | |
568 | { |
|
574 | { | |
569 | "cell_type": "code", |
|
575 | "cell_type": "code", | |
@@ -574,7 +580,7 b'' | |||||
574 | "language": "python", |
|
580 | "language": "python", | |
575 | "metadata": {}, |
|
581 | "metadata": {}, | |
576 | "outputs": [], |
|
582 | "outputs": [], | |
577 |
"prompt_number": 1 |
|
583 | "prompt_number": 21 | |
578 | }, |
|
584 | }, | |
579 | { |
|
585 | { | |
580 | "cell_type": "heading", |
|
586 | "cell_type": "heading", | |
@@ -607,19 +613,8 b'' | |||||
607 | ], |
|
613 | ], | |
608 | "language": "python", |
|
614 | "language": "python", | |
609 | "metadata": {}, |
|
615 | "metadata": {}, | |
610 | "outputs": [ |
|
616 | "outputs": [], | |
611 | { |
|
617 | "prompt_number": 22 | |
612 | "ename": "NameError", |
|
|||
613 | "evalue": "name 'display' is not defined", |
|
|||
614 | "output_type": "pyerr", |
|
|||
615 | "traceback": [ |
|
|||
616 | "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m\n\u001b[0;31mNameError\u001b[0m Traceback (most recent call last)", |
|
|||
617 | "\u001b[0;32m<ipython-input-4-66f52ebe0195>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m()\u001b[0m\n\u001b[0;32m----> 1\u001b[0;31m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"a:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m 2\u001b[0m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"aa:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m 3\u001b[0m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"aaa:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n", |
|
|||
618 | "\u001b[0;31mNameError\u001b[0m: name 'display' is not defined" |
|
|||
619 | ] |
|
|||
620 | } |
|
|||
621 | ], |
|
|||
622 | "prompt_number": 4 |
|
|||
623 | }, |
|
618 | }, | |
624 | { |
|
619 | { | |
625 | "cell_type": "markdown", |
|
620 | "cell_type": "markdown", | |
@@ -643,19 +638,8 b'' | |||||
643 | ], |
|
638 | ], | |
644 | "language": "python", |
|
639 | "language": "python", | |
645 | "metadata": {}, |
|
640 | "metadata": {}, | |
646 | "outputs": [ |
|
641 | "outputs": [], | |
647 | { |
|
642 | "prompt_number": 23 | |
648 | "ename": "NameError", |
|
|||
649 | "evalue": "name 'display' is not defined", |
|
|||
650 | "output_type": "pyerr", |
|
|||
651 | "traceback": [ |
|
|||
652 | "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m\n\u001b[0;31mNameError\u001b[0m Traceback (most recent call last)", |
|
|||
653 | "\u001b[0;32m<ipython-input-3-bd60a4ccdeb5>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m()\u001b[0m\n\u001b[0;32m----> 1\u001b[0;31m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"a:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m 2\u001b[0m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"aa:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m 3\u001b[0m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"aaa:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m 4\u001b[0m \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwidgets\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextWidget\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdescription\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"aaaaaaaaaaaaaaaaaa:\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n", |
|
|||
654 | "\u001b[0;31mNameError\u001b[0m: name 'display' is not defined" |
|
|||
655 | ] |
|
|||
656 | } |
|
|||
657 | ], |
|
|||
658 | "prompt_number": 3 |
|
|||
659 | }, |
|
643 | }, | |
660 | { |
|
644 | { | |
661 | "cell_type": "markdown", |
|
645 | "cell_type": "markdown", | |
@@ -680,7 +664,7 b'' | |||||
680 | "language": "python", |
|
664 | "language": "python", | |
681 | "metadata": {}, |
|
665 | "metadata": {}, | |
682 | "outputs": [], |
|
666 | "outputs": [], | |
683 |
"prompt_number": |
|
667 | "prompt_number": 24 | |
684 | }, |
|
668 | }, | |
685 | { |
|
669 | { | |
686 | "cell_type": "heading", |
|
670 | "cell_type": "heading", | |
@@ -749,7 +733,7 b'' | |||||
749 | ] |
|
733 | ] | |
750 | } |
|
734 | } | |
751 | ], |
|
735 | ], | |
752 |
"prompt_number": |
|
736 | "prompt_number": 25 | |
753 | }, |
|
737 | }, | |
754 | { |
|
738 | { | |
755 | "cell_type": "code", |
|
739 | "cell_type": "code", | |
@@ -768,7 +752,7 b'' | |||||
768 | "language": "python", |
|
752 | "language": "python", | |
769 | "metadata": {}, |
|
753 | "metadata": {}, | |
770 | "outputs": [], |
|
754 | "outputs": [], | |
771 |
"prompt_number": |
|
755 | "prompt_number": 26 | |
772 | }, |
|
756 | }, | |
773 | { |
|
757 | { | |
774 | "cell_type": "code", |
|
758 | "cell_type": "code", | |
@@ -782,7 +766,7 b'' | |||||
782 | "language": "python", |
|
766 | "language": "python", | |
783 | "metadata": {}, |
|
767 | "metadata": {}, | |
784 | "outputs": [], |
|
768 | "outputs": [], | |
785 |
"prompt_number": 2 |
|
769 | "prompt_number": 27 | |
786 | }, |
|
770 | }, | |
787 | { |
|
771 | { | |
788 | "cell_type": "code", |
|
772 | "cell_type": "code", | |
@@ -796,7 +780,7 b'' | |||||
796 | "language": "python", |
|
780 | "language": "python", | |
797 | "metadata": {}, |
|
781 | "metadata": {}, | |
798 | "outputs": [], |
|
782 | "outputs": [], | |
799 |
"prompt_number": 2 |
|
783 | "prompt_number": 28 | |
800 | }, |
|
784 | }, | |
801 | { |
|
785 | { | |
802 | "cell_type": "heading", |
|
786 | "cell_type": "heading", | |
@@ -814,18 +798,49 b'' | |||||
814 | "cell_type": "markdown", |
|
798 | "cell_type": "markdown", | |
815 | "metadata": {}, |
|
799 | "metadata": {}, | |
816 | "source": [ |
|
800 | "source": [ | |
817 |
"Widgets can be aligned using IPython **alignment classes**. These classes should work with most widgets, but were **designed to be applied to `ContainerWidget`s**. Examples of these classes follow: |
|
801 | "Widgets can be aligned using IPython **alignment classes**. These classes should work with most widgets, but were **designed to be applied to `ContainerWidget`s**. Examples of these classes follow:" | |
818 | "\n", |
|
802 | ] | |
819 | "### Orientation classes\n", |
|
803 | }, | |
820 | "#### \"vbox\"\n", |
|
804 | { | |
|
805 | "cell_type": "heading", | |||
|
806 | "level": 3, | |||
|
807 | "metadata": {}, | |||
|
808 | "source": [ | |||
|
809 | "Orientation classes" | |||
|
810 | ] | |||
|
811 | }, | |||
|
812 | { | |||
|
813 | "cell_type": "heading", | |||
|
814 | "level": 4, | |||
|
815 | "metadata": {}, | |||
|
816 | "source": [ | |||
|
817 | "\"vbox\"" | |||
|
818 | ] | |||
|
819 | }, | |||
|
820 | { | |||
|
821 | "cell_type": "markdown", | |||
|
822 | "metadata": {}, | |||
|
823 | "source": [ | |||
821 | "Widget containers default to this orientation.\n", |
|
824 | "Widget containers default to this orientation.\n", | |
822 | "<div class=\"example-container vbox\">\n", |
|
825 | "<div class=\"example-container vbox\">\n", | |
823 | "<div class=\"example-box\">A</div>\n", |
|
826 | "<div class=\"example-box\">A</div>\n", | |
824 | "<div class=\"example-box med\">B</div>\n", |
|
827 | "<div class=\"example-box med\">B</div>\n", | |
825 | "<div class=\"example-box lrg\">C</div>\n", |
|
828 | "<div class=\"example-box lrg\">C</div>\n", | |
826 |
"</div> |
|
829 | "</div>" | |
827 | "\n", |
|
830 | ] | |
828 | "#### \"hbox\"\n", |
|
831 | }, | |
|
832 | { | |||
|
833 | "cell_type": "heading", | |||
|
834 | "level": 4, | |||
|
835 | "metadata": {}, | |||
|
836 | "source": [ | |||
|
837 | "\"hbox\"" | |||
|
838 | ] | |||
|
839 | }, | |||
|
840 | { | |||
|
841 | "cell_type": "markdown", | |||
|
842 | "metadata": {}, | |||
|
843 | "source": [ | |||
829 | "<div class=\"example-container hbox\">\n", |
|
844 | "<div class=\"example-container hbox\">\n", | |
830 | "<div class=\"example-box\">A</div>\n", |
|
845 | "<div class=\"example-box\">A</div>\n", | |
831 | "<div class=\"example-box med\">B</div>\n", |
|
846 | "<div class=\"example-box med\">B</div>\n", | |
@@ -834,38 +849,67 b'' | |||||
834 | ] |
|
849 | ] | |
835 | }, |
|
850 | }, | |
836 | { |
|
851 | { | |
|
852 | "cell_type": "heading", | |||
|
853 | "level": 3, | |||
|
854 | "metadata": {}, | |||
|
855 | "source": [ | |||
|
856 | "Packing classes" | |||
|
857 | ] | |||
|
858 | }, | |||
|
859 | { | |||
837 | "cell_type": "markdown", |
|
860 | "cell_type": "markdown", | |
838 | "metadata": { |
|
861 | "metadata": {}, | |
839 |
|
|
862 | "source": [ | |
840 | "slide_type": "slide" |
|
863 | "These examples use the **hbox layout** to show packing. Packing is the alignment of the widgets along the the **axis that they are displayed on**." | |
841 |
|
|
864 | ] | |
842 |
|
|
865 | }, | |
|
866 | { | |||
|
867 | "cell_type": "heading", | |||
|
868 | "level": 4, | |||
|
869 | "metadata": {}, | |||
|
870 | "source": [ | |||
|
871 | "\"start\"" | |||
|
872 | ] | |||
|
873 | }, | |||
|
874 | { | |||
|
875 | "cell_type": "markdown", | |||
|
876 | "metadata": {}, | |||
843 | "source": [ |
|
877 | "source": [ | |
844 | "### Packing classes\n", |
|
|||
845 | "These examples use the **hbox layout** to show packing. Packing is the alignment of the widgets along the the **axis that they are displayed on**.\n", |
|
|||
846 | "#### \"start\"\n", |
|
|||
847 | "<div class=\"example-container hbox start\">\n", |
|
878 | "<div class=\"example-container hbox start\">\n", | |
848 | "<div class=\"example-box\">A</div>\n", |
|
879 | "<div class=\"example-box\">A</div>\n", | |
849 | "<div class=\"example-box med\">B</div>\n", |
|
880 | "<div class=\"example-box med\">B</div>\n", | |
850 | "<div class=\"example-box lrg\">C</div>\n", |
|
881 | "<div class=\"example-box lrg\">C</div>\n", | |
851 |
"</div> |
|
882 | "</div>" | |
852 | "\n", |
|
883 | ] | |
853 | "#### \"center\"\n", |
|
884 | }, | |
|
885 | { | |||
|
886 | "cell_type": "heading", | |||
|
887 | "level": 4, | |||
|
888 | "metadata": {}, | |||
|
889 | "source": [ | |||
|
890 | "\"center\"" | |||
|
891 | ] | |||
|
892 | }, | |||
|
893 | { | |||
|
894 | "cell_type": "markdown", | |||
|
895 | "metadata": {}, | |||
|
896 | "source": [ | |||
854 | "<div class=\"example-container hbox center\">\n", |
|
897 | "<div class=\"example-container hbox center\">\n", | |
855 | "<div class=\"example-box\">A</div>\n", |
|
898 | "<div class=\"example-box\">A</div>\n", | |
856 | "<div class=\"example-box med\">B</div>\n", |
|
899 | "<div class=\"example-box med\">B</div>\n", | |
857 | "<div class=\"example-box lrg\">C</div>\n", |
|
900 | "<div class=\"example-box lrg\">C</div>\n", | |
858 | "</div>\n", |
|
|||
859 | "\n", |
|
|||
860 | "#### \"end\"\n", |
|
|||
861 | "<div class=\"example-container hbox end\">\n", |
|
|||
862 | "<div class=\"example-box\">A</div>\n", |
|
|||
863 | "<div class=\"example-box med\">B</div>\n", |
|
|||
864 | "<div class=\"example-box lrg\">C</div>\n", |
|
|||
865 | "</div>" |
|
901 | "</div>" | |
866 | ] |
|
902 | ] | |
867 | }, |
|
903 | }, | |
868 | { |
|
904 | { | |
|
905 | "cell_type": "heading", | |||
|
906 | "level": 4, | |||
|
907 | "metadata": {}, | |||
|
908 | "source": [ | |||
|
909 | "\"end\"" | |||
|
910 | ] | |||
|
911 | }, | |||
|
912 | { | |||
869 | "cell_type": "markdown", |
|
913 | "cell_type": "markdown", | |
870 | "metadata": { |
|
914 | "metadata": { | |
871 | "slideshow": { |
|
915 | "slideshow": { | |
@@ -873,24 +917,60 b'' | |||||
873 | } |
|
917 | } | |
874 | }, |
|
918 | }, | |
875 | "source": [ |
|
919 | "source": [ | |
876 | "### Aligning classes\n", |
|
920 | "<div class=\"example-container hbox end\">\n", | |
877 | "These examples use the **hbox layout** to show alignment. Packing is the alignment of the widgets along the the **axis perpendicular to the one that they are displayed on**.\n", |
|
|||
878 | "#### \"align-start\"\n", |
|
|||
879 | "<div class=\"example-container hbox align-start\">\n", |
|
|||
880 | "<div class=\"example-box\">A</div>\n", |
|
921 | "<div class=\"example-box\">A</div>\n", | |
881 | "<div class=\"example-box med\">B</div>\n", |
|
922 | "<div class=\"example-box med\">B</div>\n", | |
882 | "<div class=\"example-box lrg\">C</div>\n", |
|
923 | "<div class=\"example-box lrg\">C</div>\n", | |
883 |
"</div> |
|
924 | "</div>" | |
884 | "\n", |
|
925 | ] | |
885 | "#### \"align-center\"\n", |
|
926 | }, | |
886 | "<div class=\"example-container hbox align-center\">\n", |
|
927 | { | |
|
928 | "cell_type": "heading", | |||
|
929 | "level": 3, | |||
|
930 | "metadata": {}, | |||
|
931 | "source": [ | |||
|
932 | "Aligning classes" | |||
|
933 | ] | |||
|
934 | }, | |||
|
935 | { | |||
|
936 | "cell_type": "markdown", | |||
|
937 | "metadata": {}, | |||
|
938 | "source": [ | |||
|
939 | "These examples use the **hbox layout** to show alignment. Packing is the alignment of the widgets along the the **axis perpendicular to the one that they are displayed on**." | |||
|
940 | ] | |||
|
941 | }, | |||
|
942 | { | |||
|
943 | "cell_type": "heading", | |||
|
944 | "level": 4, | |||
|
945 | "metadata": {}, | |||
|
946 | "source": [ | |||
|
947 | "\"align-start\"" | |||
|
948 | ] | |||
|
949 | }, | |||
|
950 | { | |||
|
951 | "cell_type": "markdown", | |||
|
952 | "metadata": {}, | |||
|
953 | "source": [ | |||
|
954 | "<div class=\"example-container hbox align-start\">\n", | |||
887 | "<div class=\"example-box\">A</div>\n", |
|
955 | "<div class=\"example-box\">A</div>\n", | |
888 | "<div class=\"example-box med\">B</div>\n", |
|
956 | "<div class=\"example-box med\">B</div>\n", | |
889 | "<div class=\"example-box lrg\">C</div>\n", |
|
957 | "<div class=\"example-box lrg\">C</div>\n", | |
890 |
"</div> |
|
958 | "</div>" | |
891 | "\n", |
|
959 | ] | |
892 | "#### \"align-end\"\n", |
|
960 | }, | |
893 | "<div class=\"example-container hbox align-end\">\n", |
|
961 | { | |
|
962 | "cell_type": "heading", | |||
|
963 | "level": 4, | |||
|
964 | "metadata": {}, | |||
|
965 | "source": [ | |||
|
966 | "\"align-center\"" | |||
|
967 | ] | |||
|
968 | }, | |||
|
969 | { | |||
|
970 | "cell_type": "markdown", | |||
|
971 | "metadata": {}, | |||
|
972 | "source": [ | |||
|
973 | "<div class=\"example-container hbox align-center\">\n", | |||
894 | "<div class=\"example-box\">A</div>\n", |
|
974 | "<div class=\"example-box\">A</div>\n", | |
895 | "<div class=\"example-box med\">B</div>\n", |
|
975 | "<div class=\"example-box med\">B</div>\n", | |
896 | "<div class=\"example-box lrg\">C</div>\n", |
|
976 | "<div class=\"example-box lrg\">C</div>\n", | |
@@ -898,6 +978,14 b'' | |||||
898 | ] |
|
978 | ] | |
899 | }, |
|
979 | }, | |
900 | { |
|
980 | { | |
|
981 | "cell_type": "heading", | |||
|
982 | "level": 4, | |||
|
983 | "metadata": {}, | |||
|
984 | "source": [ | |||
|
985 | "\"align-end\"" | |||
|
986 | ] | |||
|
987 | }, | |||
|
988 | { | |||
901 | "cell_type": "markdown", |
|
989 | "cell_type": "markdown", | |
902 | "metadata": { |
|
990 | "metadata": { | |
903 | "slideshow": { |
|
991 | "slideshow": { | |
@@ -905,45 +993,139 b'' | |||||
905 | } |
|
993 | } | |
906 | }, |
|
994 | }, | |
907 | "source": [ |
|
995 | "source": [ | |
908 | "### Flex classes\n", |
|
996 | "<div class=\"example-container hbox align-end\">\n", | |
909 | "To specify **how \"greedy\" a container is** when filling in the remaining space of its parent, the **`box-flexN`** classes are used (where N is 0, 1, or 2). The **higher the value of N, the more greedy** the child is. **`box-flex0` is the default behavior**, which is to not fill the parent.\n", |
|
997 | "<div class=\"example-box\">A</div>\n", | |
910 | "\n", |
|
998 | "<div class=\"example-box med\">B</div>\n", | |
911 | "#### Example 1\n", |
|
999 | "<div class=\"example-box lrg\">C</div>\n", | |
|
1000 | "</div>" | |||
|
1001 | ] | |||
|
1002 | }, | |||
|
1003 | { | |||
|
1004 | "cell_type": "heading", | |||
|
1005 | "level": 3, | |||
|
1006 | "metadata": {}, | |||
|
1007 | "source": [ | |||
|
1008 | "Flex classes" | |||
|
1009 | ] | |||
|
1010 | }, | |||
|
1011 | { | |||
|
1012 | "cell_type": "markdown", | |||
|
1013 | "metadata": {}, | |||
|
1014 | "source": [ | |||
|
1015 | "To specify **how \"greedy\" a container is** when filling in the remaining space of its parent, the **`box-flexN`** classes are used (where N is 0, 1, or 2). The **higher the value of N, the more greedy** the child is. **`box-flex0` is the default behavior**, which is to not fill the parent." | |||
|
1016 | ] | |||
|
1017 | }, | |||
|
1018 | { | |||
|
1019 | "cell_type": "heading", | |||
|
1020 | "level": 4, | |||
|
1021 | "metadata": {}, | |||
|
1022 | "source": [ | |||
|
1023 | "Example 1" | |||
|
1024 | ] | |||
|
1025 | }, | |||
|
1026 | { | |||
|
1027 | "cell_type": "markdown", | |||
|
1028 | "metadata": {}, | |||
|
1029 | "source": [ | |||
912 | "<div class=\"example-container sm hbox center\">\n", |
|
1030 | "<div class=\"example-container sm hbox center\">\n", | |
913 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", |
|
1031 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", | |
914 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", |
|
1032 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", | |
915 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", |
|
1033 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", | |
916 |
"</div> |
|
1034 | "</div>" | |
917 | "\n", |
|
1035 | ] | |
918 | "#### Example 2\n", |
|
1036 | }, | |
|
1037 | { | |||
|
1038 | "cell_type": "heading", | |||
|
1039 | "level": 4, | |||
|
1040 | "metadata": {}, | |||
|
1041 | "source": [ | |||
|
1042 | "Example 2" | |||
|
1043 | ] | |||
|
1044 | }, | |||
|
1045 | { | |||
|
1046 | "cell_type": "markdown", | |||
|
1047 | "metadata": {}, | |||
|
1048 | "source": [ | |||
919 | "<div class=\"example-container sm hbox center\">\n", |
|
1049 | "<div class=\"example-container sm hbox center\">\n", | |
920 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", |
|
1050 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", | |
921 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", |
|
1051 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", | |
922 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", |
|
1052 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", | |
923 |
"</div> |
|
1053 | "</div>" | |
924 | "\n", |
|
1054 | ] | |
925 | "#### Example 3\n", |
|
1055 | }, | |
|
1056 | { | |||
|
1057 | "cell_type": "heading", | |||
|
1058 | "level": 4, | |||
|
1059 | "metadata": {}, | |||
|
1060 | "source": [ | |||
|
1061 | "Example 3" | |||
|
1062 | ] | |||
|
1063 | }, | |||
|
1064 | { | |||
|
1065 | "cell_type": "markdown", | |||
|
1066 | "metadata": {}, | |||
|
1067 | "source": [ | |||
926 | "<div class=\"example-container sm hbox center\">\n", |
|
1068 | "<div class=\"example-container sm hbox center\">\n", | |
927 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", |
|
1069 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", | |
928 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", |
|
1070 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", | |
929 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", |
|
1071 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", | |
930 |
"</div> |
|
1072 | "</div>" | |
931 | "\n", |
|
1073 | ] | |
932 | "#### Example 4\n", |
|
1074 | }, | |
|
1075 | { | |||
|
1076 | "cell_type": "heading", | |||
|
1077 | "level": 4, | |||
|
1078 | "metadata": {}, | |||
|
1079 | "source": [ | |||
|
1080 | "Example 4" | |||
|
1081 | ] | |||
|
1082 | }, | |||
|
1083 | { | |||
|
1084 | "cell_type": "markdown", | |||
|
1085 | "metadata": {}, | |||
|
1086 | "source": [ | |||
933 | "<div class=\"example-container sm hbox center\">\n", |
|
1087 | "<div class=\"example-container sm hbox center\">\n", | |
934 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", |
|
1088 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", | |
935 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", |
|
1089 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", | |
936 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", |
|
1090 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", | |
937 |
"</div> |
|
1091 | "</div>" | |
938 | "\n", |
|
1092 | ] | |
939 | "#### Example 5\n", |
|
1093 | }, | |
|
1094 | { | |||
|
1095 | "cell_type": "heading", | |||
|
1096 | "level": 4, | |||
|
1097 | "metadata": {}, | |||
|
1098 | "source": [ | |||
|
1099 | "Example 5" | |||
|
1100 | ] | |||
|
1101 | }, | |||
|
1102 | { | |||
|
1103 | "cell_type": "markdown", | |||
|
1104 | "metadata": {}, | |||
|
1105 | "source": [ | |||
940 | "<div class=\"example-container sm hbox center\">\n", |
|
1106 | "<div class=\"example-container sm hbox center\">\n", | |
941 | "<div class=\"example-box box-flex2\">box-flex2</div>\n", |
|
1107 | "<div class=\"example-box box-flex2\">box-flex2</div>\n", | |
942 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", |
|
1108 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", | |
943 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", |
|
1109 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", | |
944 |
"</div> |
|
1110 | "</div>" | |
945 | "\n", |
|
1111 | ] | |
946 | "#### Example 6\n", |
|
1112 | }, | |
|
1113 | { | |||
|
1114 | "cell_type": "heading", | |||
|
1115 | "level": 4, | |||
|
1116 | "metadata": {}, | |||
|
1117 | "source": [ | |||
|
1118 | "Example 6" | |||
|
1119 | ] | |||
|
1120 | }, | |||
|
1121 | { | |||
|
1122 | "cell_type": "markdown", | |||
|
1123 | "metadata": { | |||
|
1124 | "slideshow": { | |||
|
1125 | "slide_type": "slide" | |||
|
1126 | } | |||
|
1127 | }, | |||
|
1128 | "source": [ | |||
947 | "<div class=\"example-container sm hbox center\">\n", |
|
1129 | "<div class=\"example-container sm hbox center\">\n", | |
948 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", |
|
1130 | "<div class=\"example-box box-flex0\">box-flex0</div>\n", | |
949 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", |
|
1131 | "<div class=\"example-box box-flex1\">box-flex1</div>\n", | |
@@ -982,7 +1164,7 b'' | |||||
982 | "language": "python", |
|
1164 | "language": "python", | |
983 | "metadata": {}, |
|
1165 | "metadata": {}, | |
984 | "outputs": [], |
|
1166 | "outputs": [], | |
985 |
"prompt_number": 2 |
|
1167 | "prompt_number": 29 | |
986 | }, |
|
1168 | }, | |
987 | { |
|
1169 | { | |
988 | "cell_type": "heading", |
|
1170 | "cell_type": "heading", | |
@@ -1015,7 +1197,7 b'' | |||||
1015 | "language": "python", |
|
1197 | "language": "python", | |
1016 | "metadata": {}, |
|
1198 | "metadata": {}, | |
1017 | "outputs": [], |
|
1199 | "outputs": [], | |
1018 |
"prompt_number": |
|
1200 | "prompt_number": 30 | |
1019 | }, |
|
1201 | }, | |
1020 | { |
|
1202 | { | |
1021 | "cell_type": "markdown", |
|
1203 | "cell_type": "markdown", | |
@@ -1034,7 +1216,7 b'' | |||||
1034 | "language": "python", |
|
1216 | "language": "python", | |
1035 | "metadata": {}, |
|
1217 | "metadata": {}, | |
1036 | "outputs": [], |
|
1218 | "outputs": [], | |
1037 |
"prompt_number": |
|
1219 | "prompt_number": 31 | |
1038 | }, |
|
1220 | }, | |
1039 | { |
|
1221 | { | |
1040 | "cell_type": "heading", |
|
1222 | "cell_type": "heading", | |
@@ -1091,7 +1273,7 b'' | |||||
1091 | "language": "python", |
|
1273 | "language": "python", | |
1092 | "metadata": {}, |
|
1274 | "metadata": {}, | |
1093 | "outputs": [], |
|
1275 | "outputs": [], | |
1094 |
"prompt_number": 2 |
|
1276 | "prompt_number": 32 | |
1095 | }, |
|
1277 | }, | |
1096 | { |
|
1278 | { | |
1097 | "cell_type": "heading", |
|
1279 | "cell_type": "heading", | |
@@ -1125,7 +1307,7 b'' | |||||
1125 | "language": "python", |
|
1307 | "language": "python", | |
1126 | "metadata": {}, |
|
1308 | "metadata": {}, | |
1127 | "outputs": [], |
|
1309 | "outputs": [], | |
1128 |
"prompt_number": |
|
1310 | "prompt_number": 33 | |
1129 | }, |
|
1311 | }, | |
1130 | { |
|
1312 | { | |
1131 | "cell_type": "heading", |
|
1313 | "cell_type": "heading", | |
@@ -1144,27 +1326,27 b'' | |||||
1144 | "collapsed": false, |
|
1326 | "collapsed": false, | |
1145 | "input": [ |
|
1327 | "input": [ | |
1146 | "classes = [\n", |
|
1328 | "classes = [\n", | |
1147 | " 'progress-info', \n", |
|
1329 | " 'progress-bar-info', \n", | |
1148 | " 'progress-success', \n", |
|
1330 | " 'progress-bar-success', \n", | |
1149 | " 'progress-warning', \n", |
|
1331 | " 'progress-bar-warning', \n", | |
1150 | " 'progress-danger',\n", |
|
1332 | " 'progress-bar-danger',\n", | |
1151 |
" 'progress- |
|
1333 | " 'progress-bar-info progress-striped', \n", | |
1152 |
" 'progress- |
|
1334 | " 'progress-bar-success progress-striped', \n", | |
1153 |
" 'progress- |
|
1335 | " 'progress-bar-warning progress-striped', \n", | |
1154 |
" 'progress- |
|
1336 | " 'progress-bar-danger progress-striped',\n", | |
1155 |
" 'active progress- |
|
1337 | " 'active progress-bar-info progress-striped', \n", | |
1156 |
" 'active progress- |
|
1338 | " 'active progress-bar-success progress-striped', \n", | |
1157 |
" 'active progress- |
|
1339 | " 'active progress-bar-warning progress-striped', \n", | |
1158 |
" 'active progress- |
|
1340 | " 'active progress-bar-danger progress-striped',\n", | |
1159 | "]\n", |
|
1341 | "]\n", | |
1160 | "ws = [widgets.IntProgressWidget(value=50, description=c) for c in classes]\n", |
|
1342 | "ws = [widgets.IntProgressWidget(value=50, description=c) for c in classes]\n", | |
1161 | "ret = [display(w) for w in ws]\n", |
|
1343 | "ret = [display(w) for w in ws]\n", | |
1162 | "ret = [ws[i].add_class(c) for i, c in enumerate(classes)]" |
|
1344 | "ret = [ws[i].add_class(c, selector=\"\" if c == \"progress-striped\" or c == \"active\" else \".progress-bar\") for i, cs in enumerate(classes) for c in cs.split(' ')]" | |
1163 | ], |
|
1345 | ], | |
1164 | "language": "python", |
|
1346 | "language": "python", | |
1165 | "metadata": {}, |
|
1347 | "metadata": {}, | |
1166 | "outputs": [], |
|
1348 | "outputs": [], | |
1167 |
"prompt_number": |
|
1349 | "prompt_number": 48 | |
1168 | }, |
|
1350 | }, | |
1169 | { |
|
1351 | { | |
1170 | "cell_type": "heading", |
|
1352 | "cell_type": "heading", | |
@@ -1196,7 +1378,7 b'' | |||||
1196 | "language": "python", |
|
1378 | "language": "python", | |
1197 | "metadata": {}, |
|
1379 | "metadata": {}, | |
1198 | "outputs": [], |
|
1380 | "outputs": [], | |
1199 |
"prompt_number": |
|
1381 | "prompt_number": 49 | |
1200 | }, |
|
1382 | }, | |
1201 | { |
|
1383 | { | |
1202 | "cell_type": "code", |
|
1384 | "cell_type": "code", | |
@@ -1207,7 +1389,7 b'' | |||||
1207 | "language": "python", |
|
1389 | "language": "python", | |
1208 | "metadata": {}, |
|
1390 | "metadata": {}, | |
1209 | "outputs": [], |
|
1391 | "outputs": [], | |
1210 |
"prompt_number": |
|
1392 | "prompt_number": 50 | |
1211 | }, |
|
1393 | }, | |
1212 | { |
|
1394 | { | |
1213 | "cell_type": "code", |
|
1395 | "cell_type": "code", | |
@@ -1218,7 +1400,7 b'' | |||||
1218 | "language": "python", |
|
1400 | "language": "python", | |
1219 | "metadata": {}, |
|
1401 | "metadata": {}, | |
1220 | "outputs": [], |
|
1402 | "outputs": [], | |
1221 |
"prompt_number": |
|
1403 | "prompt_number": 51 | |
1222 | }, |
|
1404 | }, | |
1223 | { |
|
1405 | { | |
1224 | "cell_type": "heading", |
|
1406 | "cell_type": "heading", | |
@@ -1267,7 +1449,7 b'' | |||||
1267 | "language": "python", |
|
1449 | "language": "python", | |
1268 | "metadata": {}, |
|
1450 | "metadata": {}, | |
1269 | "outputs": [], |
|
1451 | "outputs": [], | |
1270 |
"prompt_number": |
|
1452 | "prompt_number": 52 | |
1271 | }, |
|
1453 | }, | |
1272 | { |
|
1454 | { | |
1273 | "cell_type": "markdown", |
|
1455 | "cell_type": "markdown", |
@@ -1,7 +1,7 b'' | |||||
1 | { |
|
1 | { | |
2 | "metadata": { |
|
2 | "metadata": { | |
3 | "name": "", |
|
3 | "name": "", | |
4 | "signature": "sha256:9888adccfb9af4c96f19c546d32e6177a811d297c52a97c23a84e67b355cbff0" |
|
4 | "signature": "sha256:1a6a6a01ea6dbb9b101174c11ba522cb145e4a070685a43a71b5ccdb75672909" | |
5 | }, |
|
5 | }, | |
6 | "nbformat": 3, |
|
6 | "nbformat": 3, | |
7 | "nbformat_minor": 0, |
|
7 | "nbformat_minor": 0, | |
@@ -246,31 +246,6 b'' | |||||
246 | "4. Cell editing: `x`, `c`, `v`, `d`, `z`, `shift+=`\n", |
|
246 | "4. Cell editing: `x`, `c`, `v`, `d`, `z`, `shift+=`\n", | |
247 | "5. Kernel operations: `i`, `.`" |
|
247 | "5. Kernel operations: `i`, `.`" | |
248 | ] |
|
248 | ] | |
249 | }, |
|
|||
250 | { |
|
|||
251 | "cell_type": "heading", |
|
|||
252 | "level": 2, |
|
|||
253 | "metadata": {}, |
|
|||
254 | "source": [ |
|
|||
255 | "Cell types" |
|
|||
256 | ] |
|
|||
257 | }, |
|
|||
258 | { |
|
|||
259 | "cell_type": "markdown", |
|
|||
260 | "metadata": {}, |
|
|||
261 | "source": [ |
|
|||
262 | "The notebook UI and notebook documents are a linear sequence of cells. There are four cell types:\n", |
|
|||
263 | "\n", |
|
|||
264 | "* **Code cells:** Input and output of live code that is run in the kernel\n", |
|
|||
265 | "* **Markdown cells:** Narrative text with embedded LaTeX equations\n", |
|
|||
266 | "* **Heading cells:** 6 levels of hierarchical organization and formatting\n", |
|
|||
267 | "* **Raw cells:** Unformatted text that is included, without modification, when notebooks are converted to different formats using nbconvert\n", |
|
|||
268 | "\n", |
|
|||
269 | "More information about running code and Markdown cells can be found in these tutorials:\n", |
|
|||
270 | "\n", |
|
|||
271 | "* [Running Code](Running Code.ipynb)\n", |
|
|||
272 | "* [Working With Markdown Cells](Working With Markdown Cells.ipynb)" |
|
|||
273 | ] |
|
|||
274 | } |
|
249 | } | |
275 | ], |
|
250 | ], | |
276 | "metadata": {} |
|
251 | "metadata": {} |
@@ -1,7 +1,8 b'' | |||||
1 | { |
|
1 | { | |
2 | "metadata": { |
|
2 | "metadata": { | |
|
3 | "celltoolbar": "Slideshow", | |||
3 | "name": "", |
|
4 | "name": "", | |
4 | "signature": "sha256:1fd1c67d342de34c5edf43789ce56f80963eda3662752e7d9cbc97ac54848be8" |
|
5 | "signature": "sha256:ad9cb95b14212dbf9fc8ecafa475d0e368e4cb7c7306b89628b500e7e40068b6" | |
5 | }, |
|
6 | }, | |
6 | "nbformat": 3, |
|
7 | "nbformat": 3, | |
7 | "nbformat_minor": 0, |
|
8 | "nbformat_minor": 0, | |
@@ -11,7 +12,11 b'' | |||||
11 | { |
|
12 | { | |
12 | "cell_type": "heading", |
|
13 | "cell_type": "heading", | |
13 | "level": 1, |
|
14 | "level": 1, | |
14 |
"metadata": { |
|
15 | "metadata": { | |
|
16 | "slideshow": { | |||
|
17 | "slide_type": "slide" | |||
|
18 | } | |||
|
19 | }, | |||
15 | "source": [ |
|
20 | "source": [ | |
16 | "What is the IPython Notebook?" |
|
21 | "What is the IPython Notebook?" | |
17 | ] |
|
22 | ] | |
@@ -28,10 +33,34 b'' | |||||
28 | "cell_type": "markdown", |
|
33 | "cell_type": "markdown", | |
29 | "metadata": {}, |
|
34 | "metadata": {}, | |
30 | "source": [ |
|
35 | "source": [ | |
31 | "The IPython Notebook is an interactive computing environment that enables users to author notebook documents that include live code, interactive widgets, plots, narrative text, equations, images and video. These documents provide a complete and self-contained record of a computation that can be converted to various formats and shared with others using email, [Dropbox](http://dropbox.com), version control systems (like git/[GitHub](http://github.com)) or [nbviewer.ipython.org](http://nbviewer.ipython.org).\n", |
|
36 | "The IPython Notebook is an **interactive computing environment** that enables users to author notebook documents that include: \n", | |
32 | "\n", |
|
37 | "- Live code\n", | |
33 | "Through IPython's kernel and messaging architecture, the Notebook allows code to be run in a range of different programming languages, including Python, R, Julia, Ruby and many others.\n", |
|
38 | "- Interactive widgets\n", | |
|
39 | "- Plots\n", | |||
|
40 | "- Narrative text\n", | |||
|
41 | "- Equations\n", | |||
|
42 | "- Images\n", | |||
|
43 | "- Video\n", | |||
34 | "\n", |
|
44 | "\n", | |
|
45 | "These documents provide a **complete and self-contained record of a computation** that can be converted to various formats and shared with others using email, [Dropbox](http://dropbox.com), version control systems (like git/[GitHub](http://github.com)) or [nbviewer.ipython.org](http://nbviewer.ipython.org)." | |||
|
46 | ] | |||
|
47 | }, | |||
|
48 | { | |||
|
49 | "cell_type": "heading", | |||
|
50 | "level": 3, | |||
|
51 | "metadata": { | |||
|
52 | "slideshow": { | |||
|
53 | "slide_type": "slide" | |||
|
54 | } | |||
|
55 | }, | |||
|
56 | "source": [ | |||
|
57 | "Components" | |||
|
58 | ] | |||
|
59 | }, | |||
|
60 | { | |||
|
61 | "cell_type": "markdown", | |||
|
62 | "metadata": {}, | |||
|
63 | "source": [ | |||
35 | "The IPython Notebook combines three components:\n", |
|
64 | "The IPython Notebook combines three components:\n", | |
36 | "\n", |
|
65 | "\n", | |
37 | "* **The notebook web application**: An interactive web application for writing and running code interactively and authoring notebook documents.\n", |
|
66 | "* **The notebook web application**: An interactive web application for writing and running code interactively and authoring notebook documents.\n", | |
@@ -43,7 +72,11 b'' | |||||
43 | { |
|
72 | { | |
44 | "cell_type": "heading", |
|
73 | "cell_type": "heading", | |
45 | "level": 2, |
|
74 | "level": 2, | |
46 |
"metadata": { |
|
75 | "metadata": { | |
|
76 | "slideshow": { | |||
|
77 | "slide_type": "slide" | |||
|
78 | } | |||
|
79 | }, | |||
47 | "source": [ |
|
80 | "source": [ | |
48 | "Notebook web application" |
|
81 | "Notebook web application" | |
49 | ] |
|
82 | ] | |
@@ -54,20 +87,24 b'' | |||||
54 | "source": [ |
|
87 | "source": [ | |
55 | "The notebook web application enables users to:\n", |
|
88 | "The notebook web application enables users to:\n", | |
56 | "\n", |
|
89 | "\n", | |
57 | "* Edit code in the browser, with automatic syntax highlighting, indentation, and tab completion/introspection.\n", |
|
90 | "* **Edit code in the browser**, with automatic syntax highlighting, indentation, and tab completion/introspection.\n", | |
58 | "* Run code from the browser, with the results of computations attached to the code which generated them.\n", |
|
91 | "* **Run code from the browser**, with the results of computations attached to the code which generated them.\n", | |
59 | "* See the results of computations with rich media representations, such as HTML, LaTeX, PNG, SVG, PDF, etc.\n", |
|
92 | "* See the results of computations with **rich media representations**, such as HTML, LaTeX, PNG, SVG, PDF, etc.\n", | |
60 | "* Create and use interactive JavaScript wigets, which bind interactive user interface controls and visualizations to reactive kernel side computations.\n", |
|
93 | "* Create and use **interactive JavaScript wigets**, which bind interactive user interface controls and visualizations to reactive kernel side computations.\n", | |
61 | "* Author narrative text using the [Markdown](https://daringfireball.net/projects/markdown/) markup language.\n", |
|
94 | "* Author **narrative text** using the [Markdown](https://daringfireball.net/projects/markdown/) markup language.\n", | |
62 | "* Build hierarchical documents that are organized into sections with different levels of headings.\n", |
|
95 | "* Build **hierarchical documents** that are organized into sections with different levels of headings.\n", | |
63 | "* Include mathematical equations using LaTeX syntax in Markdown, which are rendered in-browser by [MathJax](http://www.mathjax.org/).\n", |
|
96 | "* Include mathematical equations using **LaTeX syntax in Markdown**, which are rendered in-browser by [MathJax](http://www.mathjax.org/).\n", | |
64 | "* Start parallel computing clusters that work with IPython's interactive parallel computing libraries `IPython.parallel`." |
|
97 | "* Start **parallel computing** clusters that work with IPython's interactive parallel computing libraries `IPython.parallel`." | |
65 | ] |
|
98 | ] | |
66 | }, |
|
99 | }, | |
67 | { |
|
100 | { | |
68 | "cell_type": "heading", |
|
101 | "cell_type": "heading", | |
69 | "level": 2, |
|
102 | "level": 2, | |
70 |
"metadata": { |
|
103 | "metadata": { | |
|
104 | "slideshow": { | |||
|
105 | "slide_type": "slide" | |||
|
106 | } | |||
|
107 | }, | |||
71 | "source": [ |
|
108 | "source": [ | |
72 | "Kernels" |
|
109 | "Kernels" | |
73 | ] |
|
110 | ] | |
@@ -76,7 +113,7 b'' | |||||
76 | "cell_type": "markdown", |
|
113 | "cell_type": "markdown", | |
77 | "metadata": {}, |
|
114 | "metadata": {}, | |
78 | "source": [ |
|
115 | "source": [ | |
79 | "For each notebook document that a user opens, the web application starts a kernel that runs the code for that notebook. Each kernel is capable of running code in a single programming language and there are kernels available in the following languages:\n", |
|
116 | "Through IPython's kernel and messaging architecture, the Notebook allows code to be run in a range of different programming languages. For each notebook document that a user opens, the web application starts a kernel that runs the code for that notebook. Each kernel is capable of running code in a single programming language and there are kernels available in the following languages:\n", | |
80 | "\n", |
|
117 | "\n", | |
81 | "* Python(https://github.com/ipython/ipython)\n", |
|
118 | "* Python(https://github.com/ipython/ipython)\n", | |
82 | "* Julia (https://github.com/JuliaLang/IJulia.jl)\n", |
|
119 | "* Julia (https://github.com/JuliaLang/IJulia.jl)\n", | |
@@ -95,7 +132,11 b'' | |||||
95 | { |
|
132 | { | |
96 | "cell_type": "heading", |
|
133 | "cell_type": "heading", | |
97 | "level": 2, |
|
134 | "level": 2, | |
98 |
"metadata": { |
|
135 | "metadata": { | |
|
136 | "slideshow": { | |||
|
137 | "slide_type": "slide" | |||
|
138 | } | |||
|
139 | }, | |||
99 | "source": [ |
|
140 | "source": [ | |
100 | "Notebook documents" |
|
141 | "Notebook documents" | |
101 | ] |
|
142 | ] | |
@@ -104,22 +145,32 b'' | |||||
104 | "cell_type": "markdown", |
|
145 | "cell_type": "markdown", | |
105 | "metadata": {}, |
|
146 | "metadata": {}, | |
106 | "source": [ |
|
147 | "source": [ | |
107 |
"Notebook documents contain the inputs and outputs of an interactive session as well as narrative text that accompanies the code but is not meant for execution. Rich output generated by running code, including HTML, images, video, and plots, is embeddeed in the notebook, which makes it a complete and self-contained record of a computation. |
|
148 | "Notebook documents contain the **inputs and outputs** of an interactive session as well as **narrative text** that accompanies the code but is not meant for execution. **Rich output** generated by running code, including HTML, images, video, and plots, is embeddeed in the notebook, which makes it a complete and self-contained record of a computation. " | |
108 | "\n", |
|
149 | ] | |
109 | "When you run the notebook web application on your computer, notebook documents are just files on your local filesystem with a `.ipynb` extension. This allows you to use familiar workflows for organizing your notebooks into folders and sharing them with others using email, Dropbox and version control systems.\n", |
|
150 | }, | |
110 | "\n", |
|
151 | { | |
111 | "Notebooks consist of a linear sequence of cells. There are four basic cell types:\n", |
|
152 | "cell_type": "markdown", | |
|
153 | "metadata": {}, | |||
|
154 | "source": [ | |||
|
155 | "When you run the notebook web application on your computer, notebook documents are just **files on your local filesystem with a `.ipynb` extension**. This allows you to use familiar workflows for organizing your notebooks into folders and sharing them with others using email, Dropbox and version control systems." | |||
|
156 | ] | |||
|
157 | }, | |||
|
158 | { | |||
|
159 | "cell_type": "markdown", | |||
|
160 | "metadata": {}, | |||
|
161 | "source": [ | |||
|
162 | "Notebooks consist of a **linear sequence of cells**. There are four basic cell types:\n", | |||
112 | "\n", |
|
163 | "\n", | |
113 | "* **Code cells:** Input and output of live code that is run in the kernel\n", |
|
164 | "* **Code cells:** Input and output of live code that is run in the kernel\n", | |
114 | "* **Markdown cells:** Narrative text with embedded LaTeX equations\n", |
|
165 | "* **Markdown cells:** Narrative text with embedded LaTeX equations\n", | |
115 | "* **Heading cells:** 6 levels of hierarchical organization and formatting\n", |
|
166 | "* **Heading cells:** 6 levels of hierarchical organization and formatting\n", | |
116 | "* **Raw cells:** Unformatted text that is included, without modification, when notebooks are converted to different formats using nbconvert\n", |
|
167 | "* **Raw cells:** Unformatted text that is included, without modification, when notebooks are converted to different formats using nbconvert\n", | |
117 | "\n", |
|
168 | "\n", | |
118 | "Internally, notebook documents are [JSON](http://en.wikipedia.org/wiki/JSO) data with binary values [base64](http://en.wikipedia.org/wiki/Base64) encoded. This allows them to be read and manipulated programmatically by any programming language. Because JSON is a text format, notebook documents are version control friendly.\n", |
|
169 | "Internally, notebook documents are **[JSON](http://en.wikipedia.org/wiki/JSO) data** with **binary values [base64]**(http://en.wikipedia.org/wiki/Base64) encoded. This allows them to be **read and manipulated programmatically** by any programming language. Because JSON is a text format, notebook documents are version control friendly.\n", | |
119 | "\n", |
|
170 | "\n", | |
120 | "Notebooks can be exported to different static formats including HTML, reStructeredText, LaTeX, PDF, and slide shows ([reveal.js](http://lab.hakim.se/reveal-js/#/)) using IPython's `nbconvert` utility.\n", |
|
171 | "**Notebooks can be exported** to different static formats including HTML, reStructeredText, LaTeX, PDF, and slide shows ([reveal.js](http://lab.hakim.se/reveal-js/#/)) using IPython's `nbconvert` utility.\n", | |
121 | "\n", |
|
172 | "\n", | |
122 | "Furthermore, any notebook document available from a public URL on or GitHub can be shared via http://nbviewer.ipython.org. This service loads the notebook document from the URL and renders it as a static web page. The resulting web page may thus be shared with others without their needing to install IPython." |
|
173 | "Furthermore, any notebook document available from a **public URL on or GitHub can be shared** via http://nbviewer.ipython.org. This service loads the notebook document from the URL and renders it as a static web page. The resulting web page may thus be shared with others **without their needing to install IPython**." | |
123 | ] |
|
174 | ] | |
124 | } |
|
175 | } | |
125 | ], |
|
176 | ], |
General Comments 0
You need to be logged in to leave comments.
Login now