Show More
@@ -1,775 +1,774 b'' | |||||
1 | { |
|
1 | { | |
2 | "cells": [ |
|
2 | "cells": [ | |
3 | { |
|
3 | { | |
4 | "cell_type": "markdown", |
|
4 | "cell_type": "markdown", | |
5 | "metadata": {}, |
|
5 | "metadata": {}, | |
6 | "source": [ |
|
6 | "source": [ | |
7 | "[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)" |
|
7 | "[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)" | |
8 | ] |
|
8 | ] | |
9 | }, |
|
9 | }, | |
10 | { |
|
10 | { | |
11 | "cell_type": "code", |
|
11 | "cell_type": "code", | |
12 | "execution_count": null, |
|
12 | "execution_count": null, | |
13 | "metadata": { |
|
13 | "metadata": { | |
14 | "collapsed": false |
|
14 | "collapsed": false | |
15 | }, |
|
15 | }, | |
16 | "outputs": [], |
|
16 | "outputs": [], | |
17 | "source": [ |
|
17 | "source": [ | |
18 | "%%html\n", |
|
18 | "%%html\n", | |
19 | "<style>\n", |
|
19 | "<style>\n", | |
20 | ".example-container { background: #999999; padding: 2px; min-height: 100px; }\n", |
|
20 | ".example-container { background: #999999; padding: 2px; min-height: 100px; }\n", | |
21 | ".example-container.sm { min-height: 50px; }\n", |
|
21 | ".example-container.sm { min-height: 50px; }\n", | |
22 | ".example-box { background: #9999FF; width: 50px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;}\n", |
|
22 | ".example-box { background: #9999FF; width: 50px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;}\n", | |
23 | ".example-box.med { width: 65px; height: 65px; } \n", |
|
23 | ".example-box.med { width: 65px; height: 65px; } \n", | |
24 | ".example-box.lrg { width: 80px; height: 80px; } \n", |
|
24 | ".example-box.lrg { width: 80px; height: 80px; } \n", | |
25 | "</style>" |
|
25 | "</style>" | |
26 | ] |
|
26 | ] | |
27 | }, |
|
27 | }, | |
28 | { |
|
28 | { | |
29 | "cell_type": "code", |
|
29 | "cell_type": "code", | |
30 | "execution_count": null, |
|
30 | "execution_count": null, | |
31 | "metadata": { |
|
31 | "metadata": { | |
32 | "collapsed": false |
|
32 | "collapsed": false | |
33 | }, |
|
33 | }, | |
34 | "outputs": [], |
|
34 | "outputs": [], | |
35 | "source": [ |
|
35 | "source": [ | |
36 | "from IPython.html import widgets\n", |
|
36 | "from IPython.html import widgets\n", | |
37 | "from IPython.display import display" |
|
37 | "from IPython.display import display" | |
38 | ] |
|
38 | ] | |
39 | }, |
|
39 | }, | |
40 | { |
|
40 | { | |
41 | "cell_type": "markdown", |
|
41 | "cell_type": "markdown", | |
42 | "metadata": { |
|
42 | "metadata": { | |
43 | "slideshow": { |
|
43 | "slideshow": { | |
44 | "slide_type": "slide" |
|
44 | "slide_type": "slide" | |
45 | } |
|
45 | } | |
46 | }, |
|
46 | }, | |
47 | "source": [ |
|
47 | "source": [ | |
48 | "# Widget Styling" |
|
48 | "# Widget Styling" | |
49 | ] |
|
49 | ] | |
50 | }, |
|
50 | }, | |
51 | { |
|
51 | { | |
52 | "cell_type": "markdown", |
|
52 | "cell_type": "markdown", | |
53 | "metadata": {}, |
|
53 | "metadata": {}, | |
54 | "source": [ |
|
54 | "source": [ | |
55 | "## Basic styling" |
|
55 | "## Basic styling" | |
56 | ] |
|
56 | ] | |
57 | }, |
|
57 | }, | |
58 | { |
|
58 | { | |
59 | "cell_type": "markdown", |
|
59 | "cell_type": "markdown", | |
60 | "metadata": {}, |
|
60 | "metadata": {}, | |
61 | "source": [ |
|
61 | "source": [ | |
62 | "The widgets distributed with IPython can be styled by setting the following traits:\n", |
|
62 | "The widgets distributed with IPython can be styled by setting the following traits:\n", | |
63 | "\n", |
|
63 | "\n", | |
64 | "- width \n", |
|
64 | "- width \n", | |
65 | "- height \n", |
|
65 | "- height \n", | |
66 | "- fore_color \n", |
|
66 | "- fore_color \n", | |
67 | "- back_color \n", |
|
67 | "- back_color \n", | |
68 | "- border_color \n", |
|
68 | "- border_color \n", | |
69 | "- border_width \n", |
|
69 | "- border_width \n", | |
70 | "- border_style \n", |
|
70 | "- border_style \n", | |
71 | "- font_style \n", |
|
71 | "- font_style \n", | |
72 | "- font_weight \n", |
|
72 | "- font_weight \n", | |
73 | "- font_size \n", |
|
73 | "- font_size \n", | |
74 | "- font_family \n", |
|
74 | "- font_family \n", | |
75 | "\n", |
|
75 | "\n", | |
76 | "The example below shows how a `Button` widget can be styled:" |
|
76 | "The example below shows how a `Button` widget can be styled:" | |
77 | ] |
|
77 | ] | |
78 | }, |
|
78 | }, | |
79 | { |
|
79 | { | |
80 | "cell_type": "code", |
|
80 | "cell_type": "code", | |
81 | "execution_count": null, |
|
81 | "execution_count": null, | |
82 | "metadata": { |
|
82 | "metadata": { | |
83 | "collapsed": false |
|
83 | "collapsed": false | |
84 | }, |
|
84 | }, | |
85 | "outputs": [], |
|
85 | "outputs": [], | |
86 | "source": [ |
|
86 | "source": [ | |
87 | "button = widgets.Button(\n", |
|
87 | "button = widgets.Button(\n", | |
88 | " description='Hello World!',\n", |
|
88 | " description='Hello World!',\n", | |
89 | " width=100, # Integers are interpreted as pixel measurements.\n", |
|
89 | " width=100, # Integers are interpreted as pixel measurements.\n", | |
90 | " height='2em', # em is valid HTML unit of measurement.\n", |
|
90 | " height='2em', # em is valid HTML unit of measurement.\n", | |
91 | " color='lime', # Colors can be set by name,\n", |
|
91 | " color='lime', # Colors can be set by name,\n", | |
92 | " background_color='#0022FF', # and also by color code.\n", |
|
92 | " background_color='#0022FF', # and also by color code.\n", | |
93 | " border_color='red')\n", |
|
93 | " border_color='red')\n", | |
94 | "display(button)" |
|
94 | "display(button)" | |
95 | ] |
|
95 | ] | |
96 | }, |
|
96 | }, | |
97 | { |
|
97 | { | |
98 | "cell_type": "markdown", |
|
98 | "cell_type": "markdown", | |
99 | "metadata": { |
|
99 | "metadata": { | |
100 | "slideshow": { |
|
100 | "slideshow": { | |
101 | "slide_type": "slide" |
|
101 | "slide_type": "slide" | |
102 | } |
|
102 | } | |
103 | }, |
|
103 | }, | |
104 | "source": [ |
|
104 | "source": [ | |
105 | "## Parent/child relationships" |
|
105 | "## Parent/child relationships" | |
106 | ] |
|
106 | ] | |
107 | }, |
|
107 | }, | |
108 | { |
|
108 | { | |
109 | "cell_type": "markdown", |
|
109 | "cell_type": "markdown", | |
110 | "metadata": {}, |
|
110 | "metadata": {}, | |
111 | "source": [ |
|
111 | "source": [ | |
112 | "To display widget A inside widget B, widget A must be a child of widget B. Widgets that can contain other widgets have a **`children` attribute**. This attribute can be **set via a keyword argument** in the widget's constructor **or after construction**. Calling display on an **object with children automatically displays those children**, too." |
|
112 | "To display widget A inside widget B, widget A must be a child of widget B. Widgets that can contain other widgets have a **`children` attribute**. This attribute can be **set via a keyword argument** in the widget's constructor **or after construction**. Calling display on an **object with children automatically displays those children**, too." | |
113 | ] |
|
113 | ] | |
114 | }, |
|
114 | }, | |
115 | { |
|
115 | { | |
116 | "cell_type": "code", |
|
116 | "cell_type": "code", | |
117 | "execution_count": null, |
|
117 | "execution_count": null, | |
118 | "metadata": { |
|
118 | "metadata": { | |
119 | "collapsed": false |
|
119 | "collapsed": false | |
120 | }, |
|
120 | }, | |
121 | "outputs": [], |
|
121 | "outputs": [], | |
122 | "source": [ |
|
122 | "source": [ | |
123 | "from IPython.display import display\n", |
|
123 | "from IPython.display import display\n", | |
124 | "\n", |
|
124 | "\n", | |
125 | "float_range = widgets.FloatSlider()\n", |
|
125 | "float_range = widgets.FloatSlider()\n", | |
126 | "string = widgets.Text(value='hi')\n", |
|
126 | "string = widgets.Text(value='hi')\n", | |
127 | "container = widgets.Box(children=[float_range, string])\n", |
|
127 | "container = widgets.Box(children=[float_range, string])\n", | |
128 | "\n", |
|
128 | "\n", | |
129 | "container.border_color = 'red'\n", |
|
129 | "container.border_color = 'red'\n", | |
130 | "container.border_style = 'dotted'\n", |
|
130 | "container.border_style = 'dotted'\n", | |
131 | "container.border_width = 3\n", |
|
131 | "container.border_width = 3\n", | |
132 | "display(container) # Displays the `container` and all of it's children." |
|
132 | "display(container) # Displays the `container` and all of it's children." | |
133 | ] |
|
133 | ] | |
134 | }, |
|
134 | }, | |
135 | { |
|
135 | { | |
136 | "cell_type": "markdown", |
|
136 | "cell_type": "markdown", | |
137 | "metadata": {}, |
|
137 | "metadata": {}, | |
138 | "source": [ |
|
138 | "source": [ | |
139 | "### After the parent is displayed" |
|
139 | "### After the parent is displayed" | |
140 | ] |
|
140 | ] | |
141 | }, |
|
141 | }, | |
142 | { |
|
142 | { | |
143 | "cell_type": "markdown", |
|
143 | "cell_type": "markdown", | |
144 | "metadata": { |
|
144 | "metadata": { | |
145 | "slideshow": { |
|
145 | "slideshow": { | |
146 | "slide_type": "slide" |
|
146 | "slide_type": "slide" | |
147 | } |
|
147 | } | |
148 | }, |
|
148 | }, | |
149 | "source": [ |
|
149 | "source": [ | |
150 | "Children **can be added to parents** after the parent has been displayed. The **parent is responsible for rendering its children**." |
|
150 | "Children **can be added to parents** after the parent has been displayed. The **parent is responsible for rendering its children**." | |
151 | ] |
|
151 | ] | |
152 | }, |
|
152 | }, | |
153 | { |
|
153 | { | |
154 | "cell_type": "code", |
|
154 | "cell_type": "code", | |
155 | "execution_count": null, |
|
155 | "execution_count": null, | |
156 | "metadata": { |
|
156 | "metadata": { | |
157 | "collapsed": false |
|
157 | "collapsed": false | |
158 | }, |
|
158 | }, | |
159 | "outputs": [], |
|
159 | "outputs": [], | |
160 | "source": [ |
|
160 | "source": [ | |
161 | "container = widgets.Box()\n", |
|
161 | "container = widgets.Box()\n", | |
162 | "container.border_color = 'red'\n", |
|
162 | "container.border_color = 'red'\n", | |
163 | "container.border_style = 'dotted'\n", |
|
163 | "container.border_style = 'dotted'\n", | |
164 | "container.border_width = 3\n", |
|
164 | "container.border_width = 3\n", | |
165 | "display(container)\n", |
|
165 | "display(container)\n", | |
166 | "\n", |
|
166 | "\n", | |
167 | "int_range = widgets.IntSlider()\n", |
|
167 | "int_range = widgets.IntSlider()\n", | |
168 | "container.children=[int_range]" |
|
168 | "container.children=[int_range]" | |
169 | ] |
|
169 | ] | |
170 | }, |
|
170 | }, | |
171 | { |
|
171 | { | |
172 | "cell_type": "markdown", |
|
172 | "cell_type": "markdown", | |
173 | "metadata": { |
|
173 | "metadata": { | |
174 | "slideshow": { |
|
174 | "slideshow": { | |
175 | "slide_type": "slide" |
|
175 | "slide_type": "slide" | |
176 | } |
|
176 | } | |
177 | }, |
|
177 | }, | |
178 | "source": [ |
|
178 | "source": [ | |
179 | "## Fancy boxes" |
|
179 | "## Fancy boxes" | |
180 | ] |
|
180 | ] | |
181 | }, |
|
181 | }, | |
182 | { |
|
182 | { | |
183 | "cell_type": "markdown", |
|
183 | "cell_type": "markdown", | |
184 | "metadata": {}, |
|
184 | "metadata": {}, | |
185 | "source": [ |
|
185 | "source": [ | |
186 |
"If you need to display a more complicated set of widgets, there are **specialized containers** that you can use. To display **multiple sets of widgets**, you can use an **`Accordion` or a `Tab` in combination with one `Box` per set of widgets** (as seen below). The \"pages\" of these widgets are their children. To set the titles of the pages, one |
|
186 | "If you need to display a more complicated set of widgets, there are **specialized containers** that you can use. To display **multiple sets of widgets**, you can use an **`Accordion` or a `Tab` in combination with one `Box` per set of widgets** (as seen below). The \"pages\" of these widgets are their children. To set the titles of the pages, one can **call `set_title`**." | |
187 | ] |
|
187 | ] | |
188 | }, |
|
188 | }, | |
189 | { |
|
189 | { | |
190 | "cell_type": "markdown", |
|
190 | "cell_type": "markdown", | |
191 | "metadata": {}, |
|
191 | "metadata": {}, | |
192 | "source": [ |
|
192 | "source": [ | |
193 | "### Accordion" |
|
193 | "### Accordion" | |
194 | ] |
|
194 | ] | |
195 | }, |
|
195 | }, | |
196 | { |
|
196 | { | |
197 | "cell_type": "code", |
|
197 | "cell_type": "code", | |
198 | "execution_count": null, |
|
198 | "execution_count": null, | |
199 | "metadata": { |
|
199 | "metadata": { | |
200 | "collapsed": false |
|
200 | "collapsed": false | |
201 | }, |
|
201 | }, | |
202 | "outputs": [], |
|
202 | "outputs": [], | |
203 | "source": [ |
|
203 | "source": [ | |
204 | "name1 = widgets.Text(description='Location:')\n", |
|
204 | "name1 = widgets.Text(description='Location:')\n", | |
205 | "zip1 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n", |
|
205 | "zip1 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n", | |
206 | "page1 = widgets.Box(children=[name1, zip1])\n", |
|
206 | "page1 = widgets.Box(children=[name1, zip1])\n", | |
207 | "\n", |
|
207 | "\n", | |
208 | "name2 = widgets.Text(description='Location:')\n", |
|
208 | "name2 = widgets.Text(description='Location:')\n", | |
209 | "zip2 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n", |
|
209 | "zip2 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n", | |
210 | "page2 = widgets.Box(children=[name2, zip2])\n", |
|
210 | "page2 = widgets.Box(children=[name2, zip2])\n", | |
211 | "\n", |
|
211 | "\n", | |
212 | "accord = widgets.Accordion(children=[page1, page2])\n", |
|
212 | "accord = widgets.Accordion(children=[page1, page2])\n", | |
213 | "display(accord)\n", |
|
213 | "display(accord)\n", | |
214 | "\n", |
|
214 | "\n", | |
215 | "accord.set_title(0, 'From')\n", |
|
215 | "accord.set_title(0, 'From')\n", | |
216 | "accord.set_title(1, 'To')" |
|
216 | "accord.set_title(1, 'To')" | |
217 | ] |
|
217 | ] | |
218 | }, |
|
218 | }, | |
219 | { |
|
219 | { | |
220 | "cell_type": "markdown", |
|
220 | "cell_type": "markdown", | |
221 | "metadata": { |
|
221 | "metadata": { | |
222 | "slideshow": { |
|
222 | "slideshow": { | |
223 | "slide_type": "slide" |
|
223 | "slide_type": "slide" | |
224 | } |
|
224 | } | |
225 | }, |
|
225 | }, | |
226 | "source": [ |
|
226 | "source": [ | |
227 | "### TabWidget" |
|
227 | "### TabWidget" | |
228 | ] |
|
228 | ] | |
229 | }, |
|
229 | }, | |
230 | { |
|
230 | { | |
231 | "cell_type": "code", |
|
231 | "cell_type": "code", | |
232 | "execution_count": null, |
|
232 | "execution_count": null, | |
233 | "metadata": { |
|
233 | "metadata": { | |
234 | "collapsed": false |
|
234 | "collapsed": false | |
235 | }, |
|
235 | }, | |
236 | "outputs": [], |
|
236 | "outputs": [], | |
237 | "source": [ |
|
237 | "source": [ | |
238 | "name = widgets.Text(description='Name:')\n", |
|
238 | "name = widgets.Text(description='Name:')\n", | |
239 | "color = widgets.Dropdown(description='Color:', values=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])\n", |
|
239 | "color = widgets.Dropdown(description='Color:', values=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])\n", | |
240 | "page1 = widgets.Box(children=[name, color])\n", |
|
240 | "page1 = widgets.Box(children=[name, color])\n", | |
241 | "\n", |
|
241 | "\n", | |
242 | "age = widgets.IntSlider(description='Age:', min=0, max=120, value=50)\n", |
|
242 | "age = widgets.IntSlider(description='Age:', min=0, max=120, value=50)\n", | |
243 | "gender = widgets.RadioButtons(description='Gender:', values=['male', 'female'])\n", |
|
243 | "gender = widgets.RadioButtons(description='Gender:', values=['male', 'female'])\n", | |
244 | "page2 = widgets.Box(children=[age, gender])\n", |
|
244 | "page2 = widgets.Box(children=[age, gender])\n", | |
245 | "\n", |
|
245 | "\n", | |
246 | "tabs = widgets.Tab(children=[page1, page2])\n", |
|
246 | "tabs = widgets.Tab(children=[page1, page2])\n", | |
247 | "display(tabs)\n", |
|
247 | "display(tabs)\n", | |
248 | "\n", |
|
248 | "\n", | |
249 | "tabs.set_title(0, 'Name')\n", |
|
249 | "tabs.set_title(0, 'Name')\n", | |
250 | "tabs.set_title(1, 'Details')" |
|
250 | "tabs.set_title(1, 'Details')" | |
251 | ] |
|
251 | ] | |
252 | }, |
|
252 | }, | |
253 | { |
|
253 | { | |
254 | "cell_type": "markdown", |
|
254 | "cell_type": "markdown", | |
255 | "metadata": { |
|
255 | "metadata": { | |
256 | "slideshow": { |
|
256 | "slideshow": { | |
257 | "slide_type": "slide" |
|
257 | "slide_type": "slide" | |
258 | } |
|
258 | } | |
259 | }, |
|
259 | }, | |
260 | "source": [ |
|
260 | "source": [ | |
261 | "### Popup" |
|
261 | "### Popup" | |
262 | ] |
|
262 | ] | |
263 | }, |
|
263 | }, | |
264 | { |
|
264 | { | |
265 | "cell_type": "markdown", |
|
265 | "cell_type": "markdown", | |
266 | "metadata": {}, |
|
266 | "metadata": {}, | |
267 | "source": [ |
|
267 | "source": [ | |
268 | "Unlike the other two special containers, the `Popup` is only **designed to display one set of widgets**. The `Popup` can be used to **display widgets outside of the widget area**. " |
|
268 | "Unlike the other two special containers, the `Popup` is only **designed to display one set of widgets**. The `Popup` can be used to **display widgets outside of the widget area**. " | |
269 | ] |
|
269 | ] | |
270 | }, |
|
270 | }, | |
271 | { |
|
271 | { | |
272 | "cell_type": "code", |
|
272 | "cell_type": "code", | |
273 | "execution_count": null, |
|
273 | "execution_count": null, | |
274 | "metadata": { |
|
274 | "metadata": { | |
275 | "collapsed": false |
|
275 | "collapsed": false | |
276 | }, |
|
276 | }, | |
277 | "outputs": [], |
|
277 | "outputs": [], | |
278 | "source": [ |
|
278 | "source": [ | |
279 | "counter = widgets.IntText(description='Counter:')\n", |
|
279 | "counter = widgets.IntText(description='Counter:')\n", | |
280 | "popup = widgets.Popup(children=[counter], description='Popup Demo', button_text='Popup Button')\n", |
|
280 | "popup = widgets.Popup(children=[counter], description='Popup Demo', button_text='Popup Button')\n", | |
281 | "display(popup)" |
|
281 | "display(popup)" | |
282 | ] |
|
282 | ] | |
283 | }, |
|
283 | }, | |
284 | { |
|
284 | { | |
285 | "cell_type": "code", |
|
285 | "cell_type": "code", | |
286 | "execution_count": null, |
|
286 | "execution_count": null, | |
287 | "metadata": { |
|
287 | "metadata": { | |
288 | "collapsed": false |
|
288 | "collapsed": false | |
289 | }, |
|
289 | }, | |
290 | "outputs": [], |
|
290 | "outputs": [], | |
291 | "source": [ |
|
291 | "source": [ | |
292 | "counter.value += 1" |
|
292 | "counter.value += 1" | |
293 | ] |
|
293 | ] | |
294 | }, |
|
294 | }, | |
295 | { |
|
295 | { | |
296 | "cell_type": "code", |
|
296 | "cell_type": "code", | |
297 | "execution_count": null, |
|
297 | "execution_count": null, | |
298 | "metadata": { |
|
298 | "metadata": { | |
299 | "collapsed": false |
|
299 | "collapsed": false | |
300 | }, |
|
300 | }, | |
301 | "outputs": [], |
|
301 | "outputs": [], | |
302 | "source": [] |
|
302 | "source": [] | |
303 | }, |
|
303 | }, | |
304 | { |
|
304 | { | |
305 | "cell_type": "code", |
|
305 | "cell_type": "code", | |
306 | "execution_count": null, |
|
306 | "execution_count": null, | |
307 | "metadata": { |
|
307 | "metadata": { | |
308 | "collapsed": false |
|
308 | "collapsed": false | |
309 | }, |
|
309 | }, | |
310 | "outputs": [], |
|
310 | "outputs": [], | |
311 | "source": [] |
|
311 | "source": [] | |
312 | }, |
|
312 | }, | |
313 | { |
|
313 | { | |
314 | "cell_type": "code", |
|
314 | "cell_type": "code", | |
315 | "execution_count": null, |
|
315 | "execution_count": null, | |
316 | "metadata": { |
|
316 | "metadata": { | |
317 | "collapsed": false |
|
317 | "collapsed": false | |
318 | }, |
|
318 | }, | |
319 | "outputs": [], |
|
319 | "outputs": [], | |
320 | "source": [] |
|
320 | "source": [] | |
321 | }, |
|
321 | }, | |
322 | { |
|
322 | { | |
323 | "cell_type": "code", |
|
323 | "cell_type": "code", | |
324 | "execution_count": null, |
|
324 | "execution_count": null, | |
325 | "metadata": { |
|
325 | "metadata": { | |
326 | "collapsed": false |
|
326 | "collapsed": false | |
327 | }, |
|
327 | }, | |
328 | "outputs": [], |
|
328 | "outputs": [], | |
329 | "source": [] |
|
329 | "source": [] | |
330 | }, |
|
330 | }, | |
331 | { |
|
331 | { | |
332 | "cell_type": "code", |
|
332 | "cell_type": "code", | |
333 | "execution_count": null, |
|
333 | "execution_count": null, | |
334 | "metadata": { |
|
334 | "metadata": { | |
335 | "collapsed": false |
|
335 | "collapsed": false | |
336 | }, |
|
336 | }, | |
337 | "outputs": [], |
|
337 | "outputs": [], | |
338 | "source": [] |
|
338 | "source": [] | |
339 | }, |
|
339 | }, | |
340 | { |
|
340 | { | |
341 | "cell_type": "code", |
|
341 | "cell_type": "code", | |
342 | "execution_count": null, |
|
342 | "execution_count": null, | |
343 | "metadata": { |
|
343 | "metadata": { | |
344 | "collapsed": false |
|
344 | "collapsed": false | |
345 | }, |
|
345 | }, | |
346 | "outputs": [], |
|
346 | "outputs": [], | |
347 | "source": [] |
|
347 | "source": [] | |
348 | }, |
|
348 | }, | |
349 | { |
|
349 | { | |
350 | "cell_type": "code", |
|
350 | "cell_type": "code", | |
351 | "execution_count": null, |
|
351 | "execution_count": null, | |
352 | "metadata": { |
|
352 | "metadata": { | |
353 | "collapsed": false |
|
353 | "collapsed": false | |
354 | }, |
|
354 | }, | |
355 | "outputs": [], |
|
355 | "outputs": [], | |
356 | "source": [] |
|
356 | "source": [] | |
357 | }, |
|
357 | }, | |
358 | { |
|
358 | { | |
359 | "cell_type": "code", |
|
359 | "cell_type": "code", | |
360 | "execution_count": null, |
|
360 | "execution_count": null, | |
361 | "metadata": { |
|
361 | "metadata": { | |
362 | "collapsed": false |
|
362 | "collapsed": false | |
363 | }, |
|
363 | }, | |
364 | "outputs": [], |
|
364 | "outputs": [], | |
365 | "source": [] |
|
365 | "source": [] | |
366 | }, |
|
366 | }, | |
367 | { |
|
367 | { | |
368 | "cell_type": "code", |
|
368 | "cell_type": "code", | |
369 | "execution_count": null, |
|
369 | "execution_count": null, | |
370 | "metadata": { |
|
370 | "metadata": { | |
371 | "collapsed": false |
|
371 | "collapsed": false | |
372 | }, |
|
372 | }, | |
373 | "outputs": [], |
|
373 | "outputs": [], | |
374 | "source": [] |
|
374 | "source": [] | |
375 | }, |
|
375 | }, | |
376 | { |
|
376 | { | |
377 | "cell_type": "code", |
|
377 | "cell_type": "code", | |
378 | "execution_count": null, |
|
378 | "execution_count": null, | |
379 | "metadata": { |
|
379 | "metadata": { | |
380 | "collapsed": false |
|
380 | "collapsed": false | |
381 | }, |
|
381 | }, | |
382 | "outputs": [], |
|
382 | "outputs": [], | |
383 | "source": [] |
|
383 | "source": [] | |
384 | }, |
|
384 | }, | |
385 | { |
|
385 | { | |
386 | "cell_type": "code", |
|
386 | "cell_type": "code", | |
387 | "execution_count": null, |
|
387 | "execution_count": null, | |
388 | "metadata": { |
|
388 | "metadata": { | |
389 | "collapsed": false |
|
389 | "collapsed": false | |
390 | }, |
|
390 | }, | |
391 | "outputs": [], |
|
391 | "outputs": [], | |
392 | "source": [] |
|
392 | "source": [] | |
393 | }, |
|
393 | }, | |
394 | { |
|
394 | { | |
395 | "cell_type": "code", |
|
395 | "cell_type": "code", | |
396 | "execution_count": null, |
|
396 | "execution_count": null, | |
397 | "metadata": { |
|
397 | "metadata": { | |
398 | "collapsed": false |
|
398 | "collapsed": false | |
399 | }, |
|
399 | }, | |
400 | "outputs": [], |
|
400 | "outputs": [], | |
401 | "source": [] |
|
401 | "source": [] | |
402 | }, |
|
402 | }, | |
403 | { |
|
403 | { | |
404 | "cell_type": "code", |
|
404 | "cell_type": "code", | |
405 | "execution_count": null, |
|
405 | "execution_count": null, | |
406 | "metadata": { |
|
406 | "metadata": { | |
407 | "collapsed": false |
|
407 | "collapsed": false | |
408 | }, |
|
408 | }, | |
409 | "outputs": [], |
|
409 | "outputs": [], | |
410 | "source": [] |
|
410 | "source": [] | |
411 | }, |
|
411 | }, | |
412 | { |
|
412 | { | |
413 | "cell_type": "code", |
|
413 | "cell_type": "code", | |
414 | "execution_count": null, |
|
414 | "execution_count": null, | |
415 | "metadata": { |
|
415 | "metadata": { | |
416 | "collapsed": false |
|
416 | "collapsed": false | |
417 | }, |
|
417 | }, | |
418 | "outputs": [], |
|
418 | "outputs": [], | |
419 | "source": [] |
|
419 | "source": [] | |
420 | }, |
|
420 | }, | |
421 | { |
|
421 | { | |
422 | "cell_type": "code", |
|
422 | "cell_type": "code", | |
423 | "execution_count": null, |
|
423 | "execution_count": null, | |
424 | "metadata": { |
|
424 | "metadata": { | |
425 | "collapsed": false |
|
425 | "collapsed": false | |
426 | }, |
|
426 | }, | |
427 | "outputs": [], |
|
427 | "outputs": [], | |
428 | "source": [ |
|
428 | "source": [ | |
429 | "counter.value += 1" |
|
429 | "counter.value += 1" | |
430 | ] |
|
430 | ] | |
431 | }, |
|
431 | }, | |
432 | { |
|
432 | { | |
433 | "cell_type": "code", |
|
433 | "cell_type": "code", | |
434 | "execution_count": null, |
|
434 | "execution_count": null, | |
435 | "metadata": { |
|
435 | "metadata": { | |
436 | "collapsed": false |
|
436 | "collapsed": false | |
437 | }, |
|
437 | }, | |
438 | "outputs": [], |
|
438 | "outputs": [], | |
439 | "source": [ |
|
439 | "source": [ | |
440 | "popup.close()" |
|
440 | "popup.close()" | |
441 | ] |
|
441 | ] | |
442 | }, |
|
442 | }, | |
443 | { |
|
443 | { | |
444 | "cell_type": "markdown", |
|
444 | "cell_type": "markdown", | |
445 | "metadata": { |
|
445 | "metadata": { | |
446 | "slideshow": { |
|
446 | "slideshow": { | |
447 | "slide_type": "slide" |
|
447 | "slide_type": "slide" | |
448 | } |
|
448 | } | |
449 | }, |
|
449 | }, | |
450 | "source": [ |
|
450 | "source": [ | |
451 | "# Alignment" |
|
451 | "# Alignment" | |
452 | ] |
|
452 | ] | |
453 | }, |
|
453 | }, | |
454 | { |
|
454 | { | |
455 | "cell_type": "markdown", |
|
455 | "cell_type": "markdown", | |
456 | "metadata": {}, |
|
456 | "metadata": {}, | |
457 | "source": [ |
|
457 | "source": [ | |
458 | "Most widgets have a **`description` attribute**, which allows a label for the widget to be defined.\n", |
|
458 | "Most widgets have a **`description` attribute**, which allows a label for the widget to be defined.\n", | |
459 | "The label of the widget **has a fixed minimum width**.\n", |
|
459 | "The label of the widget **has a fixed minimum width**.\n", | |
460 | "The text of the label is **always right aligned and the widget is left aligned**:" |
|
460 | "The text of the label is **always right aligned and the widget is left aligned**:" | |
461 | ] |
|
461 | ] | |
462 | }, |
|
462 | }, | |
463 | { |
|
463 | { | |
464 | "cell_type": "code", |
|
464 | "cell_type": "code", | |
465 | "execution_count": null, |
|
465 | "execution_count": null, | |
466 | "metadata": { |
|
466 | "metadata": { | |
467 | "collapsed": false |
|
467 | "collapsed": false | |
468 | }, |
|
468 | }, | |
469 | "outputs": [], |
|
469 | "outputs": [], | |
470 | "source": [ |
|
470 | "source": [ | |
471 | "display(widgets.Text(description=\"a:\"))\n", |
|
471 | "display(widgets.Text(description=\"a:\"))\n", | |
472 | "display(widgets.Text(description=\"aa:\"))\n", |
|
472 | "display(widgets.Text(description=\"aa:\"))\n", | |
473 | "display(widgets.Text(description=\"aaa:\"))" |
|
473 | "display(widgets.Text(description=\"aaa:\"))" | |
474 | ] |
|
474 | ] | |
475 | }, |
|
475 | }, | |
476 | { |
|
476 | { | |
477 | "cell_type": "markdown", |
|
477 | "cell_type": "markdown", | |
478 | "metadata": { |
|
478 | "metadata": { | |
479 | "slideshow": { |
|
479 | "slideshow": { | |
480 | "slide_type": "slide" |
|
480 | "slide_type": "slide" | |
481 | } |
|
481 | } | |
482 | }, |
|
482 | }, | |
483 | "source": [ |
|
483 | "source": [ | |
484 | "If a **label is longer** than the minimum width, the **widget is shifted to the right**:" |
|
484 | "If a **label is longer** than the minimum width, the **widget is shifted to the right**:" | |
485 | ] |
|
485 | ] | |
486 | }, |
|
486 | }, | |
487 | { |
|
487 | { | |
488 | "cell_type": "code", |
|
488 | "cell_type": "code", | |
489 | "execution_count": null, |
|
489 | "execution_count": null, | |
490 | "metadata": { |
|
490 | "metadata": { | |
491 | "collapsed": false |
|
491 | "collapsed": false | |
492 | }, |
|
492 | }, | |
493 | "outputs": [], |
|
493 | "outputs": [], | |
494 | "source": [ |
|
494 | "source": [ | |
495 | "display(widgets.Text(description=\"a:\"))\n", |
|
495 | "display(widgets.Text(description=\"a:\"))\n", | |
496 | "display(widgets.Text(description=\"aa:\"))\n", |
|
496 | "display(widgets.Text(description=\"aa:\"))\n", | |
497 | "display(widgets.Text(description=\"aaa:\"))\n", |
|
497 | "display(widgets.Text(description=\"aaa:\"))\n", | |
498 | "display(widgets.Text(description=\"aaaaaaaaaaaaaaaaaa:\"))" |
|
498 | "display(widgets.Text(description=\"aaaaaaaaaaaaaaaaaa:\"))" | |
499 | ] |
|
499 | ] | |
500 | }, |
|
500 | }, | |
501 | { |
|
501 | { | |
502 | "cell_type": "markdown", |
|
502 | "cell_type": "markdown", | |
503 | "metadata": { |
|
503 | "metadata": { | |
504 | "slideshow": { |
|
504 | "slideshow": { | |
505 | "slide_type": "slide" |
|
505 | "slide_type": "slide" | |
506 | } |
|
506 | } | |
507 | }, |
|
507 | }, | |
508 | "source": [ |
|
508 | "source": [ | |
509 | "If a `description` is **not set** for the widget, the **label is not displayed**:" |
|
509 | "If a `description` is **not set** for the widget, the **label is not displayed**:" | |
510 | ] |
|
510 | ] | |
511 | }, |
|
511 | }, | |
512 | { |
|
512 | { | |
513 | "cell_type": "code", |
|
513 | "cell_type": "code", | |
514 | "execution_count": null, |
|
514 | "execution_count": null, | |
515 | "metadata": { |
|
515 | "metadata": { | |
516 | "collapsed": false |
|
516 | "collapsed": false | |
517 | }, |
|
517 | }, | |
518 | "outputs": [], |
|
518 | "outputs": [], | |
519 | "source": [ |
|
519 | "source": [ | |
520 | "display(widgets.Text(description=\"a:\"))\n", |
|
520 | "display(widgets.Text(description=\"a:\"))\n", | |
521 | "display(widgets.Text(description=\"aa:\"))\n", |
|
521 | "display(widgets.Text(description=\"aa:\"))\n", | |
522 | "display(widgets.Text(description=\"aaa:\"))\n", |
|
522 | "display(widgets.Text(description=\"aaa:\"))\n", | |
523 | "display(widgets.Text())" |
|
523 | "display(widgets.Text())" | |
524 | ] |
|
524 | ] | |
525 | }, |
|
525 | }, | |
526 | { |
|
526 | { | |
527 | "cell_type": "markdown", |
|
527 | "cell_type": "markdown", | |
528 | "metadata": { |
|
528 | "metadata": { | |
529 | "slideshow": { |
|
529 | "slideshow": { | |
530 | "slide_type": "slide" |
|
530 | "slide_type": "slide" | |
531 | } |
|
531 | } | |
532 | }, |
|
532 | }, | |
533 | "source": [ |
|
533 | "source": [ | |
534 | "## Flex boxes" |
|
534 | "## Flex boxes" | |
535 | ] |
|
535 | ] | |
536 | }, |
|
536 | }, | |
537 | { |
|
537 | { | |
538 | "cell_type": "markdown", |
|
538 | "cell_type": "markdown", | |
539 | "metadata": {}, |
|
539 | "metadata": {}, | |
540 | "source": [ |
|
540 | "source": [ | |
541 | "Widgets can be aligned using the `FlexBox`, `HBox`, and `VBox` widgets." |
|
541 | "Widgets can be aligned using the `FlexBox`, `HBox`, and `VBox` widgets." | |
542 | ] |
|
542 | ] | |
543 | }, |
|
543 | }, | |
544 | { |
|
544 | { | |
545 | "cell_type": "markdown", |
|
545 | "cell_type": "markdown", | |
546 | "metadata": { |
|
546 | "metadata": { | |
547 | "slideshow": { |
|
547 | "slideshow": { | |
548 | "slide_type": "slide" |
|
548 | "slide_type": "slide" | |
549 | } |
|
549 | } | |
550 | }, |
|
550 | }, | |
551 | "source": [ |
|
551 | "source": [ | |
552 | "### Application to widgets" |
|
552 | "### Application to widgets" | |
553 | ] |
|
553 | ] | |
554 | }, |
|
554 | }, | |
555 | { |
|
555 | { | |
556 | "cell_type": "markdown", |
|
556 | "cell_type": "markdown", | |
557 | "metadata": {}, |
|
557 | "metadata": {}, | |
558 | "source": [ |
|
558 | "source": [ | |
559 | "Widgets display vertically by default:" |
|
559 | "Widgets display vertically by default:" | |
560 | ] |
|
560 | ] | |
561 | }, |
|
561 | }, | |
562 | { |
|
562 | { | |
563 | "cell_type": "code", |
|
563 | "cell_type": "code", | |
564 | "execution_count": null, |
|
564 | "execution_count": null, | |
565 | "metadata": { |
|
565 | "metadata": { | |
566 | "collapsed": false |
|
566 | "collapsed": false | |
567 | }, |
|
567 | }, | |
568 | "outputs": [], |
|
568 | "outputs": [], | |
569 | "source": [ |
|
569 | "source": [ | |
570 | "buttons = [widgets.Button(description=str(i)) for i in range(3)]\n", |
|
570 | "buttons = [widgets.Button(description=str(i)) for i in range(3)]\n", | |
571 | "display(*buttons)" |
|
571 | "display(*buttons)" | |
572 | ] |
|
572 | ] | |
573 | }, |
|
573 | }, | |
574 | { |
|
574 | { | |
575 | "cell_type": "markdown", |
|
575 | "cell_type": "markdown", | |
576 | "metadata": { |
|
576 | "metadata": { | |
577 | "slideshow": { |
|
577 | "slideshow": { | |
578 | "slide_type": "slide" |
|
578 | "slide_type": "slide" | |
579 | } |
|
579 | } | |
580 | }, |
|
580 | }, | |
581 | "source": [ |
|
581 | "source": [ | |
582 | "### Using hbox" |
|
582 | "### Using hbox" | |
583 | ] |
|
583 | ] | |
584 | }, |
|
584 | }, | |
585 | { |
|
585 | { | |
586 | "cell_type": "markdown", |
|
586 | "cell_type": "markdown", | |
587 | "metadata": {}, |
|
587 | "metadata": {}, | |
588 | "source": [ |
|
588 | "source": [ | |
589 | "To make widgets display horizontally, you need to **child them to a `HBox` widget**." |
|
589 | "To make widgets display horizontally, you need to **child them to a `HBox` widget**." | |
590 | ] |
|
590 | ] | |
591 | }, |
|
591 | }, | |
592 | { |
|
592 | { | |
593 | "cell_type": "code", |
|
593 | "cell_type": "code", | |
594 | "execution_count": null, |
|
594 | "execution_count": null, | |
595 | "metadata": { |
|
595 | "metadata": { | |
596 | "collapsed": false |
|
596 | "collapsed": false | |
597 | }, |
|
597 | }, | |
598 | "outputs": [], |
|
598 | "outputs": [], | |
599 | "source": [ |
|
599 | "source": [ | |
600 | "container = widgets.HBox(children=buttons)\n", |
|
600 | "container = widgets.HBox(children=buttons)\n", | |
601 | "display(container)" |
|
601 | "display(container)" | |
602 | ] |
|
602 | ] | |
603 | }, |
|
603 | }, | |
604 | { |
|
604 | { | |
605 | "cell_type": "markdown", |
|
605 | "cell_type": "markdown", | |
606 | "metadata": {}, |
|
606 | "metadata": {}, | |
607 | "source": [ |
|
607 | "source": [ | |
608 | "By setting the width of the container to 100% and its `pack` to `center`, you can center the buttons." |
|
608 | "By setting the width of the container to 100% and its `pack` to `center`, you can center the buttons." | |
609 | ] |
|
609 | ] | |
610 | }, |
|
610 | }, | |
611 | { |
|
611 | { | |
612 | "cell_type": "code", |
|
612 | "cell_type": "code", | |
613 | "execution_count": null, |
|
613 | "execution_count": null, | |
614 | "metadata": { |
|
614 | "metadata": { | |
615 | "collapsed": false |
|
615 | "collapsed": false | |
616 | }, |
|
616 | }, | |
617 | "outputs": [], |
|
617 | "outputs": [], | |
618 | "source": [ |
|
618 | "source": [ | |
619 | "container.width = '100%'\n", |
|
619 | "container.width = '100%'\n", | |
620 | "container.pack = 'center'" |
|
620 | "container.pack = 'center'" | |
621 | ] |
|
621 | ] | |
622 | }, |
|
622 | }, | |
623 | { |
|
623 | { | |
624 | "cell_type": "markdown", |
|
624 | "cell_type": "markdown", | |
625 | "metadata": { |
|
625 | "metadata": { | |
626 | "slideshow": { |
|
626 | "slideshow": { | |
627 | "slide_type": "slide" |
|
627 | "slide_type": "slide" | |
628 | } |
|
628 | } | |
629 | }, |
|
629 | }, | |
630 | "source": [ |
|
630 | "source": [ | |
631 | "## Visibility" |
|
631 | "## Visibility" | |
632 | ] |
|
632 | ] | |
633 | }, |
|
633 | }, | |
634 | { |
|
634 | { | |
635 | "cell_type": "markdown", |
|
635 | "cell_type": "markdown", | |
636 | "metadata": {}, |
|
636 | "metadata": {}, | |
637 | "source": [ |
|
637 | "source": [ | |
638 | "Sometimes it is necessary to **hide or show widgets** in place, **without having to re-display** the widget.\n", |
|
638 | "Sometimes it is necessary to **hide or show widgets** in place, **without having to re-display** the widget.\n", | |
639 | "The `visible` property of widgets can be used to hide or show **widgets that have already been displayed** (as seen below). The `visible` property can be:\n", |
|
639 | "The `visible` property of widgets can be used to hide or show **widgets that have already been displayed** (as seen below). The `visible` property can be:\n", | |
640 | "* `True` - the widget is displayed\n", |
|
640 | "* `True` - the widget is displayed\n", | |
641 | "* `False` - the widget is hidden, and the empty space where the widget would be is collapsed\n", |
|
641 | "* `False` - the widget is hidden, and the empty space where the widget would be is collapsed\n", | |
642 | "* `None` - the widget is hidden, and the empty space where the widget would be is shown" |
|
642 | "* `None` - the widget is hidden, and the empty space where the widget would be is shown" | |
643 | ] |
|
643 | ] | |
644 | }, |
|
644 | }, | |
645 | { |
|
645 | { | |
646 | "cell_type": "code", |
|
646 | "cell_type": "code", | |
647 | "execution_count": null, |
|
647 | "execution_count": null, | |
648 | "metadata": { |
|
648 | "metadata": { | |
649 | "collapsed": false |
|
649 | "collapsed": false | |
650 | }, |
|
650 | }, | |
651 | "outputs": [], |
|
651 | "outputs": [], | |
652 | "source": [ |
|
652 | "source": [ | |
653 | "w1 = widgets.Latex(value=\"First line\")\n", |
|
653 | "w1 = widgets.Latex(value=\"First line\")\n", | |
654 | "w2 = widgets.Latex(value=\"Second line\")\n", |
|
654 | "w2 = widgets.Latex(value=\"Second line\")\n", | |
655 | "w3 = widgets.Latex(value=\"Third line\")\n", |
|
655 | "w3 = widgets.Latex(value=\"Third line\")\n", | |
656 | "display(w1, w2, w3)" |
|
656 | "display(w1, w2, w3)" | |
657 | ] |
|
657 | ] | |
658 | }, |
|
658 | }, | |
659 | { |
|
659 | { | |
660 | "cell_type": "code", |
|
660 | "cell_type": "code", | |
661 | "execution_count": null, |
|
661 | "execution_count": null, | |
662 | "metadata": { |
|
662 | "metadata": { | |
663 | "collapsed": true |
|
663 | "collapsed": true | |
664 | }, |
|
664 | }, | |
665 | "outputs": [], |
|
665 | "outputs": [], | |
666 | "source": [ |
|
666 | "source": [ | |
667 | "w2.visible=None" |
|
667 | "w2.visible=None" | |
668 | ] |
|
668 | ] | |
669 | }, |
|
669 | }, | |
670 | { |
|
670 | { | |
671 | "cell_type": "code", |
|
671 | "cell_type": "code", | |
672 | "execution_count": null, |
|
672 | "execution_count": null, | |
673 | "metadata": { |
|
673 | "metadata": { | |
674 | "collapsed": false |
|
674 | "collapsed": false | |
675 | }, |
|
675 | }, | |
676 | "outputs": [], |
|
676 | "outputs": [], | |
677 | "source": [ |
|
677 | "source": [ | |
678 | "w2.visible=False" |
|
678 | "w2.visible=False" | |
679 | ] |
|
679 | ] | |
680 | }, |
|
680 | }, | |
681 | { |
|
681 | { | |
682 | "cell_type": "code", |
|
682 | "cell_type": "code", | |
683 | "execution_count": null, |
|
683 | "execution_count": null, | |
684 | "metadata": { |
|
684 | "metadata": { | |
685 | "collapsed": false |
|
685 | "collapsed": false | |
686 | }, |
|
686 | }, | |
687 | "outputs": [], |
|
687 | "outputs": [], | |
688 | "source": [ |
|
688 | "source": [ | |
689 | "w2.visible=True" |
|
689 | "w2.visible=True" | |
690 | ] |
|
690 | ] | |
691 | }, |
|
691 | }, | |
692 | { |
|
692 | { | |
693 | "cell_type": "markdown", |
|
693 | "cell_type": "markdown", | |
694 | "metadata": { |
|
694 | "metadata": { | |
695 | "slideshow": { |
|
695 | "slideshow": { | |
696 | "slide_type": "slide" |
|
696 | "slide_type": "slide" | |
697 | } |
|
697 | } | |
698 | }, |
|
698 | }, | |
699 | "source": [ |
|
699 | "source": [ | |
700 | "### Another example" |
|
700 | "### Another example" | |
701 | ] |
|
701 | ] | |
702 | }, |
|
702 | }, | |
703 | { |
|
703 | { | |
704 | "cell_type": "markdown", |
|
704 | "cell_type": "markdown", | |
705 | "metadata": {}, |
|
705 | "metadata": {}, | |
706 | "source": [ |
|
706 | "source": [ | |
707 | "In the example below, a form is rendered, which conditionally displays widgets depending on the state of other widgets. Try toggling the student checkbox." |
|
707 | "In the example below, a form is rendered, which conditionally displays widgets depending on the state of other widgets. Try toggling the student checkbox." | |
708 | ] |
|
708 | ] | |
709 | }, |
|
709 | }, | |
710 | { |
|
710 | { | |
711 | "cell_type": "code", |
|
711 | "cell_type": "code", | |
712 | "execution_count": null, |
|
712 | "execution_count": null, | |
713 | "metadata": { |
|
713 | "metadata": { | |
714 | "collapsed": false |
|
714 | "collapsed": false | |
715 | }, |
|
715 | }, | |
716 | "outputs": [], |
|
716 | "outputs": [], | |
717 | "source": [ |
|
717 | "source": [ | |
718 | "form = widgets.VBox()\n", |
|
718 | "form = widgets.VBox()\n", | |
719 | "first = widgets.Text(description=\"First Name:\")\n", |
|
719 | "first = widgets.Text(description=\"First Name:\")\n", | |
720 | "last = widgets.Text(description=\"Last Name:\")\n", |
|
720 | "last = widgets.Text(description=\"Last Name:\")\n", | |
721 | "\n", |
|
721 | "\n", | |
722 | "student = widgets.Checkbox(description=\"Student:\", value=False)\n", |
|
722 | "student = widgets.Checkbox(description=\"Student:\", value=False)\n", | |
723 | "school_info = widgets.VBox(visible=False, children=[\n", |
|
723 | "school_info = widgets.VBox(visible=False, children=[\n", | |
724 | " widgets.Text(description=\"School:\"),\n", |
|
724 | " widgets.Text(description=\"School:\"),\n", | |
725 | " widgets.IntText(description=\"Grade:\", min=0, max=12)\n", |
|
725 | " widgets.IntText(description=\"Grade:\", min=0, max=12)\n", | |
726 | " ])\n", |
|
726 | " ])\n", | |
727 | "\n", |
|
727 | "\n", | |
728 | "pet = widgets.Text(description=\"Pet's Name:\")\n", |
|
728 | "pet = widgets.Text(description=\"Pet's Name:\")\n", | |
729 | "form.children = [first, last, student, school_info, pet]\n", |
|
729 | "form.children = [first, last, student, school_info, pet]\n", | |
730 | "display(form)\n", |
|
730 | "display(form)\n", | |
731 | "\n", |
|
731 | "\n", | |
732 | "def on_student_toggle(name, value):\n", |
|
732 | "def on_student_toggle(name, value):\n", | |
733 | " if value:\n", |
|
733 | " if value:\n", | |
734 | " school_info.visible = True\n", |
|
734 | " school_info.visible = True\n", | |
735 | " else:\n", |
|
735 | " else:\n", | |
736 | " school_info.visible = False\n", |
|
736 | " school_info.visible = False\n", | |
737 | "student.on_trait_change(on_student_toggle, 'value')\n" |
|
737 | "student.on_trait_change(on_student_toggle, 'value')\n" | |
738 | ] |
|
738 | ] | |
739 | }, |
|
739 | }, | |
740 | { |
|
740 | { | |
741 | "cell_type": "markdown", |
|
741 | "cell_type": "markdown", | |
742 | "metadata": {}, |
|
742 | "metadata": {}, | |
743 | "source": [ |
|
743 | "source": [ | |
744 | "[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)" |
|
744 | "[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)" | |
745 | ] |
|
745 | ] | |
746 | } |
|
746 | } | |
747 | ], |
|
747 | ], | |
748 | "metadata": { |
|
748 | "metadata": { | |
749 | "cell_tags": [ |
|
749 | "cell_tags": [ | |
750 | [ |
|
750 | [ | |
751 | "<None>", |
|
751 | "<None>", | |
752 | null |
|
752 | null | |
753 | ] |
|
753 | ] | |
754 | ], |
|
754 | ], | |
755 | "kernelspec": { |
|
755 | "kernelspec": { | |
756 | "display_name": "Python 2", |
|
756 | "display_name": "IPython (Python 2)", | |
757 | "name": "python2" |
|
757 | "name": "python2" | |
758 | }, |
|
758 | }, | |
759 | "language_info": { |
|
759 | "language_info": { | |
760 | "codemirror_mode": { |
|
760 | "codemirror_mode": { | |
761 | "name": "ipython", |
|
761 | "name": "ipython", | |
762 | "version": 2 |
|
762 | "version": 2 | |
763 | }, |
|
763 | }, | |
764 | "file_extension": ".py", |
|
764 | "file_extension": ".py", | |
765 | "mimetype": "text/x-python", |
|
765 | "mimetype": "text/x-python", | |
766 | "name": "python", |
|
766 | "name": "python", | |
767 | "nbconvert_exporter": "python", |
|
767 | "nbconvert_exporter": "python", | |
768 | "pygments_lexer": "ipython2", |
|
768 | "pygments_lexer": "ipython2", | |
769 |
"version": "2.7. |
|
769 | "version": "2.7.6" | |
770 |
} |
|
770 | } | |
771 | "signature": "sha256:198630bf2c2eb00401b60a395ebc75049099864b62f0faaf416da02f9808c40b" |
|
|||
772 | }, |
|
771 | }, | |
773 | "nbformat": 4, |
|
772 | "nbformat": 4, | |
774 | "nbformat_minor": 0 |
|
773 | "nbformat_minor": 0 | |
775 | } No newline at end of file |
|
774 | } |
General Comments 0
You need to be logged in to leave comments.
Login now